# Auf Kategorieseiten den Bildern ab dem 5. Bild loading="lazy" hinzufügen

**URL:** https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070
**Category:** Shopware 6 (German)
**Created:** [3. September 2024 um 13:16 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070 "2024-09-03T13:16:36Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![UX4U](https://avatars.discourse-cdn.com/v4/letter/u/5daacb/32.png) [@UX4U](https://forum.shopware.com/u/UX4U)
#### Post date: [3. September 2024 um 13:16 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070/1 "2024-09-03T13:16:36Z")

</div>

Mit welchem Twig-Befehl kann auf Kategorieseiten Bildern ab dem 5. Bild `loading="lazy"` hinzufügen?

Es handelt sich um Shopware 6.4.20.2.

---

<div class="post-metadata">

### Author: ![UX4U](https://avatars.discourse-cdn.com/v4/letter/u/5daacb/32.png) [@UX4U](https://forum.shopware.com/u/UX4U)
#### Post date: [5. September 2024 um 09:18 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070/2 "2024-09-05T09:18:14Z")

</div>

@Max_Shop weißt du den Twig-Befehl, den man dafür braucht?

---

<div class="post-metadata">

### Author: ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)
#### Post date: [5. September 2024 um 10:07 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070/3 "2024-09-05T10:07:07Z")

</div>

Wieso sollte es dafür ein Twig Befehl geben? Das ist normales HTML.

Wenn du innerhalb eines for Loop bist, kannst du mit loop.index die aktuelle Iteration abfragen und dann mit if das HTML hinzufügen.

---

<div class="post-metadata">

### Author: ![Moorleiche](https://avatars.discourse-cdn.com/v4/letter/m/6f9a4e/32.png) [@Moorleiche](https://forum.shopware.com/u/Moorleiche)
#### Post date: [5. September 2024 um 10:14 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070/4 "2024-09-05T10:14:55Z")

</div>

loading=„lazy“ hat probleme mit Safari/iOS, es gibt aber bereits eine Lösung.

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/e/8/e8bd455003335eaa4bf9ee8a13dbd6e0d50dec7e.png)

Würde diesen Ansatz probieren: {% set load = (loop.index \< 5) %}

Dieses Template extenden: Resources/views/storefront/component/product/listing.html.twig

```auto

                                        {% block element_product_listing_box %}

{% set load = (loop.index < 5) %}

                                            {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
                                                layout: boxLayout,
                                                displayMode: displayMode
                                            } %}
                                        {% endblock %}

```

---

<div class="post-metadata">

### Author: ![UX4U](https://avatars.discourse-cdn.com/v4/letter/u/5daacb/32.png) [@UX4U](https://forum.shopware.com/u/UX4U)
#### Post date: [5. September 2024 um 11:49 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070/5 "2024-09-05T11:49:37Z")

</div>

@Max_Shop das ist schon klar, dass `loading="lazy"` normales HTML ist. Aber in HTML kann ich nicht schreiben: `Füge ab dem 5. Bild "XXX" ein`.

Welchen Code sollte man deiner Meinung nach nehmen?

---

<div class="post-metadata">

### Author: ![UX4U](https://avatars.discourse-cdn.com/v4/letter/u/5daacb/32.png) [@UX4U](https://forum.shopware.com/u/UX4U)
#### Post date: [5. September 2024 um 12:10 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070/6 "2024-09-05T12:10:53Z")

</div>

@Moorleiche vielen Dank.

Welche Probleme hat Safari mit `lazy="loading" und wie sieht die Lösung aus`?

Wenn ich Resources/views/storefront/component/product/listing.html.twig so extende, werden auf der Kategorieseite nur die ersten 4 Thumbnails geladen, die weiteren Thumbnails nicht mehr.

Wo genau muss ich `lazy="loading"` hinzufügen?

---

<div class="post-metadata">

### Author: ![Moorleiche](https://avatars.discourse-cdn.com/v4/letter/m/6f9a4e/32.png) [@Moorleiche](https://forum.shopware.com/u/Moorleiche)
#### Post date: [5. September 2024 um 12:17 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070/7 "2024-09-05T12:17:43Z")

</div>

> [@UX4U](#):
>
> Welche Probleme hat Safari mit `lazy="loading" und wie sieht die Lösung aus`?

Die Lösung habe ich im Bild rot markiert. Es gibt die data-Attribute, die Inhalte werden - sobald das Bild-Element im Viewport des Browsers ist - nachgeladen! Diese Lösung ist via JavaScript, weil es eben Porbleme mit loading=„lazy“ gibt.

> [@UX4U](#):
>
> Wenn ich Resources/views/storefront/component/product/listing.html.twig so extende, werden auf der Kategorieseite mehrere Thumbnails nicht geladen? Ich kann aber kein Muster erkennen. wann ein Thumbnail betroffen ist.

Das ist ein Denkanstoß, mein Beispiel behandelt eher Produkt-Listings in Kategorieseiten. Aber es gibt auch Wege innerhalb einer CMS Seite die Grafiken zu zählen und ab Grafik X l"load = false" im Thumbnail Template zu übergeben.

Ich gehe davon aus, dass Grundkenntnisse in Shopware 6 und Twig vorhanden sind, ansonsten müsstest du dich damit erstmal vertraut machen. Bringt ja nichts, wenn ich dir eine fertige Lösung hier liefere und du hast keine Ahnung warum.

---

<div class="post-metadata">

### Author: ![UX4U](https://avatars.discourse-cdn.com/v4/letter/u/5daacb/32.png) [@UX4U](https://forum.shopware.com/u/UX4U)
#### Post date: [5. September 2024 um 12:26 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070/8 "2024-09-05T12:26:21Z")

</div>

@Moorleiche ich habe meinen Post gerade angepasst, als du schon beim Schreiben warst.

Ich suche eine Lösung für Kategorieseiten.

Kenntnisse in Shopware 6 und Grundkenntnisse in Twig sind vorhanden.

Kannst du dir bitte meinen Post nochmal ansehen, weil mit dem Code-Beispiel stimmt etwas nicht?

Wenn nicht zwei if-Abfragen wären, wäre es einfach `loading="lazy"` an der richtigen Stelle hinzuzufügen.

---

<div class="post-metadata">

### Author: ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)
#### Post date: [5. September 2024 um 13:46 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070/9 "2024-09-05T13:46:47Z")

</div>

Wie Moori es geschrieben hat, mit loop.index in der if.

Ansonsten würde ich eher auf JavaScript setzen und lazy zu eager wandeln, wenn die Bilder in der Nähe der View sind.

---

<div class="post-metadata">

### Author: ![UX4U](https://avatars.discourse-cdn.com/v4/letter/u/5daacb/32.png) [@UX4U](https://forum.shopware.com/u/UX4U)
#### Post date: [6. September 2024 um 12:29 UTC](https://forum.shopware.com/t/auf-kategorieseiten-den-bildern-ab-dem-5-bild-loading-lazy-hinzufuegen/105070/10 "2024-09-06T12:29:03Z")

</div>

Danke @Max_Shop und @Moorleiche, vor allem für den Hinweis auf `loop.index`.

Ich habe /storefront/Resources/views/storefront/component/product/listing.html.twig in den ursprünglichen Zustand versetzt und /storefront/Resources/views/storefront/utilities/thumbnail.html.twig so extended:

```auto
{% block thumbnail_utility_img %}
    <img {% if load %}src="{{ media|sw_encode_media_url }}" {% else %}data-src="{{ media|sw_encode_media_url }}" {% endif %}
        
    {% if loop.index > 4 %} loading="lazy" {% endif %}
        
        {% if media.thumbnails|length > 0 %}
            {% if load %}srcset="{{ srcsetValue }}" {% else %}data-srcset="{{ srcsetValue }}" {% endif %}
            {% if sizes['default'] %}
            sizes="{{ sizes['default'] }}"
            {% elseif sizes|length > 0 %}
            sizes="{{ sizesValue }}"
            {% endif %}
        {% endif %}
        {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
    />
{% endblock %}

```

Damit klappt es.

Ist `loop.index` so richtig eingebunden?

Passt es eurer Meinung nach so oder sollte ich noch etwas ändern?