FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.
Die Community zieht um! Ab 7. Juli ist die aktuelle Community für ca. Zwei Wochen schreibgeschützt. Du kannst die Inhalte durchsuchen, aber es können vorübergehend keine Beiträge verfasst werden. Mehr Informationen.

Bild mit Text - Bild verkleinern

Gelöst

Bild mit Text - Bild verkleinern

Anne2012
Besucher
2 0 0

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.

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff (Retired)
19233 3005 4401

Erfolg.

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:

 

<div class="rimage-outer-wrapper" style="max-width: 1200px">
  <div class="rimage-wrapper" style="padding-top:75.0%">
    <img class="rimage__image fade-in lazyautosizes lazyloaded" 
         data-widths="[180, 220, 300, 360, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" 
         data-aspectratio="1.3333333333333333" 
         data-sizes="auto" 
         alt="" 
         style="background-position: 37.6224% 51.4873%; max-width: 100%; height: auto;" 
         data-srcset=".jpg?v=1715235806 2048w" 
         sizes="326px" 
         srcset="jpg?v=1715235806" alt="" class="rimage__image" style="max-width:

 

Oder probiere einen CSS (siehe unsere Anleitung hier) wie den folgenden:

 

.rimage__image {
    max-width: 100%;
    height: auto;
}

 

Stelle sicher, dass diese CSS-Datei in deinem HTML-Dom-Tree eingebunden ist, z.B.:

 

<link rel="stylesheet" href="styles.css">

 

Füge den folgenden CSS-Code in den <head>-Bereich deines HTML-Dokuments ein:

 

<head>
    <style>
        .rimage__image {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

 

Du kannst die CSS-Eigenschaften auch direkt in das HTML-Tag des Bildes einfügen. Dies ist nicht die beste Praxis, aber es funktioniert:

 

<img class="rimage__image fade-in lazyautosizes lazyloaded" 
     data-widths="[180, 220, 300, 360, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" 
     data-aspectratio="1.3333333333333333" 
     data-sizes="auto" 
     alt="" 
     style="background-position: 37.6224% 51.4873%; max-width: 100%; height: auto;" 
     data-srcset=".jpg?v=1715235806 2048w">

 

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

3 ANTWORTEN 3

Kai
Shopify Staff
2432 556 381

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.

Kai | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Anne2012
Besucher
2 0 0

Hallo Kai, 

vielen Dank für deine Nachricht. Es geht um www.liebeleishop.de. Theme Expression.

Viele GRüße

ANne

Gabe
Shopify Staff (Retired)
19233 3005 4401

Erfolg.

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:

 

<div class="rimage-outer-wrapper" style="max-width: 1200px">
  <div class="rimage-wrapper" style="padding-top:75.0%">
    <img class="rimage__image fade-in lazyautosizes lazyloaded" 
         data-widths="[180, 220, 300, 360, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" 
         data-aspectratio="1.3333333333333333" 
         data-sizes="auto" 
         alt="" 
         style="background-position: 37.6224% 51.4873%; max-width: 100%; height: auto;" 
         data-srcset=".jpg?v=1715235806 2048w" 
         sizes="326px" 
         srcset="jpg?v=1715235806" alt="" class="rimage__image" style="max-width:

 

Oder probiere einen CSS (siehe unsere Anleitung hier) wie den folgenden:

 

.rimage__image {
    max-width: 100%;
    height: auto;
}

 

Stelle sicher, dass diese CSS-Datei in deinem HTML-Dom-Tree eingebunden ist, z.B.:

 

<link rel="stylesheet" href="styles.css">

 

Füge den folgenden CSS-Code in den <head>-Bereich deines HTML-Dokuments ein:

 

<head>
    <style>
        .rimage__image {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

 

Du kannst die CSS-Eigenschaften auch direkt in das HTML-Tag des Bildes einfügen. Dies ist nicht die beste Praxis, aber es funktioniert:

 

<img class="rimage__image fade-in lazyautosizes lazyloaded" 
     data-widths="[180, 220, 300, 360, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" 
     data-aspectratio="1.3333333333333333" 
     data-sizes="auto" 
     alt="" 
     style="background-position: 37.6224% 51.4873%; max-width: 100%; height: auto;" 
     data-srcset=".jpg?v=1715235806 2048w">

 

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog