2017-07-10 21:28:39 +00:00
<!DOCTYPE html>
< html class = "no-js" lang = "en-GB" >
< head >
< title > Review of the Image Caption Module | Oliver Davies< / title >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2017-07-21 17:44:18 +00:00
< meta property = "og:url" content = "https://www.oliverdavies.uk/blog/2010/08/20/review-image-caption-module/" >
2017-07-10 21:28:39 +00:00
< meta property = "og:title" content = "Review of the Image Caption Module" / >
2017-07-12 06:22:51 +00:00
< meta property = "og:image" content = "https://www.oliverdavies.uk/assets/images/me-precedent.jpg" / >
2017-07-10 21:28:39 +00:00
< meta property = "og:image:height" content = "327" / >
< meta property = "og:image:type" content = "image/jpg" >
< meta property = "og:image:width" content = "327" / >
2017-07-12 06:22:51 +00:00
< link rel = "stylesheet" href = "https://www.oliverdavies.uk/assets/css/main.css" >
2017-07-14 22:11:03 +00:00
2017-07-10 21:28:39 +00:00
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=57" sizes = "57x57" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=114" sizes = "114x114" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=72" sizes = "72x72" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=144" sizes = "144x144" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=60" sizes = "60x60" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=120" sizes = "120x120" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=76" sizes = "76x76" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=152" sizes = "152x152" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=160" sizes = "160x160" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=96" sizes = "96x96" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=32" sizes = "32x32" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=16" sizes = "16x16" >
< / head >
< body class = "" >
< nav class = "navbar navbar-inverse navbar-fixed-top" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#navbar" aria-expanded = "false" aria-controls = "navbar" >
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
2017-07-12 06:22:51 +00:00
< a class = "navbar-brand" href = "https://www.oliverdavies.uk/" > Oliver Davies< / a >
2017-07-10 21:28:39 +00:00
< / div >
< div id = "navbar" class = "collapse navbar-collapse" role = "navigation" >
< ul class = "nav navbar-nav" >
< li class = "" >
< a href = "/" > About< / a >
< / li >
< li class = "" >
< a href = "/experience" > Experience< / a >
< / li >
< li class = "" >
< a href = "/testimonials" > Testimonials< / a >
< / li >
< li class = "" >
< a href = "/talks" > Talks< / a >
< / li >
< li class = "active" >
< a href = "/blog" > Blog< / a >
< / li >
< li class = "" >
< a href = "/contact" > Contact< / a >
< / li >
< / ul >
< / div > < / div >
< / nav >
< div class = "container" >
< div class = "row" >
< main class = "col-md-9" >
< h1 > Review of the Image Caption Module< / h1 >
2017-07-11 17:57:51 +00:00
< p class = "posted text-light" > 20th August 2010< / p >
2017-07-10 21:28:39 +00:00
< p > 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 < a href = "http://drupal.org/project/image_caption" > Image Caption< / a > module.< / p >
< p > 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.< / p >
< p > As I use the < a href = "http://drupal.org/project/filefield" > FileField< / a > , < a href = "http://drupal.org/project/imagefield" > ImageField< / a > and < a href = "http://drupal.org/project/insert" > Insert< / a > modules to add images to my posts, as opposed to via a WYSIWYG editor, I'm able to add the CSS class of 'caption' to my images.< / p >
< p > Now, all images inserted this way will have the CSS class of 'caption'.< / p >
< p > 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.< / p >
< p > This results in a span called < code > image-caption-container< / code > around the inserted image, and a caption below it called < code > image-caption< / code > containing the text.< / p >
< p > All that's left is to style these classes within your CSS stylesheet.< / p >
< p class = "tags" >
Tags:
2017-07-12 06:22:51 +00:00
< a href = "https://www.oliverdavies.uk/blog/tags/drupal-planet" > drupal-planet< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/drupal" > drupal< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/drupal-6" > drupal-6< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/imagefield" > imagefield< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/image-caption" > image-caption< / a > < / p >
2017-07-10 21:28:39 +00:00
< div class = "post-pager is-flex" >
< div class = "is-half" >
2017-07-21 17:44:18 +00:00
< a href = "/blog/2010/08/17/create-better-photo-gallery-drupal-part-2/" >
2017-07-10 21:28:39 +00:00
« Create a Better Photo Gallery in Drupal - Part 2
< / a >
< / div >
< div class = "is-half text-right" >
2017-07-21 17:44:18 +00:00
< a href = "/blog/2010/09/26/south-wales-drupal-user-group/" >
2017-07-10 21:28:39 +00:00
The Inaugural Meetup for the South Wales Drupal User Group »
< / a >
< / div >
< / div >
< div class = "about-author" >
< h2 > About the Author< / h2 >
2017-07-12 06:24:51 +00:00
< img src = "//www.oliverdavies.uk/assets/images/me-precedent.jpg" alt = "Picture of Oliver" class = "img-circle" >
2017-07-10 21:28:39 +00:00
< p > Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a Senior Developer at < a href = "https://microserve.io" > Microserve< / a > and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.< / p >
< / div >
< / main >
< div class = "col-md-3" >
< div class = "panel badges text-center" >
2017-07-21 17:44:18 +00:00
< a href = "https://assoc.drupal.org/membership" title = "I’ class = "is-block" >
2017-07-10 21:28:39 +00:00
< img
2017-07-21 17:44:18 +00:00
src="//www.oliverdavies.uk/assets/images/badges/da-individual-member.png"
2017-07-10 21:28:39 +00:00
alt="Drupal Association Individual Member"
2017-07-21 17:44:18 +00:00
width="200"
/>
2017-07-10 21:28:39 +00:00
< / a >
2017-07-21 17:44:18 +00:00
< div class = "is-flex align-items-center" >
2017-07-10 21:28:39 +00:00
< img
2017-07-21 17:44:18 +00:00
src="//www.oliverdavies.uk/assets/images/badges/acquia-d8-developer.png"
alt="Acquia Certified Developer - Drupal 8 Exam Badge"
class="is-2"
/>
2017-07-10 21:28:39 +00:00
2017-07-21 17:44:18 +00:00
< img
src="//www.oliverdavies.uk/assets/images/badges/acquia-d8-back-end.png"
alt="Acquia Certified Back End Specialist - Drupal 8 Exam Badge"
class="is-2"
2017-07-10 21:28:39 +00:00
/>
2017-07-21 17:44:18 +00:00
< / div >
2017-07-10 21:28:39 +00:00
2017-07-21 17:44:18 +00:00
< a href = "http://conference.phpnw.org.uk/phpnw17" class = "is-block" >
2017-07-12 06:24:51 +00:00
< img src = "//www.oliverdavies.uk/assets/images/badges/phpnw17.png" alt = "" >
2017-07-10 21:28:39 +00:00
< / a >
< / div >
< div class = "availability panel panel-default" >
< div class = "panel-heading" > Availability< / div >
< div class = "panel-body" >
< p >
< i class = "fa fa-thumbs-o-up text-warning" > < / i >
Currently have limited part-time capacity
< / p >
< p >
< i class = "fa fa-thumbs-o-down text-danger" > < / i >
Currently no spare full-time capacity.
< / p >
< / div >
< / div >
< div class = "latest-posts panel panel-default" >
< div class = "latest-posts__heading panel-heading" > Latest blog posts< / div >
< ul class = "list-group" >
< li class = "post list-group-item" >
2017-07-13 21:19:23 +00:00
< span class = "post__title" >
2017-07-21 17:44:18 +00:00
< a href = "/blog/2017/07/13/publishing-sculpin-sites-with-github-pages/" >
2017-07-13 21:19:23 +00:00
Publishing Sculpin Sites with GitHub Pages
< / a >
< / span > -
< span class = "post__date" > 13th July, 2017< / span >
< / li >
< li class = "post list-group-item" >
2017-07-10 21:28:39 +00:00
< span class = "post__title" >
2017-07-21 17:44:18 +00:00
< a href = "/blog/2017/06/09/introducing-the-drupal-meetups-twitterbot/" >
2017-07-10 21:28:39 +00:00
Introducing the Drupal Meetups Twitterbot
< / a >
< / span > -
< span class = "post__date" > 9th June, 2017< / span >
< / li >
< li class = "post list-group-item" >
< span class = "post__title" >
2017-07-21 17:44:18 +00:00
< a href = "/blog/2017/05/20/turning-drupal-module-into-feature/" >
2017-07-10 21:28:39 +00:00
Turning Your Custom Drupal Module into a Feature
< / a >
< / span > -
< span class = "post__date" > 20th May, 2017< / span >
< / li >
< / ul >
< / div >
< / div >
< / div > < / div >
< footer class = "container" >
< p class = "copyright" >
© 2010-2017 Oliver Davies. Built with < a href = "https://sculpin.io" > Sculpin< / a > .
< / p >
< div class = "meetups" >
< h2 > Things that I organise< / h2 >
< ul >
< li class = "meetups--drupal-bristol" >
< a href = "http://www.drupalbristol.org.uk" title = "Drupal Bristol" >
2017-07-11 06:34:02 +00:00
< img
2017-07-12 06:24:51 +00:00
src="//www.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg"
2017-07-11 06:34:02 +00:00
alt="Drupal Bristol logo"
>
2017-07-10 21:28:39 +00:00
< / a >
< / li >
< li class = "meetups--drupalcamp-bristol" >
< a href = "http://www.drupalcampbristol.co.uk" title = "DrupalCamp Bristol" >
2017-07-11 06:34:02 +00:00
< img
2017-07-12 06:24:51 +00:00
src="//www.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png"
2017-07-11 06:34:02 +00:00
alt="DrupalCamp Bristol logo"
>
2017-07-10 21:28:39 +00:00
< / a >
< / li >
< li class = "meetups--phpsw" >
< a href = "http://phpsw.uk" title = "PHPSW" >
2017-07-11 06:34:02 +00:00
< img
2017-07-12 06:24:51 +00:00
src="//www.oliverdavies.uk/assets/images/meetups/phpsw.jpeg"
2017-07-11 06:34:02 +00:00
alt="PHPSW logo"
>
2017-07-10 21:28:39 +00:00
< / a >
< / li >
< / ul >
< / div >
< / footer >
2017-07-12 06:22:51 +00:00
< script src = "https://www.oliverdavies.uk/assets/js/site.js" > < / script >
2017-07-10 21:28:39 +00:00
< script > ( function ( i , s , o , g , r , a , m ) { i [ 'GoogleAnalyticsObject' ] = r ; i [ r ] = i [ r ] || function ( ) { ( i [ r ] . q = i [ r ] . q || [ ] ) . push ( arguments ) } , i [ r ] . l = 1 * new Date ( ) ; a = s . createElement ( o ) , m = s . getElementsByTagName ( o ) [ 0 ] ; a . async = 1 ; a . src = g ; m . parentNode . insertBefore ( a , m ) } ) ( window , document , 'script' , '//www.google-analytics.com/analytics.js' , 'ga' ) ; ga ( 'create' , 'UA-11967257-1' , 'auto' ) ; ga ( 'send' , 'pageview' ) ; < / script >
< / body >
< / html >
