Neu Shop5 NOVA - Galerieansicht Bilder vergrößern

[misterGST]

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).



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]

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:

{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]

Hallo Michael,

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


VIELEN DANK - und Gruß
Georg

 

[Petermeter]

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]

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

 

[Petermeter]

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

Hex besten dank!

öm ich muss doch die ordner \productlist\index.tpl erst anlegen im child richtig?

 

[misterGST]

Vollkommen richtig - denn wenn nix da ist, kannst du auch nichts ändern ...

Eine gute Hilfe zu dem Child-Thema findest du hier in der JTL- Shop Entwickler-Dokumentation hier: Ein neues Child-Template erstellen

Gruss Georg

 

[Petermeter]

Vollkommen richtig - denn wenn nix da ist, kannst du auch nichts ändern ...

Eine gute Hilfe zu dem Child-Thema findest du hier in der JTL- Shop Entwickler-Dokumentation hier: Ein neues Child-Template erstellen

Gruss Georg

Gemacht, Getan und sieht ziemlich nice aus !!! Danke dir mein Guter!!!

 

[StefanA]

Hallo Community,

ich habe nach diesem Beitrag, die Mobile-Galerieansicht auf einen Artikel pro Reihe in der index.tpl umgestellt (var=gridsm value='12').
Danke schonmal dafür, an den Ersteller.

Nun habe ich ein ähnliches Problem wie der Autor.

Die Artikelbilder scheinen den Container nicht mehr ganz auszufüllen.
Zur Artikelbeschreibung, zu den Seiten und nach oben, zum nächsten Artikel ist der Abstand sehr groß.

Ich frage mich nun, an welcher Stellschraube ich drehen kann, um den Platz besser auszufüllen.

Gibt es einen Margin-Wert, der den Abstand zum Container festlegt und die Bilder klein macht, oder kann ich die breite der Bilder in der Mobilen-Ansicht anpassen?

Vielen Dank

Stefan