ich bin schon wieder am verzweifeln. Vorab: Forum habe ich durchgesucht und die Doku gelesen. Ich komme trotzdem nicht weiter.
Um die Bilder in den Einkaufswelten auf die verschiedenen Endgeräte anzupassen habe ich alle Möglichkeiten durchprobiert. Das Eingangsbild sieht am Desktop gut aus, ist aber auf dem Handy abgeschnitten. Wenn ich nun alle Verknüpfungen lösche und ein separates Bild nur für das Handy hochlade, wird es automatisch auch am Desktop übernommen und verzerrt dargestellt. Ich habe auch versucht, eine komplett neue Handy-Einkaufswelt anzulegen. Obwohl ich die Verknüpfung aufhebe, wird das Bild immer für alle Endgeräte übernommen. Hat jemand einen Tipp?
Entweder mehrere Banner-Elemente einbinden und nur im jeweiligen Viewport einblenden oder die Thumbnail-Größen in einem Ordner in der Medienverwaltung so anpassen, dass die verschiedenen Ausgabegrößen passen. Wobei logischerweise nicht magisch das Seitenverhätlnis automatisch angepasst wird.
Entweder mehrere Banner-Elemente einbinden und nur im jeweiligen Viewport einblenden oder die Thumbnail-Größen in einem Ordner in der Medienverwaltung so anpassen, dass die verschiedenen Ausgabegrößen passen. Wobei logischerweise nicht magisch das Seitenverhätlnis automatisch angepasst wird.
Das heißt, dass wir das Bild auf mehrere Formate bringen müssen, und dann den jeweiligen Viewports zuweisen müssen? Damit würde doch ein Bild immer doppelt geladen werden, oder? Die Bilder müssten also einmal im Quadrat und einmal im Längsformat angelegt werden?
Das kommt halt darauf an. Man kann Bilder ja auch so zuschneiden, dass sie „universell“ in jedem Viewport gut aussehen. Dass das nicht immer geht, ist mir klar.
„Doppelt“ geladen ist so auch nicht richtig.
Beispiel 1 – Alle Viewports in einer Einkaufswelt, verschiedene Bildergrößen über Thumbnails: In der Einkaufswelten landet ein picture-Element mit allen definierten Bildgrößen. Aber der Browser sucht sich genau das eine raus, das am passendsten ist und lädt nur dieses.
Beispiel 2 – Viewports getrennt in mehreren Einkaufswelten definiert: Komplette Steuerung des Bildmaterials je Viewport möglich ohne eine Verdopplung der Elemente.
Sprich: Ungeschickt ist es, wenn man alle Viewports in einer einzigen Einkaufswelt definiert und dann noch je Viewport andere Banner/Elemente verwendet. Dann wird zumindest „unnötiger“ Code geladen. Ob die nicht sichtbaren Bilder tatsächlich geladen werden, müsste man testen. Ich bin mir nicht sicher, wie das gelöst ist.
Ich habe eine eigene Thumbnail-Größe angelegt. Eine einzige !
Das Layout in der EK, auf Resize und alle Viewports miteinander verbunden.
Auf Smartphone sieht es aber bei Dir nicht gut aus. Die Schriften sind viel zu klein, man kann nichts lesen. Da nutzt Dir eine einzelne Thumbnail-Größe auch nichts. Sieht normal auch nicht anders aus wenn man es nicht speziell bearbeitet und alles nur auf Resize stellt.
Ich habe deshalb auch eigene Bilder extra für Mobile Portrait und Landscape angelegt, damit man wenigstens was sieht und lesen kann. Ja leider Doppelt, aber anders sieht es besch… aus. Auf Tablett ist ja noch alles ok. Einzig der Bannerslider ist mir noch zu klein im Gegensatz zu den anderen Bildern.
Wer das klasse umgesetzt hat und da würde ich gerne mal Mäusschen spielen im Backend… ist der Shop Gefu (dot) com. Die Produktwelt ist auf Handy sehr groß und alles schön untereinander. Bei mir klappt nichts um wenn ich z.B. 3 Elemente in einer Reihe habe, sodaß es untereinander angezeigt wird. Hab alles ausprobiert, irgendwie gehts nicht. Bei mir sind dann drei schmale Bilder zu sehen. Oder da wurde auch mit verschiedenen Einkaufswelten gearbeitet für Desktop und Mobil oder auch div. Plugins.
@artep Das bei Gefu ist eigentlich keine große Kunst. Es sind drei Slider innerhalb einer Einkaufswelt, von denen immer nur einer angezeit wird. (Kann man leicht im Quellcode nachsehen.) Das finde ich sogar ein wenig ungeschickt, da auf diese Weise der Quellcode aller drei Slider immer geladen wird. Eine Aufteilung in mehrere Einkaufswelten – eine für jede anvisierte Bildschirmgröße – wäre meiner Meinung nach besser.
Das Anzeigen von Elementen nebeneinander auf breiten Bildschirmen und untereinander auf schmalen ist eigentlich gar kein Problem. Das muss man halt bei den verschiedenen Breiten entsprechend einrichten. (Beispiel: Layout mit 3 Spalten. Bei Tablet und Desktop je 1 Element über 1 Spalte, bei Smartphone dann 1 Element auf 3 Spalten ziehen. Fertig.)
ist der Shop Gefu (dot) com. Die Produktwelt ist auf Handy sehr groß und alles schön untereinander. Bei mir klappt nichts um wenn ich z.B. 3 Elemente in einer Reihe habe, sodaß es untereinander angezeigt wird. Hab alles ausprobiert, irgendwie gehts nicht. Bei mir sind dann drei schmale Bilder zu sehen. Oder da wurde auch mit verschiedenen Einkaufswelten gearbeitet für Desktop und Mobil oder auch div. Plugins.