Bilder verrückt auf Contentseite

[AmorisMUNDI]

Hallo,

es geht z.B. um diese Seite: https://www.amorismundi.de/pages/plant-for-the-planet

Ich verstehe nicht warum die Bilder auf dem Desktop nach links eingerückt angezeigt werden? Mobil ist alles ok und wenn man das Fenster auf dem Desktop kleiner zieht wird es irgendwann auch richtig dargestellt.

Shopify selbst meint es gibt einen Code, der dafür verantwortlich ist, aber da es um einen mit dem Rich-Text Editor erstellten Inhalt geht wollen Sie mir nicht helfen...

Kann jemand dieses Problem lösen oder mir sagen was ich wo anpassen muss?

Liebe Grüße

Daniel

[Gabe · Accepted solution]

Hey @AmorisMUNDI 

Danke für die URL und das sieht nicht besonders gut aus, da hast du recht! Leider werden Anpassungen des RTE Editor von unserem Core Support Team nicht unterstützt, wie du bereits erlebt hast...aber dafür ist ja die Community als Ersatz da 😉 Hoffentlich finden wir eine Lösung und ggf. kann einer unserer Programmierer hier etwas dazu sagen, wie z. B. @r8r.

Page Builder Apps als Ersatz?

Apropos, der RTE wird wahrscheinlich bald ausdienen denn in dieser Fassung bietet er derzeit keine tolle UX an. Ein neuer könnte ähnlich aussehen wie die Editors unserer Page Builder Apps, wie z. B. die von @PageFly-Victor oder Shogun. Hast du die schon ausprobiert? Mit diesen kannst du viel professioneller-aussehende Content Pages erstellen mit einem Wow-Faktor. Der RTE bietet das derzeit nicht an (ausser man hat fortgeschrittene HTML Kenntnisse).

Wie das Theme funktioniert

Es scheint das Problem was du veranschaulichst ist eine Eigenartigkeit deines Themes (Brooklyn?) Wenn du ein anderes Theme, wie Debut, in deiner Bibliothek hinzufügst und dann die Seite da betrachtest, wird alles wahrscheinlich normal in der Ausrichtung aussehen, stimmt's? Ich sehe auch viel Markup im HTML dieses Texts und der Bilder. Wurde das "As is" von woanders in den WYSIWYG RTE Editor reinkopiert?

Du könntest 1) versuchen den Text und die Bilder ohne Copy & Paste einzubauen mit so wenig Markup wie möglich, als "Barebone" HTML sozusagen. Oder den ganzen Markup herausnehmen. Aber garantiert ist es immer noch nicht ob das klappen wird.

Oder 2) die Bilder in der Ausrichtung ändern:

DIY im Code

Folgendes ist ein Tipp den ich von unserem PageFly Kollegen "geborgt" habe um das Einrücken oder Ausrücken der Bilder abzuschalten. Du kannst es somit DIY (do-it-yourself) im Code probieren, aber immer zuerst in einer Themekopie. 

• Themes => code bearbeiten => asset => theme.scss.liquid

Füge ganz unten den folgenden Code Snippet hinzu und speichere das und prüfe ob das dann geht:

.rte--indented-images img:not([style]), 
.rte--indented-images img[style="float: none;"] {
    max-width: 100%!important;
    margin: 0!important;
}

[Gabe · Accepted solution]

Hey @AmorisMUNDI 

Danke für die URL und das sieht nicht besonders gut aus, da hast du recht! Leider werden Anpassungen des RTE Editor von unserem Core Support Team nicht unterstützt, wie du bereits erlebt hast...aber dafür ist ja die Community als Ersatz da 😉 Hoffentlich finden wir eine Lösung und ggf. kann einer unserer Programmierer hier etwas dazu sagen, wie z. B. @r8r.

Page Builder Apps als Ersatz?

Apropos, der RTE wird wahrscheinlich bald ausdienen denn in dieser Fassung bietet er derzeit keine tolle UX an. Ein neuer könnte ähnlich aussehen wie die Editors unserer Page Builder Apps, wie z. B. die von @PageFly-Victor oder Shogun. Hast du die schon ausprobiert? Mit diesen kannst du viel professioneller-aussehende Content Pages erstellen mit einem Wow-Faktor. Der RTE bietet das derzeit nicht an (ausser man hat fortgeschrittene HTML Kenntnisse).

Wie das Theme funktioniert

Es scheint das Problem was du veranschaulichst ist eine Eigenartigkeit deines Themes (Brooklyn?) Wenn du ein anderes Theme, wie Debut, in deiner Bibliothek hinzufügst und dann die Seite da betrachtest, wird alles wahrscheinlich normal in der Ausrichtung aussehen, stimmt's? Ich sehe auch viel Markup im HTML dieses Texts und der Bilder. Wurde das "As is" von woanders in den WYSIWYG RTE Editor reinkopiert?

Du könntest 1) versuchen den Text und die Bilder ohne Copy & Paste einzubauen mit so wenig Markup wie möglich, als "Barebone" HTML sozusagen. Oder den ganzen Markup herausnehmen. Aber garantiert ist es immer noch nicht ob das klappen wird.

Oder 2) die Bilder in der Ausrichtung ändern:

DIY im Code

Folgendes ist ein Tipp den ich von unserem PageFly Kollegen "geborgt" habe um das Einrücken oder Ausrücken der Bilder abzuschalten. Du kannst es somit DIY (do-it-yourself) im Code probieren, aber immer zuerst in einer Themekopie. 

• Themes => code bearbeiten => asset => theme.scss.liquid

Füge ganz unten den folgenden Code Snippet hinzu und speichere das und prüfe ob das dann geht:

.rte--indented-images img:not([style]), 
.rte--indented-images img[style="float: none;"] {
    max-width: 100%!important;
    margin: 0!important;
}

[r8r · Accepted solution]

@AmorisMUNDI – der @Gabe hat das richtig erkannt.

Im Endeffekt würd ich den gehighlighteten Code aus der timber.scss entfernen:

Hast Du hier Unterstützung beim Aufbau der Seite gehabt?

LG, Mario

[AmorisMUNDI]

Vielen Dank!

Ich habe den Code von @Gabe eingefügt und das hat funktioniert.

Unterstützung beim Aufbau hatte ich nicht wirklich, ist mein erster Shop und soweit versuche ich alles selbst aufzubauen 🙂

[Gabe]

Super freut mich @AmorisMUNDI 

Und du hast hier mit uns eine Plattform wo deine Fragen immer stellen sowie Probleme schildern kannst!

[r8r]

@AmorisMUNDI – mich wundert, dass dieser timber-Code diesen Nebeneffekt hat … eigentlich ist das eine recht gute Bibliothek … darum meine Frage 😉

Aber Gratulation!
Mario