How to insert captions with images in a WYSIWYG editor

Question

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:

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

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.

Answer 1

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.

Answer 2

I've been meaning to try Entry Widgets:

https://github.com/iainurquhart/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:

Answer 3

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

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

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.

OR

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

Answer 4

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.

Answer 5

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.