What's the best way to add an image caption in CMSMS 2.+?

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
twwitt
Forum Members
Forum Members
Posts: 149
Joined: Thu Aug 28, 2008 7:45 pm
Location: Minneapolis, MN

What's the best way to add an image caption in CMSMS 2.+?

Post 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.
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: What's the best way to add an image caption in CMSMS 2.+

Post by calguy1000 »

tinymce (the underlying javascript editor) does not have good support for the figure/figcaption element.
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
twwitt
Forum Members
Forum Members
Posts: 149
Joined: Thu Aug 28, 2008 7:45 pm
Location: Minneapolis, MN

Re: What's the best way to add an image caption in CMSMS 2.+

Post 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.
User avatar
paulbaker
Dev Team Member
Dev Team Member
Posts: 1465
Joined: Sat Apr 18, 2009 10:09 pm
Location: Maidenhead, UK
Contact:

Re: What's the best way to add an image caption in CMSMS 2.+

Post 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.
To copy System Information to the forum:
https://docs.cmsmadesimple.org/troubles ... nformation

CMS Made Simple Geekmoots attended:
Nottingham, UK 2012 | Ghent, Belgium 2015 | Leicester, UK 2016
scooper
Forum Members
Forum Members
Posts: 242
Joined: Fri Dec 09, 2005 12:36 pm
Location: Marlow, UK

Re: What's the best way to add an image caption in CMSMS 2.+

Post 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
Locked

Return to “Layout and Design (CSS & HTML)”