Wie kann die Höhe der Slide Show im Origin Theme reduziert werden?

[Thorsten2]

Hallo zusammen,

ich bin gerade mit dem Origin Theme an der Neuerstellung meiner Homepage.

Nun habe ich eine Slideshow hinzugefügt. Leider passt das Höhenverhältnis nicht und ich würde gerne die Höhe reduzieren ohne das die Bilder dadurch abgeschnitten dargestellt werden und die Breite des Slides beibehalten. 

Ich habe schon etliches Videos hierzu angeschaut und selbst einiges ausprobiert. Jedoch leider ohne Erfolg.

Kann mir hier evtl. jemand weiterhelfen?

[Gabe]

Hey @Thorsten2 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren. Und welche Videos sind das die du erwähnt hast?

Das gratis Origin Theme rendert die Bilder "As is" im Slideshow Block was bedeutet, dass sie ziemlich genau an den Platzhalter des Slideshow Blocks zugeschnitten sein müssen. Das bedeutet, dass Die Anpassung der Höhe deiner Slideshow im Shopify Origin Theme, ohne dass die Bilder abgeschnitten werden, kann etwas knifflig sein wird und man muss das Bild mit verschiedene Dimensionen testen und wieder testen, bis es stimmt.

Wenn der Platzhalter 16:9 ist und deine Bilder 20:9 oder 3:2 oder 1:2 usw. dann sind sie nicht genau den Platzhalter zugeschnitten und werden ggf. etwas abgeschnitten angezeigt. Sprich, Bilder mit ähnlichen Verhältnissen verwenden, um Inkonsistenzen in der Höhe der Slideshow zu vermeiden, was auch hilft, das Problem des Bildbeschneidens zu minimieren.

Hast du auch andere Themes getestet die das ggf. besser können, oder möchtest du es beim Origin Theme belassen? Wir empfehlen immer mehrere Themes zu testen um so das beste Theme für euer Shop, Produkte und Branding zu finden.

Andere Themes haben z. B. Algorithmen eingebaut, die das Bild effizienter an den Platzhalter anpassen. In einigen Fällen kannst du auch die Höhe der Slideshow direkt über die Theme-Einstellungen anpassen. Dies hängt jedoch vom jeweiligen Theme ab und kann bei einigen Themes zu einem Beschneiden der Bilder führen, wenn die Höhe geändert wird.

Eine Methode besteht darin, die CSS-Eigenschaft background-size für die Klasse .slideshow_image zu ändern. Indem du background-size: contain; statt background-size: cover; verwendest, kannst du dafür sorgen, dass das gesamte Bild sichtbar bleibt, obwohl es möglicherweise nicht den gesamten Slide-Bereich ausfüllt. Beachte jedoch, dass du diese Klasse möglicherweise nicht direkt in deinen Theme-Dateien findest, da sie von anderen CSS-Dateien oder JavaScript generiert werden könnte.

---
Habt ihr auch den Shop auf die Weihnachtssaison umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 👀!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.