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.
Hallo @barbara klappt wieder mal Super! Danke Dir! Vieleicht solltest Du dir mal nen Spenden-Butten in deiner Signature einbauen!
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
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
Hallo Barbara, bin Anfänger. wo muss das genau hin ? Habe schon alles ausprobiert, aber ohne Wirkung. Meine Bilder kleben unten an der Leiste. Grüße Urs
Hallo Barbara und Markus, Danke für die Antworten. Ihr seid Profis. Könnt Ihr mir bitte etwas genauer helfen ? Wie muss die .css aussehen und welchen Namen muss die haben? Grüße von Urs
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
Hallo Barbara, vielen Dank ! Jetzt funktioniert es, wie es sein soll. Die Krönung wäre, wenn die Stammartikelbilder links vertikal und die Attribute Bilder unten horizontal angezeigt werden könnten. Es wird wahrscheinlich nicht jeder denn Sinn verstehen. Bei uns gibt es sehr viele Artikelbilder und zusätzlich Attribute Bilder. Viel Grüße Urs
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.
Hallo Barbara, die neueste Version ist installiert. Nur die Attribute Bilder werden zuletzt angezeigt, nach den Artikelbildern. Nach dem letzten Update zeigt es die Attribute Bilder aus den Optionswerten nicht mehr an, das ist für uns eine Katastrophe. Jetzt muss ich alles umstellen. Viele Grüße Urs
Hallo zusammen, zuallererst einmal vielen Dank an alle, die dieses Forum hier mit so viel Leben und tollen Beiträgen füttern. Ich konnte mir schon einiges abgucken. Ich habe die schöne Darstellung im Shop von Marianne Reinke gesehen, die mich hier auf dieses Thema hingewiesen hat. Ich habe auch schon alles soweit umgesetzt, wie es hier steht. Allerdings rutschen bei mir die Galeriebilder unterhalb des Artikelbilds in den Abschnitt der Tabs (Artikelbeschreibung usw.) Könnt ihr mir einen Tipp geben, wie ich das verbessern kann? Vielen lieben Dank für Eure Hilfe! LG Christian
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