Page 1 of 1
TinyMCE + Images: lazy loading
Posted: Mon Jun 07, 2021 9:06 am
by frase
Code: Select all
<img src="image.jpg" alt="..." loading="lazy">
Das ist im Moment nur händisch im Quelltext machbar und auch nur, wenn man in der Init-Datei ergänzt:
Code: Select all
extended_valid_elements : "...|loading=lazy]"
Wunsch:
Eine (standardmäßig angehakte) Option beim Bild Einfügen:
tinymce-lazyloading.png
Wäre das machbar?
Re: TinyMCE + Images: lazy loading
Posted: Sat Sep 03, 2022 12:00 pm
by Caravaner
frase wrote: ↑Mon Jun 07, 2021 9:06 am
Wunsch:
Eine (standardmäßig angehakte) Option beim Bild Einfügen
Ich bin ebenfalls auf der Suche nach einer Lösung und habe im Web folgenden Ansatz gefunden:
Wenn man in der aktiven init-Datei folgende Zeile einträgt (tinyMCE5):
Code: Select all
"extended_valid_elements": "img[class|src|border|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|loading=lazy]",
Dann steht nachher im Quelltext z. B.:
Code: Select all
<img src="./userfiles/images/cookie.png" alt="" width="48" height="48" loading="lazy">
Es gibt dann zwar keine Checkbox, aber immerhin steht loading="lazy" immer da. Auf Wunsch muß man das dann halt händisch löschen.
Für mich ergibt sich dann jedoch ein neues Problem:
Ursprünglich steht in der init-Datei dieser Eintrag:
Code: Select all
"extended_valid_elements": "span[*]",
Meine Tests haben ergeben, dass bei mehrfachem Eintrag (wie es ja auch logisch ist) immer nur der letzte Wert von "extended_valid_elements" wirksam wird.
Wie muß diese Zeile folglich aussehen, damit beide Definitionen wirksam werden?
Re: TinyMCE + Images: lazy loading
Posted: Sat Sep 03, 2022 12:12 pm
by frase
Caravaner wrote: ↑Sat Sep 03, 2022 12:00 pm
Wie muß diese Zeile folglich aussehen, damit beide Definitionen wirksam werden?
Ungetestet - und ich bin mir nicht ganz sicher.
Aber normalerweise werden solch Dinge nur mit Komma getrennt. Also:
Code: Select all
"extended_valid_elements": "span[*],img[loading=lazy]",
Re: TinyMCE + Images: lazy loading
Posted: Sat Sep 03, 2022 12:19 pm
by Caravaner
frase wrote: ↑Sat Sep 03, 2022 12:12 pm
Ungetestet - und ich bin mir nicht ganz sicher.
Aber normalerweise werden solch Dinge nur mit Komma getrennt. Also:
Code: Select all
"extended_valid_elements": "span[*],img[loading=lazy]",
Du scheinst recht zu haben. Ich hatte bisher immer ein Blank nach dem Komma eingefügt (ordentlich muss alles sein
),
das hat aber nicht funktioniert. Deine Lösung gibt zumindest keine Fehlermeldung aus!!!
Wie teste ich jetzt, das "span[*]" auch funktioniert (keinen Schimmer, was das tun soll)?
Re: TinyMCE + Images: lazy loading
Posted: Sat Sep 03, 2022 12:28 pm
by frase
Caravaner wrote: ↑Sat Sep 03, 2022 12:19 pm
Wie teste ich jetzt, das "span[*]" auch funktioniert (keinen Schimmer, was das tun soll)?
Das "span[*]" hatten wir (glaube ich) eingeführt, um FA-Icons setzen zu können.
Beispiel:
Ohne diese Angabe hat der Tiny leere Spans <span></span> einfach gekillt.
Re: TinyMCE + Images: lazy loading
Posted: Sat Sep 03, 2022 12:35 pm
by Caravaner
Caravaner wrote: ↑Sat Sep 03, 2022 12:19 pm
Wie teste ich jetzt, das "span[*]" auch funktioniert (keinen Schimmer, was das tun soll)?
Ich hab mal gerade das ausprobiert:
Code: Select all
"extended_valid_elements": "span[*],iframe[src|loading=lazy],img[class|src.......
und siehe da, das iframe wird mit "loading='lazy'" im Tag erzeugt. Also funktioniert die Komma-separierte Aneinanderreihung ohne Leerzeichen dazwischen!
Re: TinyMCE + Images: lazy loading -> fertiges Ergebnis zum Download
Posted: Sat Sep 03, 2022 4:38 pm
by Caravaner
Ich habe jetzt mal für beide Versionen von TinyMCE die notwendigen Konfigurationsdateien fertig gemacht.
Alle weiteren Erklärungen und Angaben sowie die Downloads siehe dort:
https://lembach-cmsimple.de/?Plugins/Ti ... gurationen
Wer einen Fehler findet, wird gebeten mich zu informieren, damit ich die Dateien berichtigen kann!