TinyMCE + Images: lazy loading

Third Party Plugins to CMSimple - how to install, use and create plugins

Moderator: Tata

Post Reply
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

TinyMCE + Images: lazy loading

Post by frase » Mon Jun 07, 2021 9:06 am

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?
You do not have the required permissions to view the files attached to this post.

Caravaner
Posts: 112
Joined: Sat Oct 05, 2019 5:20 pm
Location: Wadgassen (Saarland)
Contact:

Re: TinyMCE + Images: lazy loading

Post by Caravaner » Sat Sep 03, 2022 12:00 pm

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?
Ich bin > 69 und lerne fast jeden Tag was Neues. Dafür vergesse ich was Anderes.
Der Trick ist, sich nicht darüber aufzuregen und morgen zu lernen, was man vorgestern vergessen hat. ;)
https://lembach-cmsimple.de

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: TinyMCE + Images: lazy loading

Post by frase » Sat Sep 03, 2022 12:12 pm

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]",

Caravaner
Posts: 112
Joined: Sat Oct 05, 2019 5:20 pm
Location: Wadgassen (Saarland)
Contact:

Re: TinyMCE + Images: lazy loading

Post by Caravaner » Sat Sep 03, 2022 12:19 pm

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 :D ),
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)?
Ich bin > 69 und lerne fast jeden Tag was Neues. Dafür vergesse ich was Anderes.
Der Trick ist, sich nicht darüber aufzuregen und morgen zu lernen, was man vorgestern vergessen hat. ;)
https://lembach-cmsimple.de

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: TinyMCE + Images: lazy loading

Post by frase » Sat Sep 03, 2022 12:28 pm

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:

Code: Select all

<span class="fa fa-bars"></span>
Ohne diese Angabe hat der Tiny leere Spans <span></span> einfach gekillt.

Caravaner
Posts: 112
Joined: Sat Oct 05, 2019 5:20 pm
Location: Wadgassen (Saarland)
Contact:

Re: TinyMCE + Images: lazy loading

Post by Caravaner » Sat Sep 03, 2022 12:35 pm

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!
:D :D :D
Ich bin > 69 und lerne fast jeden Tag was Neues. Dafür vergesse ich was Anderes.
Der Trick ist, sich nicht darüber aufzuregen und morgen zu lernen, was man vorgestern vergessen hat. ;)
https://lembach-cmsimple.de

Caravaner
Posts: 112
Joined: Sat Oct 05, 2019 5:20 pm
Location: Wadgassen (Saarland)
Contact:

Re: TinyMCE + Images: lazy loading -> fertiges Ergebnis zum Download

Post by Caravaner » Sat Sep 03, 2022 4:38 pm

:)
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!
Ich bin > 69 und lerne fast jeden Tag was Neues. Dafür vergesse ich was Anderes.
Der Trick ist, sich nicht darüber aufzuregen und morgen zu lernen, was man vorgestern vergessen hat. ;)
https://lembach-cmsimple.de

Post Reply