Has anyone figured out a good way to insert captions alongside images in a client-friendly way? This is one thing WordPress makes very easy but EE doesn't seem to have an answer for. I'm currently using Redactor on the project, but would be open to switching to another editor if I could get this working. Ideally, I would want it to output markup like this:

  <img src="..." alt="..." />
  <figcaption>This is the caption</figcaption>

The only way I can think to do this is to upload the images and captions into a separate Matrix field and then insert some kind of code into the text that would later be replaced in the template with the image/caption. Workable, but kludgy at best.

  • Did any of the answers help you? If yes, please mark the answer correct by clicking on the checkmark to the left of the answer.
    – Anna_MediaGirl
    Commented Dec 22, 2012 at 6:17

5 Answers 5


The 'kludgy' technique you describe is exactly what we use on several major publishing websites.

It's good to abstract your content images from the actual Wysiwyg field - it gives you much finer grained control and the ability to present images in different formats (slideshow for example). Our content teams love it.

Then you use an {image_1} token to place your images in the wysiwyg fields. I use MX Jumper.

The approaches are summarised well here.

  • 1
    Thanks for the link Richard. I will say that my article is almost 2 years now so you would need to test the performance for each add-on to see which one is the best these days. I would also like to say that since my article DevDemon has updated ChannelImages to offer a similar functionality with their static image tag. devdemon.com/docs/channel_images/tags/images_static.html Commented Nov 28, 2012 at 7:25
  • Cool. My pet peeve with Channel Images is the pre-processing of images. Blog articles we have could have images between 1 and 8 columns wide (we use 960.gs). I don't really want 8 versions of each image generated. If they could follow a more dynamic caching route, I would use it. Commented Nov 28, 2012 at 7:34
  • That is understandable, the benefit of EE is there are so many ways to adjust the workflow to suit the content entry and display. Commented Nov 28, 2012 at 9:44
  • @richard channel images doesn't "have" to generate all those image sizes, just let it make a single or few images and use another addon (like imgsizer) to make the required size in the template, on request. (and only use the file-path from chan.img.)
    – GDmac
    Commented Nov 28, 2012 at 10:06
  • It sounds like this is still the best solution out there. I was hoping someone had come up with something simpler in the year or so since I last investigated this. Someday when I have time, maybe I'll write a Redactor plugin.... Commented Nov 28, 2012 at 17:33

I've been meaning to try Entry Widgets:


It's currently in beta though, could be a great fit for what you are trying to accomplish assuming it's far enough along at this point.

It's a tiny bit different from WP though, I think it gives you the dev and your clients more control at the end of the day for setting up the fields exactly how you want them and allowing your clients to place the widgets exactly where they want them.

The argument could be that WP makes assumptions and ExpressionEngine does not in the case of figure and figcaption (I realize WP is making a decent assumption here for figure/figcaption though, just thought I'd mention it FWIW.)

Check out the screenshot:

enter image description here

  • Yeah, I've been keeping an eye on that too, but have so far been scared off by his "not production ready" disclaimer. It does look useful though, especially for sidebars, which might be the one other thing that WP does better than EE. Commented Nov 28, 2012 at 17:35

I would use jQuery to apply the caption using something similar to the code below:

<script type="text/javascript">
  $('#content img').each(function(index) {
    $this = $(this).wrap('<div class="img-caption" />');
    $('<p class="caption">' + $this.attr("alt") + '</p>').insertAfter($this);

This way the client doesn't have to do anything other than fill in the alt field in the WYSIWYG editor. If using Expresso you could ask the client to apply an extra class to images requiring captions.


If you want an EE solution, I would use a Matrix field for the content - for example each row in the matrix field would represent a paragraph of content on the page with the ability to have an image and caption if required:

Paragraph copy Image Caption Image alignment (left, right, Center)

The last 3 Matrix fields would be optional so if an image was unavailable a paragraph would be displayed as normal.

A couple of options for you ...

  • I've considered your first option - actually my old boss even wrote a jQuery plugin to do a fancier version of this - but I always come back to that annoying jump as the page reflows itself after load. I wonder how hard it would be to do the same thing in an EE plugin using regular expressions... It would at least let me use the WYSIWYG's native image insertion. Commented Nov 28, 2012 at 17:39

This can be done with any CKEditor-based WYSIWIG using the templates button, but beware as support for HTML5 (specifically figcaption) is spotty.

I've personally worked around this by using a div.figcaption until CKEditor supports more tags.

  • I was going to suggest the very same thing. I wonder if updating Wygwam with CKEditor 4 would fix the HTML5 issues? Commented Nov 29, 2012 at 16:20
  • I hope P&T aren't far behind on this, but who knows with Blocks in the works :)
    – dgrebb
    Commented Nov 29, 2012 at 18:13
  • @dgreeb Blocks?
    – Lea Hayes
    Commented Dec 14, 2012 at 8:09
  • Blocks is a new CMS from Pixel and Tonic
    – dgrebb
    Commented Dec 14, 2012 at 21:07

I've done this sort of thing using Matrix for the content as a whole, as avenue6 suggested, and it's worked out great for the client, abstracting the images from the RTE field while easily giving me specific image field targets to use either native image manipulations or plugins like CE Image to create and store the different sizes needed.

Each Matrix row is a "row" of content for the client to enter. One row could be one paragraph or ten, for example. The basic idea is that you would simply create a new row at each point at which an image needs to be injected into the flow of the content. SO the Matrix might include several columns, such as paragraph text, image, image position/class, image caption. Each time an image is needed, you would start a new row, completing all the relevant fields.

  • Sounds like you need to look into Krea's Content Elements add-on! Which I suppose would be another possibility, but probably overkill for what I'm doing. Commented Nov 28, 2012 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.