Jump to content

problem with image captions in tinymce

Recommended Posts

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.
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. :huh:
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,


Share this post

Link to post
Share on other sites

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 by adrian
Added more possible issues

Share this post

Link to post
Share on other sites

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.    

Share this post

Link to post
Share on other sites

Wow great, you saved my day. :rolleyes:

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!

Share this post

Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By hellomoto
      I have a Pages field with a PageListSelectMultiple input fieldtype, and I cannot limit it through the "custom PHP code" filter in its settings. I don't want hidden pages to be selectable, because the field is supposed to be to select pages to be included in a frontend menu. How can I do this? and it would be nice to be able to use the custom php code way to filter...
      Also, I cannot install, or activate, rather, TinyMCE. It's claimed to be compatible with 2.5... I install it, and when I try to activate it, without fail, it "activates" CKEditor, which is already activated by default, and installs its files into the /site/modules/ directory. TinyMCE is still in there, just inactivated and useless, being that there's no workaround to activating modules besides from the admin (that I know of, and it should work via the admin anyway). I also tried using BatchChildEditor (supposed to work with 2.5) -- don't seem to do anything when activated. I selected some settings and nada.
      Does anybody have any idea why I might be having these problems? I got all green for all the install compatibility checks...
    • By Kae
      Hey, guys!!!
      I'm having a very big problem with Tinymce in processwire. I feel so stupid about it, but can't find the solution. Hope someone can help me.
      When I change to html and paste html tags inside a <code> tag, they get converted and disapear. How can I avoid this?
      All Iwanted was to show some code examples. I feel so noob right now '-'
      Thank you =)
    • By gRegor
      I have built a form that allows authenticated members to submit articles through a front-end form. I was under the impression that 2 newlines would automatically be converted to paragraph elements, but I'm pretty sure that's incorrect as I re-acquaint myself with this aspect of PW.**

      Then I was thinking there was a TinyMCE configuration to convert newlines to paragraphs. There is, but I'm pretty sure that applies only during entry into the textarea, not when the text data is first loaded into the TinyMCE textarea.
      First, is there a built-in PW paragraph formatting function that I'm missing/forgetting?
      If not, would the "preferred" method to achieve this be using TinyMCE on the front-end form, so newlines are converted to paragraphs before the form is submitted and the page fields are stored? If so, can someone point me to an example of using the PW API to include a TinyMCE field input?

      Or would the preferred method be to process the raw input to convert newlines to paragraphs (through another module, or custom code) before saving the page fields?

      I'm aware there is an Auto Paragraph TextFormatter module, but I believe that only applies when the data is output — not when the data is shown in backend.

      Thanks for any assistance!

      ** I have confirmed that the newlines are stored in the database, so I've confirmed they're neither being removed nor converted.
    • By landitus
      I'm having a weird issue with images in TinyMCE.
      When adding images to the images field (the default one), I add a description. Then I add the image to the body field via TinyMCE. Then save and the image has the correct alt text. So far so good... But, if I reopen the same image with the image button, the description is gone from the modal window. If I re-save, the image is displayed without the description. Looks like the image it's not retaining the original description value when editing. Is this a bug?
    • By landitus
      I was wondering if it's possible to add new formats to TinyMCE via the field's configuration. I'm trying to add a new format in the format's dropdown (the one with h2, blockquote, etc). I think it's possible natively with this setting: http://www.tinymce.com/wiki.php/Configuration:style_formats or this one: http://www.tinymce.com/wiki.php/Configuration:formats. This way, I can mark some text with the "note" format and it will render a paragraph with a class of "note", for example.
      Take a look at this example: http://www.tinymce.com/tryit/custom_formats.php
  • Create New...