Jump to content

Processpageeditimageselect Needs More Configurable Options


hdesigns
 Share

Recommended Posts

I stumbled upon a (really small) problem while I was trying something relatively simple (as I thought):

I was adding a resized image with CKEditor (same thing goes for TinyMCE) and checked the option to add a link to the full-sized version. So far so good. The next step for me was to make the full-sized version popping up if someone is clicking on the image (on the front-end of course). So I used fancybox to make this happen. But then I got stuck because as it looks like the anchor-tag has to have some css-class or id to indicate the fancybox-script that this image has to be fancyboxed.

I'm pretty sure this is also possible without any id or class. But this is not my point. My point is that it should be possible to add a class to every image that was included with the ProcessPageEditImageSelect (which is used by both CKEditor and TinyMCE to insert an image).

This module is already configurable. I suggest to add another configuration-item named somewhat link-class that would be empty by default.

But if someone, like me, wants to add a css-class to every linked image, he/she could simply set a class name...

What do you think about it? I know, it's a really small change, but maybe some people could benefit on that.

I was thinking of editing the ProcessPageEditImageSelect so it behaves like I said, but I'm feeling a bit uncomfortable hacking on core modules (problems on updates and so on)... What is your opinion on that?

Link to comment
Share on other sites

I don't fully understand why you want to have static class names attached. The lightbox is javascript, so you could solve it with jQuery for example. 

$('a[href*="/assets/files/"]:has(img)').addClass('lightbox-class');

I love code like this. Until sometime last year I wasn't aware you could be as clever as that, but now I'm doing things like this a lot with a system I'm updating where I don't want to edit hundreds of templates right now :)

  • Like 1
Link to comment
Share on other sites

I actually went now with:

jQuery('a[href*="/assets/files/"]:has(img)').fancybox();

because I didn't like the idea of altering the dom only to apply another javascript.

So in the end, it is like I wrote in my initial posting

I'm pretty sure this is also possible without any id or class.

But the different-thinking-approach led me there, great work Martijn!

I'm still thinking about adding a static class to every image inserted with CKEditor so I could identify these images and change their appearance with CSS. For this I now have Nicos solution, just perfect!

  • Like 2
Link to comment
Share on other sites

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

×
×
  • Create New...