Support for Captioned Images

Help / Discuss
#1

I need to have captions for my images. But I guess xwiki doesn’t support it yet.
Is there any chance of having it supported in near future?
Or is there an easy workaround?? It would save much efforts in our content organization.

Thanks in advance…

#2

Caption is supported in the XWiki Syntax, see http://platform.xwiki.org/xwiki/bin/view/Main/XWikiSyntax?syntax=2.1&section=Images (see “title” and “alt” parameters).

#3

Hi.
By caption I meant to display the text below/above/besides image.
title displays the string only on hover.
alt displays string when image can’t be loaded.

I would like to achieve something like this… http://ckeditor.com/addon/image2

#4

Ah yes sorry I misunderstood.

Indeed I see there’s an issue about this http://jira.xwiki.org/browse/XWIKI-7602
However it now seems supported in the WYSIWYG editor (CKEditor), see http://jira.xwiki.org/browse/CKEDITOR-137 and http://jira.xwiki.org/browse/CKEDITOR-139

Another solution is to use the {{box}} macro with a title (see http://extensions.xwiki.org/xwiki/bin/view/Extension/Box%20Macro)

And another simple solution is to create a wiki macro, http://platform.xwiki.org/xwiki/bin/view/DevGuide/WikiMacroTutorial (it’s quite simple)

Hope it helps

#5

FTR just tested and seems the WYSIWYG editor no longer allows captions on image by default. We must have lost the feature when we changed the image dialog. @mflorea, any idea?

#6

Seems the reason is that we disabled the captioned image feature, see comment at https://jira.xwiki.org/browse/CKEDITOR-138?focusedCommentId=93916&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-93916

So indeed we need to put this back.

Right now your best solution is probably to create a wiki macro for that. If you don’t succeed let us know and we’ll help.

#8

Another option is to use a jquery plugin such as https://captionjs.com/ which will add captions, taking the data from a data-caption attribute or from the alt text as a fallback.

#9

Thanks for the input. I would try jQuery.
But wouldn’t it be possible to have http://ckeditor.com/addon/image2 plugin for xwiki ckeditor?
It seems much handy and easy.

#10

As I mentioned, I think this is what we use already but if you check the link I gave you’ll see we disabled “captioned image” voluntarily becuase of some rendering issue: https://jira.xwiki.org/browse/CKEDITOR-138?focusedCommentId=93916&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-93916

On this issue I asked Marius for more details to see what it would take to put it back.

#11

Just created https://jira.xwiki.org/browse/XRENDERING-471 if you wish to follow on the topic.

1 Like
#12

Is there any way so that caption support will be available anytime soon? I am in much need of it.

Thanks

#13

Hi Vishal,

There are 2 ways to get this done soon:

Solution 3: you do as I suggested and use one of the numerous jquery libraries that exist. You said you would try it but didn’t report back about what you tried.

#14

Thanks for your prompt reply. I actually tried with jQuery but got few errors.
As I am no coder, I couldn’t rectify them. May be I should have asked here for help. I will do it the next moment I get time.

Thank you once again

#15

Bit late, but this jsx code does exactly same as CaptionJS (wrap the image with figure and figcaption with text from Alt):

require(['jquery'], function($) {
  $(document).ready(function($) {
  $('#xwikicontent img:not( .no-figure )').each(function() {
      if (!jQuery(this).parent().is('figure')) {
          jQuery(this).wrap($('<figure/>', {
              'class': 'image'
          }));
          var img_alt = $(this).attr('alt');
          if (img_alt) {
              $(this).after($('<figcaption/>').append(img_alt));
          }
      }
  });
});
});//require
#16

This works fine, yet we do have a problem with galleries. Any ideas?