Loading="lazy" im WYSIWYG

Shopware 6 (German)
1

Moin,

wir würden gerne im WYSIWYG, z.B. auf den Herstellerseiten den Bildern loading=„lazy“ einbauen in den img-Tag.
Der Editor kickt das aber immer wieder raus.

Chatty schlägt vor

// src/Resources/app/administration/src/init/extend-text-editor.js
const { Component } = Shopware;
const Quill      = Component.get('sw-text-editor').quill;
const Parchment  = Quill.import('parchment');

// eigenes Attribut registrieren
const LazyAttr = new Parchment.Attributor.Attribute(
  'loading',
  'loading',
  { scope: Parchment.Scope.INLINE, whitelist: ['lazy', 'eager', 'auto'] }
);

Quill.register(LazyAttr, true);

UND

shopware:
  html_sanitizer:
    sets:
      - name: basic
        tags: ["img"]
        attributes:
          - src           # Bildquelle
          - alt           # Alternativtext
          - style         # Inline‑CSS
          - loading       # native Lazy‑Loading
          - width         # native Abmessungen
          - height
          - srcset        # responsive Quellen
          - sizes         # Media‑Query‑Mapping
          - title         # Tooltip
        options:
          - { key: HTML.Trusted, value: true }
          - { key: CSS.Trusted,  value: true }

      - name: style      # Shopware‑internes Set
        tags: ["img"]
        attributes: *attributes   # alle obigen wiederverwenden

Eigentlich will ich aber da nicht drin rumpfuschen…
Wieso kann ich denn nicht einfach so loading=„lazy“ einfügen.
Das grenzt doch an einen Bug.

Jemand eine gute Idee?

Viele Grüße

Mirko

2

Falls du die Anleitung noch nicht kennen solltest, was aber unwahrscheinlich ist – dennoch:

Im Ausschlussverfahren mal die anderen Attribute testen, ob diese tun. Die Regel von wenig nach mehr aufbauen, bis du hoffentlich das Ergebnis hast.

3

Und bitte voten und kommentieren: Lazy loading – Have an idea? Share it!

1 „Gefällt mir“
4

Irgendwo gibt es ein Discussion Dokument dazu, wieso sich explizit gegen lazy loading an diversen Stellen entschieden wurde.

Es bringt echt nichts, Vorschläge zu machen, die gegen ausführlich diskutierte und begründete Entscheidungen sind.

5

Der Vorschlag ist schon älter. Warum steht denn dahinter kein abgelehnt?

6

Meine Frage ist eigentlich, warum der Shopware Text-Editor das rauskickt.
Da müsste man das wahrscheinlich machen wie oben beschrieben:
extend-text-editor.js

Loading lazy geht ja auch bei den normalen Produktbildern auf der Kategorie-Seite.

7

Siehe Antwort von @Max_Shop

@Benjamin_Hummel ist es der Sanitizer oder gibt’s hier einen anderen Grund dass dies verhindert wird?

8

Der Docs‑Artikel zeigt nur den server‑seitigen YAML‑Workaround (ohne loading).
Damit bleibt dein Attribut zwar in der Datenbank, verschwindet aber im Admin weiterhin, weil Quill es client‑seitig rausfiltert.

Behaupte ich einfach mal.
Jedenfalls funktioniert das nicht.

9

Ich habe mich noch nie mit dem Texteditor beschäftigt. Meinem Verständnis nach sollte er sich an die Einstellungen vom Sanitizer halten. Wenn nicht, dann wäre das natürlich ungünstig und würde auch in der Dokumentation fehlen.