Processpageeditimageselect Needs More Configurable Options

[hdesigns]

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?

[Nico Knoll]

You could make an own module hooking into the core module. This own would lay in your /site/modules/ folder.

[Martijn Geerts]

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');

[hdesigns]

Really good suggestions, thanks guys!

I like that out-of-the-box-thinking that exists in this forum.

[Pete]

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

[Martijn Geerts]

A time ago I responded to a similar question with a variant from this code. Teppo perfected the answer. So credits go to Teppo.

[hdesigns]

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!

[Nico Knoll]

It's Martijns solution I guess