Image Captions Missing from Plone 5

Hello,

We have found that since 5.x was released, image captions are no longer available within TinyMCE. We have many sites that rely or use image captions heavily. With that said, we've suspended upgrades on all sites to Plone 5 until a solution is found or this is fixed. The only solution that I've seen is using Diazo to inject a subject line, etc, and styling it to look like a caption. This seems like a very convoluted hack to something so trivial, but in some cases required.

Any ideas of how to fix this without a hack? Or is there plans to put that feature back?

thanks in advance.

I can't answer to your question but I have some of my own :slight_smile:

I never used Plone 4, I have only a VM with a Plone 4.3.15 for reference. I looked a bit at 4.3.15 vs 5.1 and I don't see where 5.1 is lacking.

The only problem I see with 5.1 is that with 4.3 the title you were setting was becoming the uploaded file name while with 5.1 the default item name is the uploaded file name.
If say I upload gatsby.png and I give it the title 'my_gatsby', the image in tinymce has a caption of 'my_gatsby' (the bubble displayed when hovering the image), but the created item in my /images Plone directory has for name 'gatsby.png'.

If it is your problem then I understand.

However, this has nothing to do with tinyMce itself, it is a problem with file uploading. That's why I am not sure of your exact beef with Plone 5.

So could you be more clear ? and do you have an issue on github ?

Thank you for the reply. In Plone 4x versions, we had the option within TinyMCE to caption or not caption an image on a page via a checkbox. If checked, we were able to add custom captioning text to the image we were inserting into the page. In Plone 5x, this option is no longer available. So, if you want a caption on an image on the page, you had to come up with a workaround.

The workaround I found, was some bizarre use of Diazo to inject the title or description, for example, into html block that was wrapped on an image. This is fine if you always want an image to be captioned, but not so much if you don't. Of course you could create a custom tag within TinyMCE that you can apply to an image, but this seems like a lot to ask editors to do.

My understanding is that for some reason, it was decided not to use the built in Image handling framework of TinyMCE, and Plone is using its own internal mechanism, thus omitting the caption feature. No?

Since I'm using the bizarre Diazo workaround, I thought I'd add that the caption is only displayed if you put some caption text in the alt field in TinyMCE, so you do have some limited control over it.

I think this has been discussed before, but is it a bug ?

claims to do this (?), but maybe only if title and description it is set for the image (itself)?

Out of curiosity. Is there a reason why the feature in TinyMCE is not used any longer?

The issue with that approach is that all of our images are required to have the Alt for accessibility reasons. So, we'd end up with captions on everything.

We struggle a bit with this because our editors aren't the most savy, even though we train and support them heavily. Adding an image and creating the caption through the TinyMCE dialogue in previous Plone versions was intuitive enough for them.

I understand your need for the Alt attribute for accessibility reasons. You do have the option of picking the Title attribute for captions, instead. The reason why I decided not to use Title is that Plone automatically populates that field with the Title of the image content item that is selected in TinyMCE, in some cases. But you can always clear that field manually. And furthermore, some people recommend never to use the Title attribute for images and links:

In fact, that is a default behavior that we should fix in Plone.

Because when the newer TinyMCE version was packaged for Plone 5, nobody bothered to include the captioning functionality.

I re-added the captioning checkbox on a branch of Plone mockup for a client a while back, but never got around to submitting it back to core: https://github.com/plone/mockup/commit/d3d11d08010a2ef5460ce63ae5b90ddf199e7f59 I'll try to do that soon, but someone else is welcome to rebase this on master and submit a pull request if they get to it before me. It would need to be adjusted to only show the checkbox when captioning is enabled.

1 Like

I tried your code on latest soft released Plone (5.1.1), got into troubles unrelated to your patch, but finally got it to run: well, it works.

However, there is a slight problem.
In Plone 4, there was a title and description and a caption checkbox.
In Plone 5, there is a title, an alt field and a caption checkbox. The title goes into Plone as, well, the field 'title'.
The alt 'field' does not, it's only a tag in the Tinymce html.

So the user after saving its work with TinyMce would have to search the image at whatever place it would be stored, edit it, add a description, save it. That's definitely not as easy as what was possible with Plone 4. Furthermore since saving the image can changes its URL the user would have to get back to the document, edit it, save it again.

To get at some parity with Plone 4, it would be necessary to add a description field to the dialog and save it into Plone when creating the image.
There is also to actually enable the captioning of course but for an experienced Plonista such as you it should be as easy as pie. Being the barbarian I am I just hacked savagely at Plone and got:

<dl class="image-inline captioned">
<dt><a rel="lightbox" href="/Plone/ftest/missfonts.png"><img src="http://ploneprod5:8083/Plone/ftest/missfonts.png/@@images/f70ef1e7-66fa-4faf-b368-414e9878cc51.png" alt="alternative text image 1" title="titleImage1" width="768" height="453"></a></dt>
 <dd class="image-caption">description for missfonts.png</dd>
</dl>

should be good enough for all but the most purists of html purists.

If I pull that branch, with the changes to the three files you mention, will it work? I would like to test!

I created some PRs to fix this problem: https://github.com/plone/mockup/pull/911

I'm trying to find the best way to say "Me Too!" here. This is a must-have feature for us.

FWIW adding @thet 's branches to my buildout sources list makes it work like a charm

All related PRs from https://github.com/plone/mockup/pull/911 are now merged. Image captioning support (automatic based on Image descriptions and manual via the TinyMCE's image dialog) should be back in the next Plone release (probably 5.2.2).

5 Likes

Working seemless with my buildout with these specific points:

extends = http://dist.plone.org/release/5.2.1/versions.cfg

[sources]
mockup = git https://github.com/plone/mockup.git
plone.staticresources = git https://github.com/plone/plone.staticresources.git
Products.CMFPlone = git https://github.com/plone/Products.CMFPlone.git
plone.outputfilters = git https://github.com/plone/plone.outputfilters.git
1 Like

how can I enable this option for version 5.1.6. I'm a noob

I do not think this was back-ported to Plone 5.1, so: best upgrade to Plone 5.2.

Is there an example of implementation of this image caption that I can reproduce? I have tried http://demo.plone.org/en/frontpage but I don't see that option.

Hello, Thanks in advance.

I have version 5.1.x, and I am trying to integrate this functionality but I have not succeeded, I think I am forgetting something and I cannot see it.
Could you tell me what were the steps you followed to achieve it.

I would really appreciate it.