Artikelseite: Galeriebilder unter dem Artikelbild

Thema wurde von barbara, 25. Januar 2021 erstellt.

  1. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    #1 barbara, 25. Januar 2021
    Zuletzt bearbeitet: 26. Januar 2021
    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:
    Unbenannt.JPG

    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:

    Unbenannt-1.JPG



    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.
     
  2. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    6. September 2011
    Beiträge:
    1.921
    Danke erhalten:
    456
    Danke vergeben:
    438
    #2 Anonymous, 25. Januar 2021
    Zuletzt bearbeitet: 26. Januar 2021
    Hallo @barbara klappt wieder mal Super! Danke Dir!:)

    Vieleicht solltest Du dir mal nen Spenden-Butten in deiner Signature einbauen!;)
     
  3. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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
     
  4. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    6. September 2011
    Beiträge:
    1.921
    Danke erhalten:
    456
    Danke vergeben:
    438
    #4 Anonymous, 25. Januar 2021
    Zuletzt bearbeitet: 26. Januar 2021
    Geht aber!
    Vorher:
    sessel.JPG

    Nacher:
    Unbenannt.JPG
     
  5. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Aber ein bisschen Größer wäre schöner, oder?
     
  6. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    6. September 2011
    Beiträge:
    1.921
    Danke erhalten:
    456
    Danke vergeben:
    438
    Im Prinzip, ja
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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
     
  9. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    6. September 2011
    Beiträge:
    1.921
    Danke erhalten:
    456
    Danke vergeben:
    438
  10. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Da musst Du Mirko danken, auf die Datei wäre ich nicht gekommen :)
     
  11. Anonymous

    Anonymous Neues Mitglied

    Registriert seit:
    2. März 2017
    Beiträge:
    4
    Danke erhalten:
    0
    Danke vergeben:
    3
    #11 Anonymous, 22. Februar 2021
    Zuletzt bearbeitet: 22. Februar 2021
    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

     
  12. markus_wick

    markus_wick Erfahrener Benutzer

    Registriert seit:
    10. Oktober 2018
    Beiträge:
    966
    Danke erhalten:
    214
    Danke vergeben:
    153
    Ohne den Thread jetzt genau verfolgt zu haben: Der Code muss wohl ins eigene CSS im StyleEdit.
     
  13. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    genau und ohne das "Code:" am Anfang
     
  14. Anonymous

    Anonymous Neues Mitglied

    Registriert seit:
    2. März 2017
    Beiträge:
    4
    Danke erhalten:
    0
    Danke vergeben:
    3
    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
     
  15. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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
     
  16. Anonymous

    Anonymous Neues Mitglied

    Registriert seit:
    2. März 2017
    Beiträge:
    4
    Danke erhalten:
    0
    Danke vergeben:
    3
    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
     
  17. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.
     
  18. Anonymous

    Anonymous Neues Mitglied

    Registriert seit:
    2. März 2017
    Beiträge:
    4
    Danke erhalten:
    0
    Danke vergeben:
    3
    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
     
  19. Anonymous

    Anonymous Mitglied

    Registriert seit:
    15. November 2018
    Beiträge:
    9
    Danke erhalten:
    3
    Danke vergeben:
    24
    #19 Anonymous, 19. September 2021
    Zuletzt bearbeitet: 19. September 2021
    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
     

    Anhänge:

  20. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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