Modify "CKEditor" image markup via hook

[Jan235 0]

Hey Folks!

I'm stuck here with a problem and getting nuts 🤓 

I'm try to modify the output of the ckeditor image with a addHookAfter function. Is this possible? I want to add some custom css classes and render an predefined srcset, so the editor don't has to take care about. The final output should look like this:
 

<img class="my-custom-class lazyload" srcset="path/to/image/image.jpg 600w, path/to/image/image.jpg 1000w, path/to/image/image.jpg 1400w" src="path/to/image/image.jpg">

But I won't use javascript for that.

Anyone who can help me?

Thanks in advance!

[elabx 761]

Mmm, I don't think this will be as straighforward, I think this is all performed in javascript:

https://github.com/processwire/processwire/blob/master/wire/modules/Inputfield/InputfieldCKEditor/plugins/pwimage/plugin.js

Maybe override the whole CKEditor module (copy the whole module to site/modules) and rewrite the line where the img tag is created, which i think is here:

https://github.com/processwire/processwire/blob/master/wire/modules/Inputfield/InputfieldCKEditor/plugins/pwimage/plugin.js#L210

 

[Robin S 6,951]

There is no hookable method especially for images inserted in a CKEditor field. But two options:

1. Use/code a textformatter module to manipulate the image tags within a field. This approach has the advantage that you don't have to mess around with your field settings to make sure the classes and attributes you want to add are allowed by ACF and HTML Purifier. There is even an existing textformatter module you can use: https://modules.processwire.com/modules/textformatter-srcset/

2. Hook the saving of pages (e.g. Pages::saveReady) and modify the markup in your CKEditor field before it is saved. The approach would be similar to the textformatter option - you parse the markup to identify the image tags (using regex or a DOM parser such as DOM) and use the src attribute to get the relevant Pageimage to create your different sizes from. The difference is that this parsing/modification is done whenever the page is saved rather whenever the field value is loaded.

Option 2 is more efficient, but I would tend to go for option 1 because it's not destructive and gives greater flexibility to make changes down the line. And maybe that existing textformatter module is just what you need.

[netcarver 2,599]

@Jan235 You could also try out the TextformatterFluidImages module that does some of what you are after (setting custom classes) and perhaps modify it to add the srcset attribute if it is going to be the same for all images in the CKEditor inputfield.

[Jan235 0]

@elabx @netcarver @Robin S - thank you all for your fast replies. This forum is so amazing, the people are pleasant and even newbies get instant help. 🙂

@Robin S - the textformatter-srcset looks perfect for my needs. I'm bewildered that I not found this while search around in the module repository, google and this forum. Whatever, I'll give it a try. Is this module ready for PW 3? every experiences with it?