Einzelne Produktseite: Maximale Höhe der Bilder ändern

  • Gelöst philippmartini

    (@philippmartini)


    vor 3 Jahren, 10 Monaten

    Hallo,

    Ich habe ein etwas spezielleres Problem mit Produktbildern, das ich bereits mittels CSS versucht habe zu lösen – das funktioniert auch soweit, aber sobald ich Bilder zur Produktgalerie hinzufüge, merke ich, dass mein CSS anscheinend nur auf das erste Bild angewendet wurde. Hier eine kurze Demo: https://www.loom.com/share/8e1b9c0b82d34ddea1a5b0853245dc53

    Hier der CSS-Snippet:

    .woocommerce #content div.product div.images, 
.woocommerce div.product div.images, 
.woocommerce-page #content div.product div.images, 
.woocommerce-page div.product div.images {
    max-height: 60vh;
    overflow: hidden;
    margin: 0px 0px 0px 0px;
}

.zoomImg, .wp-post-image {
    position: relative !important;
    width: auto !important;
    max-height: 60vh !important;
    margin-bottom: 0;
    margin: 0 auto;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none;
}

    Der Link zum Shop: https://gauer-glas.de/produkt/stehwichtel/

    Sonst ist eigentlich alles an diesem Shop default.
    Der Hintergrund hinter dieser Änderung ist, dass viele Produktbilder in nicht üblichen Verhältnissen geschossen wurden (viel zu lang, aber nicht sehr breit, also zb 2:8). Dies wollten wir nun kompensieren indem wir die Bilder sich nicht in ihrer ganzen Länge strecken lassen.

    Wäre super, wenn es eine Lösung gäbe um dieses Problem zu lösen.
    Ich danke euch schon mal im Voraus,

    Mit lieben Grüßen,
    Philipp

    • Dieses Thema wurde geändert vor 3 Jahren, 10 Monaten von philippmartini.
    • Dieses Thema wurde geändert vor 3 Jahren, 10 Monaten von philippmartini.
Ansicht von 4 Antworten – 1 bis 4 (von insgesamt 4)
  • Moderator Angelika Reisiger

    (@la-geek)

    vor 3 Jahren, 10 Monaten

    Hallo @philippmartini

    man könnte jetzt vortrefflich „theoretisieren“. Ernsthaft, wie soll man das Problem beheben können, wenn man es nicht sehen kann, sprich, wenn die Slideshow nicht vorhanden ist? 🙂

    Also ich zumindest sehe keine Thumbnails unterhalb des großen Bildes (wie sie in der Demo zu sehen sind).

    Thread-Starter philippmartini

    (@philippmartini)

    vor 3 Jahren, 10 Monaten

    Hallo @la-geek,

    Danke für deine Antwort – genau das ist auch eins der Probleme (kommt natürlich auf die Screensize an). War vielleicht doof von mir, dass ich das ganze Problem auf meinem großen Monitor aufgenommen habe.

    Im Prinzip sollte das Bild + die Thumbnail-Galerie auf die 60vh passen – jetzt wird aber abgeschnitten statt resized. Vielleicht gibt’s unter den Bedingungen eine Lösung. Auf allen Geräten sollte quasi alles sichtbar sein – so wie auch unter Standardbedingungen – das Hauptbild kann ruhig kleiner sein, aber Hauptsache alles passt drauf und ist nicht zu lang.

    Das Problem ist echt doof und hätte man auch garnicht, wenn die Bilder kein solch ungewöhnliches Verhältnis hätten – hoffentlich gibt’s dennoch eine Lösung die alles unter einen Hut bringt.

    Moderator Angelika Reisiger

    (@la-geek)

    vor 3 Jahren, 10 Monaten

    Hallo @philippmartini

    Mit CSS ist da wohl nichts zu machen, denn die Thumbs werden per inline-styles gesteuert, die (so vermute ich) per JavaScript hinzugefügt werden, da helfen weder Kaskadierung noch !important.

    Vorab die Frage: Wieso sind Fotos mit so riesiger Auflösung eingebunden (Beispiel class .zoomIMG)?

    Auf der von dir verlinkten Seite sind 152 JavaScript-Fehler (siehe Konsole im Entwicklermodus), die fast ausschließlich auf das Bezahlverfahren bezogen sind.

    Installiere doch mal das Plugin „Enable jQuery MIgrate Helper“ siehe hier, alle Caches/Cookies löschen nicht vergessen.

    Bringt das nichts, dann teste mit dem Plugin Health Check ->
    https://de.wordpress.org/support/topic/health-check-informationen-zu-deiner-website/

    Thread-Starter philippmartini

    (@philippmartini)

    vor 3 Jahren, 10 Monaten

    Hallo Angelika,

    Danke für die schnelle Antwort. Der „jQuery Migrate Helper“ hat geholfen, jetzt kommen keine Fehler mehr 🙂

    Okay, dann müssen wir uns wohl was einfallen lassen – am Besten Bilder anders skalieren… Und ja, die Bilder müssten auch noch komprimiert werden (da gibt es ja auch Plugins für).

    Vielen Dank dir,

    Liebe Grüße
    Philipp

Ansicht von 4 Antworten – 1 bis 4 (von insgesamt 4)
  • Das Thema „Einzelne Produktseite: Maximale Höhe der Bilder ändern“ ist für neue Antworten geschlossen.