Jump to content

How to change output markup of images added by editor


Juergen
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 7 months later...

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.

Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...