Neu Kategoriebilder für erste Unterkategorie auch auf dem handy anzeigen lassen

[bernd62]

Hallo,
Ich möchte Kategoriebilder für erste Unterkategorie auch auf dem handy anzeigen lassen.
Im Nova Template lässt sich das leider nur für Desktop Computer einstellen.
Gibt es eine Lösung für die handy Darstellung ?
Gruß
Bernd

 

[Groundhog]

Hallo,
Ich möchte Kategoriebilder für erste Unterkategorie auch auf dem handy anzeigen lassen.
Im Nova Template lässt sich das leider nur für Desktop Computer einstellen.
Gibt es eine Lösung für die handy Darstellung ?
Gruß
Bernd

Dafür gibts leider keine EInstellungsmöglichkeit. Du musst das über eine CSS Regel im Template erzwingen.

Geh dazu in die Template Einstellungen des Nova. Bei "Benutzerdefinierte Styles" trägst du dann folgenden Code ins Feld "Benutzerdefiniertes CSS, Sass oder Scss:" ein:

.subcategories-image.d-none.d-md-flex {
    display: flex !important;
}

Dann speichern und die Shopseite aktualisieren (eventuell Browser Cache löschen). Das sollte dann den gewünschten Effekt haben.

 

[martinwolf]

Alternativ im Child-Template die productlist/header.tpl auf folgendem Block wie folgt anpassen:

{block name='productlist-header-subcategories-image'}
    {link href=$subCategory->getURL()}
        {$imgAlt = $subCategory->getAttribute('img_alt')}
        {$imgSrc = $subCategory->getImage(\JTL\Media\Image::SIZE_SM)}
        <div class="subcategories-image d-flex">
            {image fluid=true lazy=true webp=true
                src=$imgSrc
                width="{if strpos($imgSrc, 'keinBild.gif') !== false}
                    130
                {else}
                    {$subCategory->getImageWidth(\JTL\Media\Image::SIZE_MD)}
                {/if}"|strip
                height="{if strpos($imgSrc, 'keinBild.gif') !== false}
                    130
                {else}
                    {$subCategory->getImageHeight(\JTL\Media\Image::SIZE_MD)}
                {/if}"|strip
                alt="{if empty($imgAlt->cWert)}{$subCategory->getName()}{else}{$imgAlt->cWert}{/if}"
                srcset="
                    {$subCategory->getImage(\JTL\Media\Image::SIZE_XS)}
                    {$subCategory->getImageWidth(\JTL\Media\Image::SIZE_XS)}w,
                    {$subCategory->getImage(\JTL\Media\Image::SIZE_SM)}
                    {$subCategory->getImageWidth(\JTL\Media\Image::SIZE_SM)}w,
                    {$subCategory->getImage(\JTL\Media\Image::SIZE_MD)}
                    {$subCategory->getImageWidth(\JTL\Media\Image::SIZE_MD)}w"|strip
                sizes="(min-width: 992px) 25vw, 33vw"
            }
        </div>
    {/link}
{/block}