Neu Shop5 NOVA - Galerieansicht Bilder vergrößern

misterGST

Sehr aktives Mitglied
23. September 2007
329
30
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
1.089
332
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
 
  • Gefällt mir
Reaktionen: aadursun

misterGST

Sehr aktives Mitglied
23. September 2007
329
30
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
 

Petermeter

Mitglied
16. August 2021
56
2
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).
Den Anhang 67441 betrachten


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
GeorgHe


Hey schon zwar was älter... aber könntest du mir eventuell genauer erklären wie und Wo du das abgeändert hast von 4 auf dreispalten?
Das wäre wirklich super lieb.

beste Grüße Peter
 

misterGST

Sehr aktives Mitglied
23. September 2007
329
30
Hallo Peter,

NOVA Template > Datei: templates\novachild\productlist\index.tpl
Zeile 30:
{assign var=gridxl value='3'} geändert auf {assign var=gridxl value='4'}
Fertig

LG Georg
 
  • Gefällt mir
Reaktionen: aadursun
Ähnliche Themen
Titel Forum Antworten Datum
Neu Nova-Template, JTL-Shop5: Suche mit Umlauten fehlerhaft JTL-Shop - Fehler und Bugs 3
Neu Ein regionaler Geschenk Store konnte mit Shop5 und NOVA eröffnet werden. Shops stellen sich vor 6
Neu Hat jemanden sowas (Code) für den Footer im JTL Shop5? Templates für JTL-Shop 0
Neu Fehlermeldung beim Abgleich mit Shop5 JTL-Wawi - Fehler und Bugs 0
Neu Exportformat Shop5 - wie JTL-Debug nicht helfen will User helfen Usern - Fragen zu JTL-Wawi 3
Neu Plugin für Trusted Shops Excellence Shop5 Plugins für JTL-Shop 1
Neu Neues JTL-Shop5 Plugin "Click&Collect" by CIN-GmbH 📢 Plugins für JTL-Shop 1
Neu Zoom geht nicht Shop5 Allgemeine Fragen zu JTL-Shop 5
Erstinstallation JTL Shop5 Problem Einrichtung JTL-Shop5 0
Neu Shop5: Kategoriebilder (webp) + Bildeinstellung Backend JTL-Shop - Fehler und Bugs 0
Neu SHOP5 Google Fonts lokal einrichten Allgemeine Fragen zu JTL-Shop 8
Neu AmazonPay lässt sich in Shop5 nicht aktualisieren Plugins für JTL-Shop 9
Nach Update Shop4 auf Shop5 keine Neukunden Anmeldung möglich Upgrade JTL-Shop4 auf JTL-Shop5 1
Neu Versandart abändern in Shop5? Betrieb / Pflege von JTL-Shop 3
Neu [JTL Shop5] Exportformat Googleshopping - Standardattr überschreiben Plugins für JTL-Shop 0
Shop5 an Wawi 1.6 anbinden, Verbindungstest scheitert JTL-Wawi 1.6 2
Neu Shop5.1.2 - Google Search Console bemängelt Felder von Artikeln als fehlend die aber vorhanden sind Betrieb / Pflege von JTL-Shop 5
Neu Welcher Anbieter für Shop5 Hosting? Business Jungle 14
Neu JTL SHOP 5 NOVA TEMPLATE Telefon Kamera barcodes scannen Allgemeine Fragen zu JTL-Shop 0
Neu Favicon unter Einstellungen NOVA hochgeladen ohne Erfolg Allgemeine Fragen zu JTL-Shop 4
Neu Suche 2 Parameter im NOVA (Child) Template vom JTL Shop 5 Technische Fragen zu Plugins und Templates 4
Neu Probleme bei der Preisanzeige eines Artikels beim JTL Shop 5 mit Nova Template Technische Fragen zu Plugins und Templates 12
Neu Trusted Shops Excellence in Shop 5 (Nova) Einbinden Allgemeine Fragen zu JTL-Shop 0
Neu Nova OPC "Default Area" Anzeige auf jeder Seite? Technische Fragen zu Plugins und Templates 3
Neu Nova Template Google Fonts lokal? Allgemeine Fragen zu JTL-Shop 6
Neu "Eigene Box" im NOVA Child via Bootstrap oder info.xml registrieren? Technische Fragen zu Plugins und Templates 2
Neu NOVA - Sonderangebote werden nicht angezeigt Allgemeine Fragen zu JTL-Shop 0
Neu Nova Child Template-Version Verständnisfrage Templates für JTL-Shop 2
Neu Lizenzproblem bei eigenem Nova Child nach Update auf 5.1.4 JTL-Shop - Fehler und Bugs 0
Neu Nova Template: Mega Menu Darstellung der Unterkategorien Technische Fragen zu Plugins und Templates 5
Neu Update 5.1.1 --> 5.1.4: Fehler im Bestellvorgang "unknown tag 'getCountry'" (inc_billing_address_form.tpl) (NOVA) Installation / Updates von JTL-Shop 1
Neu NOVA Template Darstellung Text und Artikel Templates für JTL-Shop 2
Neu Nova Startseite doppelt nach Zurücksetzen Templates für JTL-Shop 2
Neu NOVA Template Theme mit komplett schwarzem Hintergrund - wie ansetzen? Templates für JTL-Shop 3
Neu Nova Template: Newsletter-Anmeldung im Footer anders anordnen Templates für JTL-Shop 1
Neu Nova-Template: Logo bzw. Header in groß und klein beim Scrollen (analog Evo-Template) Technische Fragen zu Plugins und Templates 5
Neu Nova wurde nicht für den 5er Shop entwickelt? JTL-Shop - Fehler und Bugs 4
Neu Eigene Smarty-Funktion - NOVA-Template Ausgabe Templates für JTL-Shop 0
Neu Schriftfarbe Link in Nova Template Body verändern Technische Fragen zu Plugins und Templates 2
Neu Mitlaufende Artikeldetail-Bilder im Nova per CSS? Templates für JTL-Shop 4
Neu PayPal Checkout mit NOVA: Darstellung Technische Fragen zu Plugins und Templates 1
Neu Nova Template Mega Menue Templates für JTL-Shop 6
Neu NOVA Theme Megamenu ohne Dropdown Templates für JTL-Shop 3

Ähnliche Themen