CMS Made Simple Forums
https://forum.cmsmadesimple.org/

What's the best way to add an image caption in CMSMS 2.+?
https://forum.cmsmadesimple.org/viewtopic.php?f=20&t=76185
Page 1 of 1

Author:  twwitt [ Fri Feb 17, 2017 9:44 pm ]
Post subject:  What's the best way to add an image caption in CMSMS 2.+?

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.

Author:  calguy1000 [ Sat Feb 18, 2017 2:54 am ]
Post subject:  Re: What's the best way to add an image caption in CMSMS 2.+

tinymce (the underlying javascript editor) does not have good support for the figure/figcaption element.

Author:  twwitt [ Sat Feb 18, 2017 11:12 pm ]
Post subject:  Re: What's the best way to add an image caption in CMSMS 2.+

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.

Author:  paulbaker [ Sun Feb 19, 2017 1:53 pm ]
Post subject:  Re: What's the best way to add an image caption in CMSMS 2.+

One option would be to use this sort of thing in your template:

Code:
<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

and use the content tags appropriately:

Code:
<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.

Author:  scooper [ Tue Feb 21, 2017 9:26 am ]
Post subject:  Re: What's the best way to add an image caption in CMSMS 2.+

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

Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/