problem with image captions in tinymce

[Thomas108]

Hi everybody,

I am trying for a while now to display the alt tags as captions from images inserted via tinymce.
I read this (and a few other) threads: https://processwire.com/talk/topic/1344-captions-for-images-in-tinymce/

... and I installed Adrian's tinymce-image-caption,
but it didn't work at all for me.

Then I installed Teppo's TextformatterImageWrapper,
again no change in the frontend.

Finally I tried Ryan's approach which is also mentioned in the linked thread above.
https://github.com/ryancramerdesign/FoundationSiteProfile/blob/master/templates/scripts/main.js
and again no change in the frontend output.

The last days I felt like I fell in love with processwire, everything went very smooth, but today seems to be not my day.
I have no clue what's wrong, maybe some pw (2.4.7) or php (5.4.32) version  problem? My template is valid html5.

I just made a fiddle with ryans approach: http://jsfiddle.net/wqo4fk8o/10/
Maybe someone can have a look and point me in the right direction?

Thanks in advance,

Thomas

[adrian]

Hi Thomas,

Sorry to hear you are having a bad day

Here are some thoughts on why you might be having issues with each of those approaches.

My module - firstly this was never really finalized for general use (and hence not in the modules directory). I have made some changes to it that haven't been pushed to Github, so maybe there is something there, but I have also stopped allowing insertion of images into Texatarea fields on new sites anyways. I always hated the potential side effects and now with PageTable blocks there is a decent alternative that allows for flexibility without the problems - sorry getting OT now. It also uses the description field that is available when the image is uploaded, and not the one when inserting the image into the textarea, so is it possible that the main description field is empty?

With teppo's module, did you remember to add it as a formatter for the textarea field? Edit the field - Details tab > Textformatters

With Ryan's approach - that code was written for his Foundation profile and makes use of:

$("#bodycopy p img[alt]").each(function() {

Is your content inside an element with an ID of bodycopy?

Hope that helps a bit.

Edited September 17, 2014 by adrian
Added more possible issues

[Thomas108]

Hi Adrian,

thanks for your input.

I have a description in the images field and I also edited the settings in TextformatterImageWrapper.

And yes, I changed  #bodycopy to my .content as one can see in the fiddle.

Regarding your idea of using PageTable:
I need  a page for a musician that contains one really long text about his life, where he wants to be able to insert about 20 - 30 floating inline images with captions all over the place.

From what I have seen, I don't think that PageTable would be the best solution. And with fields and repeaters, I have to split the text in 20 or more pieces, so that I can combine it with image fields.

I also don't like too much the idea of letting users place images in tinymce, but I have no idea how to do this otherwise.
If someone has a better idea for me, please tell me.    

[adrian]

Here's a modified version of Ryan's code that works:

http://jsfiddle.net/29zwjbgs/

[Thomas108]

Wow great, you saved my day.
 

Believe it or not, some hours ago I tried to change the code with exactly the same line

$(this).after("<small>" + $img.attr('alt') + "</small>"); 

But I must have done something wrong, because the small tag appeared within the img tag. 

I will study now what you did differently. 

Thanks a lot!