Captions for Images in TinyMCE?

[Lars282]

Hey!

i was wondering what is the best way to add captions underneath images added in TinyMCE?

What I am currently doing is that a JavaScript takes the alt="..." from the image, adds divs around it and adds it after the image. This works fine only that to update the caption, you first need to update the description field, then save, then delete and reinsert image in TinyMCE.

Is there a cleaner way? Can I process the php variable containing the TinyMCE text, find the images, get the corresponding captions and then insert them, before outputting this?

Thanks,

Lars

[WillyC]

method u use with js is nice. but why u need reinsert image to change? cluck just on img then click img icon tinymce. description u edit. cluck insert. save. redo u do not need to

[Lars282]

I would like to edit the description next to the image where I can upload the image, not the one in tinymce. so for that to then change, i need to reinsert the image ...

[alan]

Lars I do the same as you (jQ adds a div, uses the alt).

I thought I'd thought of a solution but I just realized it wouldn't work :/ Sorry I can't help, a good question, I like to keep to one source for information (DRY) and solving this would be useful to me too. Will keep thinking (don't hold your breath )

[adrian]

I have hacked this module together which seems to work pretty well. It wraps the image in a div and grabs the caption from main description field within the images field. I think this is what you were looking for. This is all done with PHP, rather than JS. Probably not a very elegant approach, but I needed something quickly.

After some feedback, I would like to add some config options for formatting of the caption and whether you want the caption from the images->description field (as it currently is), or simply the one that becomes the ALT tag in the RTE textarea.

Also, the module should perhaps named as a textformatter? Any thoughts?

EDIT: I just replaced the attachment with v1.01 which now handles pages that include textareas with embedded images from other pages in the tree. One concern with this is that if an image with the same filename exists anywhere else on the site, it won't know which one to use. Not sure how to get around this yet.

EDIT: 1.02 makes sure there is appropriate content on the page to prevent warning error.

EDIT: 1.03 makes use of some code from Martijn's Image Interceptor to grab the id of the page the image is from, to deal with the potential duplicate filename issue.

Available at: https://github.com/adrianbj/ImageTextCaption

Edited September 2, 2013 by adrian

[Marty Walker]

Hi Adrian,

This is great. It'd be nice, as you say, to have this as a TextFormatter (I couldn't see it as an option anywhere), and be able to use it selectively rather than as a default site setting. I'm not sure if I'd rather use the description field at the insert stage or not. I can envisage situations where the option to choose either would be great.

Regards

Marty

[adrian]

Thanks Marty,

I think it's a reasonable start. It would be a lot simpler to just go with the description field at image insert (ie the resulting ALT tag) as this avoids all the issues of searching through the page tree looking for the image description by filename. I'll wait for a little more feedback and ideas for solutions regarding the duplicate image filename issue and then I'll start adding some config options.

[teppo]

@adrian: I must admit that your approach is unique, to say the least. I've never really seen domdocument in action, so this is quite fascinating

For a slightly different approach I've just pushed an old textformatter module I never ended up using or completely finishing (JS approach felt better after all) to GitHub: https://github.com/teppokoivula/TextformatterImageWrapper. This was intended just for wrapping images with a div element to enable more flexible styling, but also has an option for appending the description within said wrapper (which seems to be the topic of discussion here.)

It's very much a work in progress / beta / proof of concept, but should be fully functional already

[kongondo]

@Adrian,

You've been posting some really nice stuff - code and this module. Would you be able to put these stuff on Github and Gist so we can easily locate (and fork ) them and follow their development and perhaps contribute to? Many thanks.

[ryan]

Another approach is to do it with javascript. I like this method because it's just a progressive enhancement that uses the existing alt attributes (no duplication of text in the request). This is the method I used in the Foundation site profile, which takes the image "alt" attribute and expands it to a caption, like those seen on this page. Here's the JS that does it. 

[nev]

Another approach is to do it with javascript. I like this method because it's just a progressive enhancement that uses the existing alt attributes (no duplication of text in the request). This is the method I used in the Foundation site profile, which takes the image "alt" attribute and expands it to a caption, like those seen on this page. Here's the JS that does it. 

I was looking for a quick way to make captions for images in TinyMCE and that looked really simple, easy and therefore promising, but for some reason it won't work for me!  Perhaps I'm missing something obvious.  What are its dependencies?

[adrian]

Thanks for all the feedback everyone. There are a few reasons I didn't go with JS (which I have used for several years for making image captions from ALT fields).

• I wanted to use the Image description field that is with the image in the images field, rather than the one that is added when inserting the image into the RTE (and becomes the ALT tag). This is what Lars asks for in post #3 above, but more importantly, this has the advantage of keeping the ALT for its intended purpose which is to describe the contents of an image for screen-readers/search engines - eg. "clothes on a clothesline". This allows the image caption to be more relevant to the context of the image in the text. eg. "Hanging your laundry outside saves energy, money, and the environment."
   
• I also wanted to be able to define which images get the caption added. This way you can still maintain your accessibility (for screenreaders etc) by always having an ALT tag, but leave the description field blank if you don't want a caption.
   
• I wanted to restrict the the production of captions to textareas only, without relying on a container div for determining which images get processed.
   
• Doing this server-side just seems cleaner somehow

Teppo - I could just as easily have used a regex, but domdocument just seems easier to me when it comes to tasks like this.

I am still looking for a way to solve the issue of two images with the same filename somewhere on the site. Again, this only comes up if your pages are drawing content from other pages, but I do this often, so would like to solve - any ideas?

[Martijn Geerts]

If you want more control over your images trown in with WYSIWYG. And you want captions for landscape or/and portrait or both. Maybe you can take a look at TextformatterImageInterceptor. The text formatter will recognize image orientation. (also recognize image tags if tagged sets are used) If you wish, add a class for the caption div and the caption wil be created underneath the image with the classname you specified.

So basicly you have image caption control over different kind of images. There are other settings like cropping, sizing, positioning and wrapping images. Will not cover the details here. And maybe there's to much overhead ( server side ) using my module for just captions. 

about the textformatter: forum post

<blink>advertisement</blink>

[adrian]

Hi Martijn, I had seen your module, but not the new image caption option - nice work. A couple of quick questions though - does your module handle images inserted from other pages? The following snippet makes me think that it doesn't, but maybe I am missing something in your code. 

// All image fields of the page 
$imageFields = $page->fields->find("type=FieldtypeImage"); 
 

Also, it looks like it uses the description field associated with the image in the images field, rather than the one used to create the ALT tag when inserting the image in the RTE field. Is that correct? This is actually what I built my module for btw so this would be a good thing

[Martijn Geerts]

Yep, images from other pages are supported. ( But images have to be valid PW images. )

And yes you're right about the image description. (didn't even know that the description in the PW image could be different, I have never used that one from the RTE.)

// refering to to page where the image lives.
$page = wire("pages")->get($id);

To take $page as variable name can be confusing, sorry about that. (Will change it thanks for finding)

What I actualy do is filter till I have the ID of the page where the image lives. Find out what basename the image has. And then loop all imagefields on that page to till I have the image Object.)

Don't want to take over this thread, please post next thing on the interceptor post. btw updated the $page variable name (not a good name) and set an TODO for the alt text. ( tnx for finding adrian )

Edited July 30, 2013 by Martijn Geerts

[adrian]

No worries about using $page as the variable name - I just didn't look back far enough. I see the preg_match_all and the logic you have for getting the id of the page where the image is from. 

Seems to me you have a great solution in this module - thanks!

[adrian]

I just updated the module code above. I was having a blank about how to prevent the duplicate filename issues. Of course it was quite easy - just needed to grab the ID of the page that the image belongs to from the number in the path of the src attribute. Thanks to Martijn's ImageInterceptor I realized this and unashamedly stole a few lines of code from there.

I don't think I am ever going to bother posting this to the modules directory in this form. I think a few tweaks to ImageInterceptor will make it a one-stop-shop solution for formatting RTE embedded images. If you don't care about using the ALT tag for the caption, then you should probably use the module from Teppo that he mentions above.

For now, my code is still the best solution for me though, so someone might also find it useful.

[Martijn Geerts]

Nice to see: DOMDocument. When I started I though can i use this, (never seen that before then)

But after a while I settled for good old plain PHP. Don't know enough of the DOMDocument, is it fast enough, is it good compatible etc etc.

Good to see my code was helpfull, You're welcome.

[adrian]

Everything I have ever read on the subject suggests that DomDocument is much more robust than regex when parsing HTML tags. That said, in this situation, it may well be overkill. I have certainly used regex for the same thing in the past with no problems.

[Soma]

My ImageManager module also uses DOMDocument to parse.

[Martijn Geerts]

Tnx adrian & soma. DomDocument way is much cleaner! Wil take it in consideration.