Artikelseite: Galeriebilder unter dem Artikelbild

Hallo,

im Standard sind die Galeriebilder ab einer Bildschirmpreite von 992px links neben dem Bild.
Gerade wenn man links daneben noch die Spalte mit Kategorien und Boxen aktiv hat, nimmt das sehr viel Platz für das Bild weg.
Man kann das aber relativ einfach ändern.
Die Anleitung ist für das Theme und geht nicht in einem Cloudshop

Erstelle im Ordner GXModules ein eigenes Verzeichnis
Meins/Galeriebilder/Shop/Themes/All/
(Statt "Meins" kann auch der Name oder ein Kürzel verwendet werden)

Darin die Datei:
product_info_gallery_main.html
mit diesem Inhalt:

HTML:

{block name="product_info_gallery_thumbnails"}
    <div class="product-info-thumbnails-mobile col-xs-12">
        {include file="get_usermod:{$tpl_path}product_info_gallery_swiper.html" swiperId="product_thumbnail_swiper_mobile" startWidget="true" swiperImages=$thumbnails swiperTarget="#product_image_swiper" swiperOptions=", \"spaceBetween\": 10, \"loop\": false, \"direction\": \"horizontal\", \"slidesPerView\": 4, \"autoplay\": null" additionalData="data-swiper-breakpoints=\"[]\""}
    </div>
{/block}

Damit wird die mobile Ansicht auch auf dem PC angewendet.
Wer möchte, dass sich das Teil automatisch bewegt, kann das hier auch einstellen. Dazu man mann nur das
"autoplay\": null"
in z.B.
"autoplay\": 3"
ändern.
Um ein Bild mehr oder weniger zu zeigen, kann man den Wert bei
"slidesPerView\": 4,
ändern. Aber Vorsicht: das gilt dann auch auf dem Handy!

Jetzt muss das ganze noch in die Passende Größe gebracht werden.

Mein 1. Code gibt dem Artikelbild einen Abstand, damit das nicht irgendwo am Rand klebt
Der 2. Code ist etwas schwieriger, weil es da auf die eingestellte Bildgröße ankommt.
In der Grundform kann man sagen: Höhe des Artikelbildes + 50px - 100px
Das muss man sich aber etweas ausprobieren, was da am Besten ist.

Code:

.product-info .product-info-stage {
    padding: 15px;
}
@media (min-width: 992px){
.product-info .product-info-stage {
    height: 680px;
}}

Das sollte jetzt etwa so aussehen:


Die Bilder sind recht klein, das kommt daher, dass hier die winzigen Gallery-Bilder mit 86 x 86px verwendet werden.
Vergrößert man die, wird es Pixelig und unschön.
Wer sie aber größer haben möchte;
das geht mit einem kleinen Eingriff in einer Datei - Leider habe ich das nicht Updatesicher.

Die Datei ist hier:
GambioCore/Images/ImagesServiceProvider.php

Da gibt es die Zeile

PHP:

$this->application->registerShared(ProductGalleryImages::class)->addArgument(DIR_WS_IMAGES . 'product_images/gallery_images/');

Wenn man die ändert in

PHP:

 $this->application->registerShared(ProductGalleryImages::class)->addArgument(DIR_WS_IMAGES . 'product_images/thumbnail_images/');

werden immer die Thumbnails statt der Galeriebilder genommen.
(Die Zeile stammt aus der Version 4.3.1.0, in der 4.2.0 sieht die Zeile etwas anders aus. Bitte nicht einfach kopieren, sondern nur den Bild-Ordner ändern!)

Nachtrag:
Updaesicher geht es, wie hier beschreiben:
(Link nur für registrierte Nutzer sichtbar.)

Dann muss nochmal das css angepasst werden.
In meinem Testshop habe ich dafür den Code eingetragen:

Code:

@media (min-width: 992px){
.product-info-thumbnails-mobile,
.swiper-slide-inside .align-vertical, .product-info-layer-thumbnails #product_thumbnail_swiper_mobile .swiper-slide-inside .align-vertical,
.product-info-thumbnails-mobile #product_thumbnail_swiper_mobile{
height: 100% !important;
}}

und jetzt sieht das so aus:





Bitte testet das erst gründlich, am Besten in einem Testshop.
Der Einbau ist auf eigenes Risiko, ich übernehme keine Haftung wenn etwas nicht geht.

 

Nur blöd, dass der 2. Teil nicht Updatesicher geht.
Aber vielleicht ändert Gambio die Bilder ja doch mal auf die Thumbnails.
Die Galeriebildchen sind da einfach zu klein

 

Aber ein bisschen Größer wäre schöner, oder?

 

Ein Herzliches Danke an @Mirko (Gambio) , für den guten Tipp zu den Vorschaubildern.
(Link nur für registrierte Nutzer sichtbar.)

Wer die kleinen Bilder etwas größer haben möchte:
Erstellt im Verzeichnis
Meins/Galeriebilder/Shop/Themes/All/
neben der Datei
product_info_gallery_main.html

eine weitere Datei mit dem Namen
product_info_gallery_swiper_slide.html

und diesem Inhalt:

HTML:

{block name="product_info_gallery_swiper_slide_mobile"}
    <div class="align-vertical">
        <img
            {if $img_src2} data-thumb-src="{$img_src2|strip_tags}"{/if}
            src="{$img_src|replace:'gallery_images':'thumbnail_images'|strip_tags}"
            {if $img_alt} alt="Mobile Preview: {$img_alt|strip_tags}"{/if}
            {if $img_title} title="Mobile Preview: {$img_title|strip_tags}"{/if}
            {if $img_zoom} data-magnifier-src="{$img_zoom|strip_tags}"{/if}
        />
    </div>
{/block}

Das css dafür bleibt wie oben beschrieben

 

Da musst Du Mirko danken, auf die Datei wäre ich nicht gekommen

 

genau und ohne das "Code:" am Anfang

 

Gehe im Admin in den Style Editor
Da sind oben rechts 3 Punkte - Klicke darauf und öffne anschlißend den Link "Eigenes css ..."
Jetzt öffnet sich ein PopUp mit einem Textfeld.
Wenn da schon etwas drinnen steht, gibst Du den Code unter dem letzten } ein.

Du kannst einen Hinweis darüber setzten, z;B.:
/*Vorschaubilder im Artikel*/
hier der Code von oben

Damit Du den Überblick über Deine Anpassungen behältst

 

Es soll kommen (oder ist das in der neuen Version schon?), dass die Attributbilder vor den Artikelbildern in der Galerie angezeigt werden. Das hilft ja dann vielleicht schon.

 

Du musst die Bild-Höhe (gesamt) noch anpassen:

Code:

@media (min-width: 992px){
.product-info .product-info-stage {
    height: 850px;
}}

Und dann hast Du als generelle Bildhöhe 405px, das solltest Du auf 455px erhöhen.
damit noch ein bisschen Abstand zwischen den Galeriebildern und der Lieferzeit ist, bei kleineren Monitoren