Implementing HTML5 Image Captions with Drupal 7

I've been pretty busy these days with a few different projects and a number of them required a user friendly way (editors not needing to know how to code) of implementing captions for images within content areas.

There's a few Drupal caption modules I tried but was just not totally happy with the markup and they did not fit all use cases. The best one I found and used for a while is jCaption, a jQuery based caption script. Ultimately, this failed as I found a distressing conflict with the Disqus module. If jCaption was enabled, it prevented the Disqus comment box from loading most of the time. I still need to get to the bottom of that and possibly file an issue but for lack of time, I decided to try some other methods.

Enter the HTML5 <figure> and <figcaption> elements. The nice thing about this combo is you don't really need to add any additional layout CSS to get the caption to be inline with the image, that was not the case with some other tools that I tried.

Drupal Implementation

The next task was to develop and create methods for a trivial Drupal implementation. I have two basic uses cases here.

  1. A standard Drupal 7 imagefield within a content page
  2. Imagefields being inserted as inline images using the Drupal Insert module

Standard Imagefield Method

For the standard imagefield, we can create a custom field template in our theme and add our HTML5 caption markup to it, job done.

<figure class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?>
    <!-- render the title tag as caption -->
    <?php if ($item['#item']['title']): ?>
    <figcaption><?php print $item['#item']['title']; ?></figcaption>
  <?php endif; ?>
</figure>

Note that we leveraged the API call to $items from the core field.tpl.php file and then used this within our own field template within our theme for a nice override. We're taking the title tag of the image which has been input in the imagefield UI and then render it as a caption. You can also do this with the alt tag as well.

For more info how to do this, see my previous blog post, "Designing a Responsive Lightbox Photo Grid Gallery for Drupal 7", link below in the Resources section.

Insert Imagefield Method

For this method to work, you'll need to get ramped up with the Drupal Insert Module. Once installed, configure which image styles you want to insert and then the key is to assign a class (in the Insert UI) to images you are inserting. I used something like "image-adaptive". Then, any image that get's inserted will have that class. You may need to adjust your input filters for this, milage may vary. In addition, be sure you check thealt and / or title tag when creating or editing that specific Image Field.

Once you have inserted an image, we can add a little jQuery to wrap the image in a &lt;figure&gt; element and then grab the title or alt tag and append it as a &lt;figcaption&gt;. So in your theme's custom scripts file or a custom module, do something like this:

(function ($) {// Do this the Drupal 7 way!
Drupal.behaviors.miscBootstrap = {
  attach:function (context, settings) {// End drupal calls.// Wrap a <figure> element around the inline image.
$('#main-container-inner img.image-adaptive').wrap("<figure></figure>");// Now grab the title from the image and append it as a <figcaption>.
$("#main-container-inner img.image-adaptive").each(function (i, ele) {
  var title = this.title;
  $(this).closest("figure").append("<figcaption>" + this.title + "</figcaption>");});}}}) (jQuery);

The comments are pretty self-explanatory, note, I'm targeting my specific content area #main-container-inner as I don't want captions added unnecessarily elsewhere. The end result from both methods above are that you get a nicely themed image with caption:

<figure>
  <img src="/myimage.jpg" title="My Image Foobar">
  <figcaption>My Image Foobar</figcaption></figure>

You can tweak the CSS for &lt;figcaption&gt; as needed in terms of font color, italics, size etc… I've been pretty happy with these methods, the next thing I'd like to do would be to add a link to the caption, sometimes that's necessary to give attribution for images used from Flickr but I think that will be a little trickier.

Tags 

  • Drupal
  • HTML5
  • Tutorial
  • PHP
  • JQuery
  • Drupal Planet

Resources 

Original Article: