Review of the Image Caption Module
Warning: This post is over a year old. I don't always update old posts with new information, so some of this information may be out of date.
Up until as recent as last week, whenever I added an image into one of my Blog posts, I was manually adding the caption below each image and styling it accordingly. That was until I installed the Image Caption module.
The Image Caption module uses jQuery to dynamically add captions to images. Here is a walkthrough of the process that I followed to install and configure the module. As always, I used Drush to download and enable the module, then visited the Image Caption Settings page (admin/settings/image_caption). Here, I select which node types should be included in image captioning. In my case, I only wanted this to apply to Blog posts.
Now, all images inserted this way will have the CSS class of 'caption'.
As the Image Caption module uses the image's title tag to create the displayed caption, I enabled the custom title text for my Image field so that when I upload an image, I'm prompted to enter text for the caption.
This results in a span called
image-caption-container around the inserted image, and a caption below it called
image-caption containing the text.
All that's left is to style these classes within your CSS stylesheet.
Questions? Comments? I’m @opdavies on Twitter.
About the Author
Oliver Davies is a Full Stack Web Developer and System Administrator based in the UK. He is a Senior Software Engineer at Inviqa and a part-time freelancer specialising in Drupal, Symfony and Laravel development and Linux systems administration.