Page 1 of 1
What's the best way to add an image caption in CMSMS 2.+?
Posted: Fri Feb 17, 2017 9:44 pm
by twwitt
How are people adding image captions -- or more accurately allow their clients to easily add image captions -- these days?
I don't see how it can be done easily in MicroTiny. In TinyMCE, there's a caption checkbox, but I've not been able to get this to behave when floating a photo to the right (either the photo doesn't float correctly, or the caption jumps away from the photo).
Is there some plugin, tag, module that everyone but me is using? Seems like a basic thing to have clients be able to do.
Re: What's the best way to add an image caption in CMSMS 2.+
Posted: Sat Feb 18, 2017 2:54 am
by calguy1000
tinymce (the underlying javascript editor) does not have good support for the figure/figcaption element.
Re: What's the best way to add an image caption in CMSMS 2.+
Posted: Sat Feb 18, 2017 11:12 pm
by twwitt
Yes, I'm finding that out. I'm wondering what other designers using CMSMS are doing to allow their clients to add captions to photos placed on pages.
Re: What's the best way to add an image caption in CMSMS 2.+
Posted: Sun Feb 19, 2017 1:53 pm
by paulbaker
One option would be to use this sort of thing in your template:
Code: Select all
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
and use the content tags appropriately:
Code: Select all
<figure>
<img src='{content_image block='image1' urlonly='true'}' alt='' />
<figcaption>{content block='caption' label='Image caption' wysiwyg='false'}</figcaption>
</figure>
and style with CSS, but the specifics depend on your requirements.
Re: What's the best way to add an image caption in CMSMS 2.+
Posted: Tue Feb 21, 2017 9:26 am
by scooper
It's not ideal, but in the past we've used javascript to pull out the title tag from an image and display it as a tooltip. I'm sure it wouldn't be too difficult to grab the title text and add it to a caption tag or div underneath an image. A couple of lines of jQuery and some fiddling with CSS.
A quick Google got me this snippet which should give you an idea
Use jQuery to display an image alt tag as a caption overlay