Kategoriebild in Kategoriebanner anpassen - Theme Dawn

[Mariopolis]

Hallo,

meine Kategoriebilder sind alle quadratisch, daher lassen sie sich nicht in das Kategoriebanner integrieren:

In der main-collection-banner.liquid wird wohl das Erscheinungsbild gerendert.

    {%- if section.settings.show_collection_image and collection.image -%}
      <div class="collection-hero__image-container media gradient">
        <img
          srcset="
            {%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
            {%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
            {%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}
            {%- if collection.image.width >= 750 -%}{{ collection.image | image_url: width: 750 }} 750w,{%- endif -%}
            {%- if collection.image.width >= 1070 -%}{{ collection.image | image_url: width: 1070 }} 1070w,{%- endif -%}
            {%- if collection.image.width >= 1500 -%}{{ collection.image | image_url: width: 1500 }} 1500w,{%- endif -%}
            {{ collection.image | image_url }} {{ collection.image.width }}w
          "
          src="{{ collection.image | image_url: width: 750 }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
          alt=""
          width="{{ collection.image.width }}"
          height="{{ collection.image.height }}"
        >
      </div>
    {%- endif -%}

Leider bekomme ich es nicht hin, das Bild im Verhätnis 1:1 anzuzeigen. Aber ich sehe bestimmt den Wald vor lauter Bäumen nicht. Könnte da einen sanften Hinweis gebrauchen.

Danke schon mal.

[Gabe]

Hey @Mariopolis 

Danke für die Bilder aber bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren, denn womöglich ändert sich das Bildverhältnis in deinem Beispiel oben wenn du die "responsiveness" der Seite testest, sprich, wenn du deinen Browser grosser und kleiner mit der Maus per Drag ziehst.

Wenn man die Bilder in die Theme Platzhalter 1:1 einfügen möchte dann sieht es aufgrund Responsive UI nicht immer so aus wie man es erwartet, je nach Pixelbreite des Browser Bildes. Unsere Themes sind darauf gebaut, die Bilder so optimal wie möglich anzuzeigen aber gewisse Limits wird es auch geben wenn man beispielsweise ein quadratisches Bild in einen 16:9 Bild Platzhalter platzieren möchte.

• Wie die Englische Redewendung so schön geht: You can't put a square peg into a round hole! 

Um das Bild im Verhältnis 1:1 anzuzeigen, könntest du die Liquid-Vorlage bearbeiten wie du sagst. Aktuell werden verschiedene Bildbreiten im srcset oben in deinem Code definiert, um eine reaktionsschnelle Darstellung zu ermöglichen. Um das Bild jedoch quadratisch darzustellen, muss das Bild auf die gleiche Breite und Höhe festgelegt werden.

Wenn du es selber auf deiner Kategorieseite 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 die hier 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 negative 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!

Hier wäre ein code den du ausprobieren könntest:

{%- if section.settings.show_collection_image and collection.image -%}
 <div class="collection-hero__image-container media gradient">
   <img
     src="{{ collection.image | image_url: width: 750, height: 750 }}"
     alt=""
     width="750"
     height="750"
   >
 </div>
{%- endif -%}

Die oben genannten Änderungen stellen sicher, dass das Bild eine feste Breite und Höhe von 750 Pixeln hat, was es quadratisch macht. Das srcset und die sizes-Attribute wurden entfernt, da sie nicht mehr benötigt werden, um das Bild im quadratischen Verhältnis darzustellen.

Speichere die Änderungen und überprüfe die Bilder, um sicherzustellen, dass sie jetzt im quadratischen Format angezeigt werden.

[Mariopolis]

Danke für die Antwort. Diese vermeintlich einfachste Lösung hatte ich schon ausprobiert, funktioniert aber nicht. Der an den Browser ausgelieferte HTML-Code offenbart dann auch ein 'crop', dessen Ursprung ich nicht finde.

<img src="//cdn.shopify.com/s/files/1/0755/3502/4456/collections/Kat-T-Shirts.png?crop=center&amp;height=750&amp;v=1684339802&amp;width=750" alt="" width="750" height="750">

Dafür habe ich jetzt die Funktion des Codes als stufenweise Auflösungsanpassung des Bildes zur Ladezeitoptimierung verstanden. Wie dem auch sei, der Wunschlistenpunkt ist auf der Prioritätenliste erst einmal nach hinten gerutscht.

[Gabe]

@Mariopolis 

Ärgerlich aber wie gesagt, ein befristeter Vorschaulink zu einem Beispiel wäre hilfreich.

Es scheint, dass das Bild wird zentriert beschneidet, um es in das festgelegte quadratische Format zu bringen. In diesem Fall ist es schwierig, das Bild im Verhältnis 1:1 anzuzeigen.

Wenn das quadratische Format zwingend erforderlich ist, könntest du vielleicht in der Liquid-Vorlage das gewünschte Bildverhältnis festlegen und das Bild entsprechend im Verhältnis 1:1 skalieren:

{%- if collection.image -%}
  <div class="collection-hero__image-container media gradient">
    <img
      src="{{ collection.image | image_url: width: 750, height: 750, crop: 'center' }}"
      alt=""
      width="750"
      height="750"
    >
  </div>
{%- endif -%}

Der Code verwendet den crop: 'center'-Parameter, um das Bild in der Mitte zu beschneiden und das quadratische Format beizubehalten und wird auf eine feste Breite und Höhe von 750 Pixeln skaliert.