Neu Image width/height in tpl von Kategorien

[Penoit]

Hallo!

Wir nutzen den JTL Shop 5 mit dem Nova Templet - bei den Bildern für die Kategorien ist im Quellcode(Browerser Seitenquellcode anzeigen) für die width / height nur "" hinterlegt.
Im header.tpl finden wir auch den dazugehörigen wrapper - aber ein definieren der wrapper width/ height hat keinen Einfluss auf das Image selber, was ja auch nicht überraschend ist.

Da uns aber wichtig ist, dass jedes Bild im Shop eine im Code vordefinierte Größe hat - um bereits Platz für diese im Browers zu "reservieren", müssen wir ja irgendwie an die Kategorie Bilder width/ height rankommen.
Nach langen suchen, daher einfach mal die Frage: In welcher tpl können wir das ändern?

Vielen Dank für die Mühe!

 

[Penoit]

EDIT: Unter den Kategorie Bild sind noch subCategorys mit Bildern - folgefrage: Passen wir die width / height für die Category images und subCategorys in der gleichen tpl an?

 

[Penoit]

@EDIT Die Bilder der subCategory lassen sich in productlist/header.tpl anpassen. (Empfehlung: Nutzt ein ChildTheme)

 

[Penoit]

LÖSUNG:
Besonderer Dank geht dabei an -> Maßerbyte <-

Erläuterung:

#1 Kategoriebild
productlist/header.tpl
Ab Zeile 49 wird es da interessant
Das Image ist ein Snippet was dort includet wird. Es liegt in snippets/image.tpl (wird an mehreren Stellen im Shop verwendet)


#2 die Unterkategorien
productlist/header.tpl
Zeile 109

{image …}

Da die Kategoriebilder via snippet includet werden, ist ein definieren der Size im snippet nicht hilfreich um die CLS zu minimieren.
Aber im Header des Layouts gibt es die Möglichkeit, dem snippet die Maße per Parameter mitzugeben und so den Effekt zu erzielen.

{include file='snippets/image.tpl'
class='productlist-header-description-image'
item=$navData
square=false
alt="{if $oNavigationsinfo->getCategory() !== null && !empty($navData->getImageAlt())}{$navData->getImageAlt()}{else}{$navData->cBeschreibung|strip_tags|truncate:50}{/if}"}

wird zu


{include file='snippets/image.tpl'
class='productlist-header-description-image'
width='X'
height='Y'
item=$navData
square=false
alt="{if $oNavigationsinfo->getCategory() !== null && !empty($navData->getImageAlt())}{$navData->getImageAlt()}{else}{$navData->cBeschreibung|strip_tags|truncate:50}{/if}"}

Durch die Klasse “img-fluid” am Bild selbst (was die image.tpl setzt) wird die max-width auf 100% des Containers gesetzt in dem sich das Bild befindet. Ist also responsive und skaliert auch nicht über die Container-Größe hinaus.

Also alle die ihre CLS verbessern wollen mit dem Nova5 Templet - durch Maßarbyte´s Bemühungen könnte ihr hier paar % rausholen.
Beste Grüße
Eurer CBDShop24