Größe des Featur-Bildes auf Webansicht und Handyansicht unterschiedlich darstellen DAWN Theme

Hallo zusammen,

schon einmal vielen Dank für eure Unterstützung!

Beim Dawn Theme ist es so, dass ich die Größe (“Höhe des Feature Bildes”) des Feature-Bildes eines Blog Beitrages auf: “An Bild anpassen” , “Klein” ,“Mittel” und “Groß” stellen kann.

Ein perfektes Bild für die Handyansicht “An Bild anpassen” bringt leider ein völlig überdimensionales Bild in der Webansicht mit sich und umgekehrt… eine individuelle Einstellung ist nicht möglich.

Gibt es hierfür eine Lösung im Code?

Vielen herzlichen Dank :slightly_smiling_face:

Hey @vagabund

Danke für die Fragen aber wenn du hier einen befristeten Vorschaulink oder Link zu einem Beispiel postest, kann ich dir einen angepassten CSS Code dafür geben.

Hier aber eine generelle Anleitung wie du den neuen CSS Editor dafür verwenden kannst:

Um die Größe des Feature-Bildes in deinem Dawn Theme für Web- und Handyansichten unterschiedlich anzupassen, kannst du spezifische CSS-Media-Queries verwenden. Diese erlauben es dir, Stile basierend auf der Bildschirmgröße des Geräts anzupassen. Hier sind zwei Ansätze, die du verfolgen kannst:

Ansatz 1: Verwendung von Media Queries

Du kannst CSS-Media-Queries nutzen, um die Höhe und Breite des Bildes auf Mobilgeräten und Desktops unterschiedlich zu setzen. Ein Beispiel dafür könnte so aussehen:

/* Standardgröße für Desktop */
.banner__media.animate--zoom-in>img {
   height: auto; /* oder eine spezifische Höhe für Desktop */
}

/* Anpassung für Mobilgeräte */
@media only screen and (max-width: 989px) {
   .banner__media.animate--zoom-in>img:not(.zoom):not(.deferred-media__poster-button) {
       position: absolute !important;
       height: -webkit-fill-available !important;
       height: -moz-available !important;
   }
}

Dieser Code passt die Größe des Bildes an, sodass es auf Mobilgeräten anders dargestellt wird als auf dem Desktop​

Ansatz 2: Unterschiedliche Bilder für Mobile und Desktop

Eine andere Lösung ist die Verwendung von unterschiedlichen Bildern für Mobil- und Desktopansichten. Du könntest spezifische CSS-Klassen oder IDs verwenden, um dies zu steuern:

@media only screen and (min-width: 750px) {
   .desktop-image {
       display: block;
   }
   .mobile-image {
       display: none;
   }
}

@media only screen and (max-width: 749px) {
   .desktop-image {
       display: none;
   }
   .mobile-image {
       display: block;
   }
}

Hier würdest du zwei <img> Tags mit den Klassen .mobile-image und .desktop-image verwenden und entsprechend anzeigen oder verstecken, je nach Bildschirmgröße​.

Beide Methoden ermöglichen eine feinere Kontrolle darüber, wie Bilder auf verschiedenen Geräten dargestellt werden, ohne dass du dafür die Funktionen des Themes selbst anpassen musst.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


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.

Hi Gabe, vielen Dank für deine Antwort. Hier ein Beispiel, bei dem das Bild des Blogbeitrages auf der Webansicht viel zu groß ist, auf der Handyansicht dagegen perfekt: https://syjk8krhjdcpv4xp-80584343879.shopifypreview.com/blogs/persoenlichkeitsentwicklung/staerken-und-schwaechen-in-der-persoenlichkeitsentwicklung

Mir wäre es lieber, das über die Darstellung zu lösen, sodass ich nicht immer zwei unterschiedliche Bilder hochladen muss.

Tausend Dank! :slightly_smiling_face:

@vagabund

Danke für den Link und an erster Stelle kannst mit einem super Tool mit dem CSS Code rumspielen bis du die richtige Dimensionen deiner Bilder erreicht hast. Siehe wie hier abgebildet:

Ich erkläre wie du diesen Tool - die Chrome Developer Console - verwenden kannst in meinem Blog Artikel hier.

Um das Bild auf der Webansicht anzupassen und zu verhindern, dass es überdimensional groß erscheint, während es auf der Mobilansicht perfekt aussieht, kannst du CSS-Media-Queries verwenden. Diese erlauben dir, unterschiedliche Stile basierend auf der Bildschirmgröße anzuwenden. Hier ein Beispiel, wie du deinen Code anpassen könntest (lese bitte unsere Anleitung dazu hier) :

/* CSS für die Desktop-Ansicht */
@media only screen and (min-width: 1025px) {
    .article-template__hero-adapt {
        height: auto; /* oder eine feste Höhe, die auf dem Desktop gut aussieht */
        padding-bottom: 25%; /* passt das Verhältnis von Höhe zu Breite an */
    }
}

/* CSS für die Mobilansicht */
@media only screen and (max-width: 1024px) {
    .article-template__hero-adapt {
        padding-bottom: 100%; /* behält das Verhältnis bei, sodass das Bild vollständig angezeigt wird */
    }
}

In diesem Code stellst du mit der ersten Regel ein, dass auf Desktop-Geräten das Verhältnis von Bildhöhe zu Bildbreite z.B. 25% beträgt (oder was auch immer für deine Zwecke passend erscheint). Die zweite Regel sorgt dafür, dass auf Mobilgeräten das Bild im Verhältnis 1:1 angezeigt wird, was bedeutet, dass die Höhe gleich der Breite ist (das ist besonders nützlich, wenn das Bild quadratisch ist).

Füge diesen Code in deine CSS-Datei ein, und achte darauf, die Klassennamen und die Breitenangaben entsprechend deinem Theme und deinen Bedürfnissen anzupassen. Für das Öffnen der Produktbeschreibung beim Laden der Seite sorgt bereits das open Attribut im details Tag, wie du es in deinem HTML hast:


Stelle sicher, dass das open Attribut bei dem entsprechenden details-Element vorhanden ist, das standardmäßig geöffnet sein soll.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

Hi Gabe, vielen Dank!

Ich habe den Code unter dem Abschnitt Blog-Beitrag im Benutzerdefiniertem CSS eingefügt, aber es hat sich nichts verändert:

Diesen code:

/* CSS für die Desktop-Ansicht */
@media only screen and (min-width: 500px) {
.article-template__hero-adapt {
height: 500px; /* oder eine feste Höhe, die auf dem Desktop gut aussieht */
padding-bottom: 25%; /* passt das Verhältnis von Höhe zu Breite an */
}
} /* CSS für die Mobilansicht */
@media only screen and (max-width: 1024px) {
.article-template__hero-adapt {
padding-bottom: 100%; /* behält das Verhältnis bei, sodass das Bild vollständig angezeigt wird */
}
}

Den unteren Abschnitt deiner Antwort habe ich leider nicht verstanden. Klassennamen, Breiteangaben und was du beim Öffnen der Produktbeschreibung meinst sagt mir leider nichts, könntest du das noch einmal näher erläutern, indem du mir genau sagst in welchem Abschnitt/datei ich im Code (z.B. “theme.liquid” oder in diesem Fall eventuell in “blog.json” oder “article.json”?) ich an welcher Stelle welchen code einfügen muss? Über das benutzerdefinierte CSS hat es bereits ein anderes mal (beim anpassen für eine sticky announcement bar) nicht geklappt.

Gerne stelle ich dir auch weiteren code oder was du benötigst zur Verfügung, falls das hilft.

Tausend Dank!

Hey @vagabund

Kannst du stattdessen das Parent-Benutzerdefiniertes CSS Kästchen ausprobieren:

Anonsten ganz unten im base.css. Stelle sicher, dass deine Media Queries korrekt sind. Die min-width und max-width Werte sollten die Breite definieren, bei der bestimmte Stile angewendet werden. Prüfe, ob die Klassen korrekt sind. .article-template__hero-adapt muss exakt der Klasse im HTML-Element entsprechen. Es könnte nötig sein, !important zu deinen CSS-Anweisungen hinzuzufügen, um sicherzustellen, dass sie Vorrang haben:

/* CSS für die Desktop-Ansicht */
@media only screen and (min-width: 1025px) {
  .article-template__hero-adapt {
    height: 500px !important; /* Festgelegte Höhe mit Vorrang */
    padding-bottom: 25% !important; /* Verhältnis von Höhe zu Breite mit Vorrang */
  }
}

/* CSS für die Mobilansicht */
@media only screen and (max-width: 1024px) {
  .article-template__hero-adapt {
    padding-bottom: 100% !important; /* Vollständige Höhe mit Vorrang */
  }
}

Wenn du !important verwendest, wird die entsprechende CSS-Regel Vorrang vor anderen CSS-Regeln haben, die möglicherweise für dasselbe Element gelten, sofern sie nicht auch !important verwenden und nach dieser Regel im Stylesheet stehen. Allerdings sollte !important sparsam eingesetzt werden, da es die CSS-Wartung erschweren und zu unerwarteten Problemen führen kann. Es ist in der Regel besser, nach Wegen zu suchen, die Spezifität deiner Selektoren zu erhöhen, statt !important zu verwenden.

Und noch ein schönes W-Ende! :wink: