Hallo, ich habe den Code so bearbeitet, dass ich ein Bild für die mobile Version und eines für die Web Version einfügen kann. Leider weiß ich nicht, welche Größe (px, cm) mein Bild für die mobile Version benötigt bzw. wird jedes Bild in der mobilen Version im falschen Format angezeigt.
Hey @THMP12345
Du sagst es wird jedes Bild in der mobilen Version im falschen Format angezeigt, ist das richtig? Hier gibt es mehrere Ursachen die ich unten eingehe. Um welches Theme handelt es sich hier?
Das Bild Aspect deines Hintergrundbildes (16:9?) passt oft einfach nicht in dem Mobile Raster rein (1:2?). Manche Themes haben eingebaute komplexe Algorithmen die das Aspekt korrigieren aber wie es aussieht hat dein Theme diesen Algorithmus nicht, oder schon, aber der Algorithmus greift nicht für Hintergrund Fotos.
Aber ein Workaround wäre ein separates Hintergrundbild für Desktop und für Mobile zu haben was aber Coding Kenntnisse verlangt. Ist es das was du beriets gemacht hast? Beispiele davon kannst du in diesem Leitfaden nachlesen wie man das in der Slideshow macht (immer in einer Testumgebung vorher testen).
Somit wird das eine Programmierung verlangen je nach Theme Code dass du hast. Du könntest z. B. ein ganz anderes Foto auf Mobile anzeigen oder das selbe das aber anders in den Dimensionen geschnitten ist. Siehe ein YT Video der zeigt wie man das im Debut Theme machen kann hier.
Das Problem liegt oft an den Bilder-Dimensionen und dem Theme Platzhalter der Fotos im Theme. Diese sind auch, wie gesagt, anders dimensioniert auf Mobile als auf Desktop, wie z. B. 16:9 versus 3:4 o. ä. Manche Themes verwenden komplexe Algorithmen die die Dimensionen zw. Desktop und Mobile automatisch übersetzen, so dass das Foto auch auf Mobile nicht abgeschnitten aussieht, aber die meisten Themes machen das nicht.
- Wir haben hier eine Reihe Anleitungen die dir helfen können die BIlder am besten zu croppen und einzurichten im Theme.
Du kannst in deinen Theme Editor gehen und im Hero Section sieht man oft eine eine Einstellung wie “Section height”. Wenn du diese Einstellung von “Mittel” auf “Groß” oder sogar “Extra groß” umstellt dann kann dein Bild besser auf Mobile aussehen.
Die Höhe eines Hero Banners ist oft auf 475px (im theme.scss.liquid) für alle Bildschirme mit einer Mindestbreite von 750px eingestellt. Du kannst diese Höhe in der besagten Datei (aber zuerst in einer Testumgebung) ändern und eine Höhe einstellen, die den Teil des Bildes zeigt, den du anzeigen möchtest.
Du könntest sie zum Beispiel auf 87vh oder REM einstellen (was auf meinem Bildschirm gut aussieht).
Die Einheit vh oder REM ist relativ zur Höhe deines Ansichtsfensters - 1vh ~ 1% der Höhe des Ansichtsfensters.
Bei weiteren Fragen raten wir einen Fotografen oder Experten zu konsultieren den die können hier am besten helfen.
Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.