Liebe Community,
ich möchte ein Image mit Text erstellen und das Image ist leider immer viel zu groß. Wie kann man das kleiner anzeigen lassen? Es sind 1200x1200 vorgegeben. Muss das über den CSS Code in dem Abschnitt geändert werden? Aber wie lautet der Code? Vielen Dank für eure Unterstützung.
Hi @Anne2012 ,
die von dir gewünschte Anpassung kann man mit Sicherheit über den Code des Themes herbeiführen.
Kannst du zum Testen einen Link zu deinem Shop und den Namen deines Themes teilen? Wer dein Theme entwickelt hat und unterstützt siehst du so nach.
Hallo Kai,
vielen Dank für deine Nachricht. Es geht um www.liebeleishop.de. Theme Expression.
Viele GRüße
ANne
Hey Anne! @Anne2012
Ein tolles Theme - Expression, gute Wahl!
Ich habe es jetzt auch zu meinem Testshop hinzugefügt, um den Image mit Text Abschnitt zu testen und es hat mein Test-Bild 1:1 übernommen (siehe es auch hier) :
Apropos wir haben ein Online Tool (auf Englisch) wo du deine Bilder für deren Browser Optimierung und “Transformation” Benchmarks testen kannst. Einfach im Tool die CDN URL deines Bildes eingeben (cdn.shopify.com) um zu sehen, wie das Bild für den Kundenbrowser optimiert und transformiert wird.
Das Problem mit dem Abschnitt ist, dass der Outer Wrapper (Container) eine max-width: 1200px hat und wenn dein Bild viel größer ist wird es abgeschnitten da es die Grenzen des Container sprengt.
Aber wie du gesagt hast, dein Bild wird abgeschnitten und du möchtest einen Code um das Bild korrekt darzustellen. Das wird nicht ganz einfach und das folgende ist ein Beispiel was das im Code verlangen wird. Wenn du es selber DIY programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Zuerst musst das CSS und Liquid des Abschnitts in der Developer Console finden um zu sehen welcher Code für den Abschnitt verantwortlich ist:
Um das Bild kleiner anzuzeigen, kannst du das CSS des Images direkt anpassen. Du kannst eine maximale Breite und Höhe festlegen, um sicherzustellen, dass das Bild nicht zu groß wird. Hier ist ein Beispiel, wie du das tun kannst.
Füge dem <img> Tag CSS-Eigenschaften für die maximale Breite und Höhe hinzu ähnlich wie im folgenden Beispiel:
Oder probiere einen CSS (siehe unsere Anleitung hier) wie den folgenden:
```markup
.rimage__image {
max-width: 100%;
height: auto;
}
Stelle sicher, dass diese CSS-Datei in deinem HTML-Dom-Tree eingebunden ist, z.B.:
Füge den folgenden CSS-Code in den <head>-Bereich deines HTML-Dokuments ein:
Du kannst die CSS-Eigenschaften auch direkt in das HTML-Tag des Bildes einfügen. Dies ist nicht die beste Praxis, aber es funktioniert:
Wähle die Methode, die am besten zu deinem Projekt passt. Am häufigsten wird die Verwendung eines externen oder internen Stylesheets empfohlen, da dies den Code sauberer und leichter wartbar macht.
Hoffe das hilft dir weiter - lass wissen falls nicht! 
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
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.