How to change output markup of images added by editor

[Juergen]

Hello @ all,

I use the CKEditor and I want to change the output markup of inserted images, but I dont know where.

The standard output for unlinked images:

<img alt="Wüste" src="/site/assets/files/1471/desert.150x0-is-pid1468.jpg" height="113" width="150">

I want to change it to:

<img class="thumbnail" alt="Wüste" src="/site/assets/files/1471/desert.150x0-is-pid1468.jpg" height="113" width="150">

or for linked images:

<a title="" data-original-title="" href="/site/assets/files/1471/desert.jpg"><img alt="undefined" src="/site/assets/files/1471/desert.150x0-is-pid1468.jpg" height="113" width="150"></a>

I want to add lightbox2 attribute

<a class="thumbnail" title="" data-original-title="" data-lightbox href="/site/assets/files/1471/desert.jpg"><img alt="undefined" src="/site/assets/files/1471/desert.150x0-is-pid1468.jpg" height="113" width="150"></a>

Is it possible to change the output without php-manipulation on the template?

[Joss]

A bit of jquery to the rescue, assuming you are using jquery for things like your lightbox anyway.

For the moment, lets assume that the output of your RTE editor field is in a div with the class .post

Then you can add a class to all images within that div

$('.post img').addClass("myclass");

Likewise, you can add classes to the <a> wrapper - this is for colorbox:

$('.post img').closest("a").addClass("colorbox ").attr('rel', 'group');

Having it all inside some sort of containing div saves confusion.

[adrian]

I think this module from Martijn will do what you are looking for:

http://modules.processwire.com/modules/textformatter-image-interceptor/

[Juergen]

Hello Joss and Adrian,

Thanks for your answeres!

@Joss

I can do the same with php string replace or preg replace and this will be cacheable, so this is not the way that I want it to do.

@ Adrian

I have tried this module yesterday, but I also want to add some additional divs for CSS3 effects. This module can only add additional classes so this is also not the right solution.

I havent figured out where the markup will be produced (which file is responsible for the output). This could also be a possible solution: To change the markup where it will be produced.

Best regards Jürgen

[Joss]

Be careful of modifying anything in Wire as that will get overwritten during an update.

You could of course create a new ckeditor pwimages plugin based on the existing one and just store it in /site/modules/inputfieldckeditor/plugins

Sounds like its a lot easier to do it with jquery though and allows for lots of different variations depending on where the field is used.

[Juergen]

Finally I made it with Jquery manipulation. It is not the most elegant way but it works quite well.

[kater]

What would you suggest if images embedded with CKE come without any class?

I need to add the "data-uk-lightbox" attribute for lightbox functionality.

Some way to add an custom attribute only when using the "link to larger" option would be great.

I can't add classes/attributes to article images by default (interceptor or jquery) since other things like Sponsorlogos will be linked.

(for now i've altered the wire/modules/Inputfield/InputfieldCKEditor/plugins/pwimage/plugin.js)

thanks.

[kixe]

Since I am visiting the forum quite unregularly, here a late solution: TextformatterImageTags module by Diogo with class option added.