Neu Shop5 NOVA - Galerieansicht Bilder vergrößern

misterGST

Gut bekanntes Mitglied
23. September 2007
320
23
Liebe Mitmenschen,

ich verzweifle gerade an einem Problem und bitte um Hilfe (JTL-Shop 5.0.3 NOVA Template) - suche schon seit Stunden:
Mein Ziel ist es große Bilder in der Galerieansicht darzustellen.

Habe also in den Kategorien und Suche, die Galerieansicht von 4 Reihen (Desktop > col-xl) auf 3 Reihen umgestellt. Dazu habe ich die Datei: \productlist\index.tpl angepasst. Jetzt klafft natürlich ein großer Abstand zwischen den Bildern, da die Bildgröße für 4 Reihen optimiert ist (siehe Screenshot).
galerieansicht-3-reihen.jpg


Ziel: Nun sollen die Bilder soweit vergrößert werden, dass die Galerie schick aussieht.

Aktuell ist das Quellbild 600px hoch und wird auf 381px gestaucht! Nur ... woher kommt die Anweisung?
FRAGE: Welche TPL-Datei oder welchen CSS-Wert muss ich ändern, um das Bild - oder wrapper - größer anzeigen zu lassen
(der rote Kasten soll ausgefüllt werden)?
Bitte um eine kurze Anleitung.

Vielen Dank
Georg
 

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
714
187
Hallo,

die Bildgrößen sind nicht für 4 Reihen optimiert, der Platz den sie einnehmen können ist halt nur quadratisch, wodurch bei dir links und rechts Ränder entstehen. Das wird z. B. auch in den Artikel-Slidern der Fall sein.
Du müsstest also die Klassen square und square-image von den Bild-Wrappern nehmen. Siehe productlist/item_box.tpl den Block produclist-item-list-image. Das kannst du z. B. damit ersetzen:
Code:
{block name="productlist-item-list-image"}
     {strip}
         {$image = $Artikel->Bilder[0]}
         <div class="productbox-image first-wrapper">
         {image alt=$alt fluid=true webp=true lazy=true
             src="{$image->cURLKlein}"
             srcset="{$image->cURLMini} {$Einstellungen.bilder.bilder_artikel_mini_breite}w,
                      {$image->cURLKlein} {$Einstellungen.bilder.bilder_artikel_klein_breite}w,
                      {$image->cURLNormal} {$Einstellungen.bilder.bilder_artikel_normal_breite}w"
             sizes="auto"
             data=["id"  => $imgcounter]
             class="{if !$isMobile && !empty($Artikel->Bilder[1])} first{/if} w-100"
             fluid=true
         }
         </div>
         {if !$isMobile && !empty($Artikel->Bilder[1])}
             <div class="productbox-image second-wrapper">
                 {$image = $Artikel->Bilder[1]}
                 {image alt=$alt fluid=true webp=true lazy=true
                     src="{$image->cURLKlein}"
                     srcset="{$image->cURLMini} {$Einstellungen.bilder.bilder_artikel_mini_breite}w,
                              {$image->cURLKlein} {$Einstellungen.bilder.bilder_artikel_klein_breite}w,
                              {$image->cURLNormal} {$Einstellungen.bilder.bilder_artikel_normal_breite}w"
                     sizes="auto"
                     data=["id"  => $imgcounter|cat:"_2nd"]
                     class='second w-100'
                 }
         </div>
         {/if}
     {/strip}
 {/block}

Dann wäre es aber auf jeden Fall hilfreich wenn deine Bilder alle gleich groß sind.

Viele Grüße
Michael
 

misterGST

Gut bekanntes Mitglied
23. September 2007
320
23
Hallo Michael,

du bist ein Magier - Code ersetzt und es sieht einfach nur PERFEKT aus! ... ohne weitere CSS-Anpassungen!
galerieansicht-3-reihen-neu.jpg

VIELEN DANK - und Gruß
Georg
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu Shop5 NOVA - SWATCH-Image - PopUp deaktivieren Templates für JTL-Shop 5
Neu Produktdaten für rich snippets werden von Shop5 (NOVA) nicht geliefert Allgemeine Fragen zu JTL-Shop 1
Neu 💙 Neues Plugin: Energielabel (für JTL-Shop5) - empfohlen vom Händlerbund! Plugins für JTL-Shop 0
Neu 💙 Neues Plugin: Messenger Kontaktlayer (für JTL-Shop5) Plugins für JTL-Shop 5
Neu 💙 Neues Plugin: Artikelsticker Plus (für JTL-Shop5) Plugins für JTL-Shop 0
Neu JTL Shop5 Plugin " Gefahrensymbol" Com-ins-netz CIN GmbH Plugins für JTL-Shop 0
Neu Mixbox Plugin für JTL-Shop5 Com-ins-netz CIN GmbH Plugins für JTL-Shop 0
Neu Shop5 Plugin " Pfand incl. Altteilesteuer für den KFZ Handel" Com-ins-netz CIN GmbH Plugins für JTL-Shop 0
Neu Platzhalter Datenbankfelder Betreffzeile Email aus shop5 Bestellbestätigung Versandbestätigung etc Allgemeine Fragen zu JTL-Shop 0
Neu JTL-Shop5 API Bug Allgemeine Fragen zu JTL-Shop 1
Neu STRIPE Zahlungsplugin für JTL-Shop5 Plugins für JTL-Shop 2
Neu 💙 Neues Plugin: Kategorietext Anzeige Plus (für JTL-Shop4 und JTL-Shop5) Plugins für JTL-Shop 0
Neu 💙 Neues Plugin: Lexikon/Glossar (für JTL-Shop5) Plugins für JTL-Shop 0
PHP Version 7.4 + 8 generiert Fehler 500 (shop5) Einrichtung JTL-Shop5 1
Shop5 Export Idealo Artikel mit Umlauten werden in Idealo mit Sonderzeichen dargestellt Einrichtung JTL-Shop5 6
Neu Vorschlag Usability Optimierung Shop5 Backend JTL-Shop - Ideen, Lob und Kritik 2
Neu 💙 Neues Plugin: Kundenfragen und -antworten für Artikel (für JTL-Shop5) Plugins für JTL-Shop 5
Neu 💙 Neues kostenloses Plugin: Eye-Able® Schnittstelle für JTL-Shop5 (für barrierefreie Shops) Plugins für JTL-Shop 3
Neu Fehler beim ausführen des shop5 Testskript (Systemcheck) Installation / Updates von JTL-Shop 7
Wawi Kategorien in Shop5 ausblenden um eigene Seiten zu nutzen (MegaMenü) geht nicht, oder? Einrichtung JTL-Shop5 1
Neu Shop5 Lieferadressen Bug - Lieferadresse lässt sich aus der Bestellübersicht nicht mehr ändern JTL-Shop - Fehler und Bugs 3
Neu Nach dem Upgrade Shop4 > Shop5 - Wawi-Syncdaten müssen manuell abgespeichert werden? JTL-Shop - Fehler und Bugs 10
Neu JTL Shop5 Paypal Express Checkout PayerID is missing Plugins für JTL-Shop 0
Komprimierung des HTML-Ausgabedokuments / Template Einstellung fehlt JTL Shop5 ? Einrichtung JTL-Shop5 0
Neu Artikel im Shop5 aber nicht in der Wawi User helfen Usern - Fragen zu JTL-Wawi 2
libzip/ ziparchive/ ZIP für Shop5 Upgrade JTL-Shop4 auf JTL-Shop5 1
Neu Preloader für JTL Shop5 Allgemeine Fragen zu JTL-Shop 6
Neu Shop5 Neuinstallation - bei aufruf von /News - HTTP ERROR 500 Allgemeine Fragen zu JTL-Shop 3
Shop5 neu installiert, Wawiabgleich vorgenommen, keine Artikel im Shop sichtbar Einrichtung JTL-Shop5 2
Neu Umzug von Modified auf JTL Shop5 Allgemeine Fragen zu JTL-Shop 3
Weiße Seite beim NOVA-Template, EVO geht Upgrade JTL-Shop4 auf JTL-Shop5 1
Neu JTL 5 Shop -> Slick Slider auf der Startseite im Nova Template verändern Templates für JTL-Shop 2
Neu Template Anpassung im Child Theme via JTL Theme Editor -> my-nova.scss Templates für JTL-Shop 0
Neu NOVA Template Farbänderung in verschiedenen Bereichen Templates für JTL-Shop 5
Neu JTL SHOP 5.0.1 / NOVA-Template UVP/Rabattanzeige Artikelübersichten Allgemeine Fragen zu JTL-Shop 5
Neu JTL5.1.1 Nova-Template mit Child Mobiles Menü Templates für JTL-Shop 6
Neu Template Nova/layout/header_nav_search.tpl <li>? JTL-Shop - Fehler und Bugs 3
Beantwortet Einstellungen Megamenü Nova Einrichtung JTL-Shop5 2
Neu Slider verkleinern im NOVA Templates für JTL-Shop 3
Neu Header Box im Shop 5 Nova / Evo.. Templates für JTL-Shop 3
Neu NOVA Template linke Navigation? Templates für JTL-Shop 2
Neu Animations Balken im Nova Template Farbe ändern Templates für JTL-Shop 2
Neu NOVA Template lässt sich nicht aktivieren JTL-Shop - Fehler und Bugs 4
Neu Shop 5 NOVA Template - Menü ohne Kategorien Allgemeine Fragen zu JTL-Shop 4
Neu NOVA: Hauptmenü Dropdown Anpassungen Templates für JTL-Shop 2
Neu Nova Child wie _buttons.scss bearbeiten? Templates für JTL-Shop 1
Neu Produktbilder-Slider soll vertikal im Nova sein Templates für JTL-Shop 2
Neu EU Energielabel Nova Template Templates für JTL-Shop 2
Neu NOVA Farbe untere Footer-Leiste Templates für JTL-Shop 3
Neu NOVA Template - Megamenu Oberkategorie Link entfernen Templates für JTL-Shop 2

Ähnliche Themen