13

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.

  • 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 Dec 22 '12 at 6:17
4

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.

| improve this answer | |
  • 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 – Justin Long Nov 28 '12 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. – Richard Frank Nov 28 '12 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. – Justin Long Nov 28 '12 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 Nov 28 '12 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.... – Eli Van Zoeren Nov 28 '12 at 17:33
3

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:

enter image description here

| improve this answer | |
  • 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. – Eli Van Zoeren Nov 28 '12 at 17:35
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 ...

| improve this answer | |
  • 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. – Eli Van Zoeren Nov 28 '12 at 17:39
3

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.

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

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.

| improve this answer | |
  • 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. – Eli Van Zoeren Nov 28 '12 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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