Image Caption

100 comments · AddThis

Latest version:
0.2
2008.05.22

Image Caption is a WordPress plugin that extracts the title (or alt) attribute from images within your blog post and generates a neat caption directly underneath those images (no Javascript required).

If you’re comfortable working with CSS, you can change the appearance of the caption and image container easily by disabling the default CSS import and control the CSS styling using MyCSS (or whichever method your prefer).

Aren’t there times when you want to add a description to your image but couldn’t find an easy way to do so? With this plugin enabled, all you need to do is add your description as the title attribute to your image and this plugin will generate an XHTML compliant image caption for you!

Features

  • generates image caption using <img> tag’s title or alt attribute
  • standards compliant: valid XHTML
  • does not rely on Javascript
  • degrades gracefully when disabled
  • supports images with links (e.g. to higher resolution of the same image)
  • supports MyCSS by disabling default CSS import
  • supports custom CSS class for div image container
  • automatically adds width and height attribute to your image
  • does not write to your WordPress database

Usage

Once activated, you can start adding caption to your image using the title or alt attribute. By default, this plugin uses title attribute to generate caption but this can be changed by modifying the $ic_att variable that can be found at the top of the php file.

The examples below assumes the default behavior of the plugin i.e. extracts title attribute and use its content to generate the caption.

Example input:

<img src="/blog/plugin/ic-demo.jpg" alt="Ai Otsuka" class="center" title="A sample caption generated by this plugin!">

Example output:

Ai Otsuka
A sample caption generated by this plugin!

You can also center the image or float the image left or right by using the “center” (see example above), “alignleft” and “alignright” class defined in the default CSS imported by this plugin.

Take note that once floated, everything will appear to the left or right of the image until a CSS clear is issued.

Example input: (float left)

<img src="/blog/plugin/ic-demo2.jpg" alt="" class="alignleft" title="CSS class: alignleft">

Example output: (float left)

CSS class: alignleft

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus faucibus malesuada lacus. Aenean elit nunc, sodales non, tempus ac, mattis vitae, ante. Pellentesque magna dui, eleifend nec, congue non, sollicitudin vitae, massa. Nunc dictum consectetuer lectus. Nulla sit amet augue. Morbi ultricies sem nec turpis. Donec fermentum, eros nec aliquam euismod, nunc purus bibendum justo, quis placerat neque odio at velit. Suspendisse potenti. Morbi placerat, dui vel pharetra suscipit, massa urna iaculis lectus, sed rutrum dui mauris eget orci. Aliquam mattis. Suspendisse at urna eu elit aliquet hendrerit. Mauris egestas dapibus lacus. Donec blandit. Nam et tellus. Aenean posuere eleifend nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla lobortis viverra nulla. Quisque fermentum, nulla in commodo malesuada, ante enim consequat tortor, quis convallis diam sapien in tortor. Fusce id mauris.

Example input: (float right)

<img src="/blog/plugin/ic-demo2.jpg" alt="" class="alignright" title="CSS class: alignright">

Example output: (float right)

CSS class: alignright

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus faucibus malesuada lacus. Aenean elit nunc, sodales non, tempus ac, mattis vitae, ante. Pellentesque magna dui, eleifend nec, congue non, sollicitudin vitae, massa. Nunc dictum consectetuer lectus. Nulla sit amet augue. Morbi ultricies sem nec turpis. Donec fermentum, eros nec aliquam euismod, nunc purus bibendum justo, quis placerat neque odio at velit. Suspendisse potenti. Morbi placerat, dui vel pharetra suscipit, massa urna iaculis lectus, sed rutrum dui mauris eget orci. Aliquam mattis. Suspendisse at urna eu elit aliquet hendrerit. Mauris egestas dapibus lacus. Donec blandit. Nam et tellus. Aenean posuere eleifend nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla lobortis viverra nulla. Quisque fermentum, nulla in commodo malesuada, ante enim consequat tortor, quis convallis diam sapien in tortor. Fusce id mauris.

Markup

The code below should give you some idea what transformation was done by this plugin to produce the image caption (assume an image with dimension 450 x 295):

Input XHTML

<img src="/img/demo.jpg" alt="" class="alignright" title="A sample caption generated by this plugin!">

Output XHTML

<div class="img alignright" style="width: 450px;">
  <img src="/img/demo.jpg" alt="" width="450" height="295">
  <div>A sample caption generated by this plugin!</div>
</div>

In case you are wondering why title attribute is used to generate the caption instead of alt, my decision to do so is mainly because alt is required by all img tags and is mainly used as a replacement text for those cases where images cannot be display (e.g. text only browser). Since we might not want to display image caption for ALL of our blog post images, it makes sense to display caption only to those images that have their title attribute defined.

Lastly, due to the dynamic nature of image caption generation, should need arises to change the XHTML markup for more semantic output, it can be done easily with a simple plugin update. Since I am no web design guru myself, I am open to suggestions for better XHTML markup and CSS styling technique.

Installation

  1. Download and extract the “image-caption” folder
  2. Upload the “image-caption” folder to your WordPress plugin directory, usually “wp-content/plugins”
  3. Activate the plugin in your WordPress admin panel

Download

Image Caption plugin 0.2 for WordPress (4kb .zip)

Please donate to support active development of this plugin, thank you!

Support

If you have any questions, suggestions, or found any bugs in this plugin, feel free to post them in your comments. I’ll try my best to answer them but there’s no guarantee, so don’t be disappointed if you do not hear back from me promptly. :/ If you find this plugin useful and feel like donating some money for my effort, please use the PayPal button above, thanks! <3

History

0.2 [2008.05.22]

  • Added: support for alt attribute
  • Added: option to disable stripping of title attribute
  • Changed: tweaked regex detection

0.1 [2008.01.29]

  • Initial release

{ 18 trackbacks }

links for 2008-01-30 : 7 seconden BELGIUM
January 30, 2008 at 12:40 am
#1 research, image caption, font increase « Pyroda’s Weblog UNITED STATES
February 18, 2008 at 9:41 am
Tekst under bildet (caption) ved bruk av "title" | WordPress | Temaer Innstikk Hacks
March 25, 2008 at 9:46 am
Iconique.net : Au sujet des plugins WordPress utilisés
March 26, 2008 at 8:49 am
How To Integrate Photos Into Your Article - Bloggeries Blog Forum UNITED STATES
April 4, 2008 at 8:31 am
30 Essential and Advanced Wordpress Plugins | Speckyboy - Wordpress and Design
May 19, 2008 at 3:05 am
Wordpress 2.6. An improvement all around. | The Tech Mind
July 17, 2008 at 12:35 am
Indi in the Wired » Once Again, Testing New Toys
July 21, 2008 at 7:57 pm
Bukunya warix » Mengenal Themes, Plugins, Widgets dan Code di Wordpress
July 31, 2008 at 1:08 pm
WebMagasinet » Blogging » Test NORWAY
October 10, 2008 at 12:53 am
» plugins pe blogu.lu Învăţ online
November 13, 2008 at 4:14 pm
Cyberdigital webmaster & Tech Blog » Blog Archive » 30 Essential and Advanced Wordpress Plugins
December 18, 2009 at 7:32 pm
30 Essential and Advanced Wordpress Plugins | Cyberdigital Webmaster & Tech blog
December 19, 2009 at 10:17 pm
WordPress-Caption / Bildunterzeilen mit LiveWriter » WordPress, Caption, Plugin, Möglichkeit, Backend, Blog » QuerBlog.de GERMANY
July 4, 2010 at 9:02 am
A Little More About Drawing Board | Drawing Board NETHERLANDS
August 29, 2010 at 4:48 pm
MultiMarkdown now generates captions — johnlaudun.org
April 9, 2011 at 7:29 am
Image Plugins for WordPress | WPbase
December 7, 2011 at 5:23 am
WordPress Plugin - modernjatt.com | modernjatt.com
February 12, 2012 at 2:35 am

{ 82 comments… read them below or add one }

max AUSTRALIA November 11, 2012 at 7:37 pm

This plugin no longer works with the latest Wordpress and thousands of my photos are now without any captions. Please update this plugin so that it continues to work. I have no idea how to get the captions back on hundred of photos from years of using this plugin.

Reply

sunny UNITED STATES May 9, 2012 at 12:11 am

I feel there’s got to be a simple answer to my question.
IMage caption only seems to “grab” the caption info from the id off of the jpg
for example name of file is: tree_fun.jpg
caption ends up reading tree_fun even though I have identified it differently in the WP title area in the media library.
Help!
(otherwise love it)

Reply

Jade February 28, 2012 at 3:54 pm

I’m trying to see if I can use this to go with a thumbnail gallery but am unsure how to pull the actual caption function. Is there any way to insert the call for the title or alt tag into the title tag itself, like

<a href="” rel=”gallery” class=”fancybox” title=”">

I’m not sure what the actual function is that is grabbing the alt or title tag so unable to experiment with this. Any suggestions?

Reply

Andrea February 18, 2012 at 5:06 am

What can i do to remove captions from the_excerpt()?
Thanks

Reply

Andy Wickha, SPAIN January 24, 2012 at 11:32 am

Hi,
I am having a problem. When I activate the plugin the text stops floating around the image. This is the output html:

For some reason one of the ” is missing and I can’t figure out why this is happening. Any idea? I have the latest version of the plugin.

Reply

rebecca UNITED KINGDOM August 31, 2011 at 3:32 pm

Hiya

I have downloaded your plugin – which seems to work fine. Is there anything I can do to make the text itself move to the left. At the moment it is centralised, but i want it left aligned. How can i amend this? You mention alighnleft etc…but this is for the image..

I’m new to wordpress. Can you help? Maybe I’m missing something…

Thanks!

Reply

Jimmy UNITED STATES August 14, 2011 at 1:18 am

This might be for slightly different purposes, but if you want to add captions permanently to an image, try out imgflip.com/memegen. It’s pretty sweet, only takes like 5 seconds

Reply

hiren June 23, 2011 at 9:16 am

Hello
great useful plugin,
but is there any option to image caption only show in post , not on page..
if any solution please help…

Thank You!

Reply

Ann Brundige February 9, 2011 at 5:24 pm

I previously asked if Image Caption was compatible with Wordpress v. 3. I never got a reply, but went ahead with the upgrade. Now I have v. 3.0.5 and Image Caption is still working without any problems. I have changed the font and made the caption background the same as my page, otherwise leaving the code as downloaded. It’s still the Image Caption version from 2008.

Reply

Ann Brundige June 17, 2010 at 7:13 pm

Do you know if Image Caption is compatible with Word Press 3.0, or perhaps with 2.9? I’m about to try to upgrade, but I would hate to lose all my captions. I don’t see any recent posts, but I hope you are still keeping this plug-in alive. I like it a lot!

Reply

Munki February 27, 2010 at 6:18 pm

I really like this plugin so I am bummed my website doesn’t validate when the plugin is activated :-(

Any suggestions?

Reply

Nick UNITED STATES February 24, 2010 at 8:44 pm

Nice plugin. But I cannot use it for my client anymore because their host show fsockopen errors related to the Snoopy class. They will not allow the Snoopy class for some sort of security reason. Is there any workaround? Here is the error:

Warning: fsockopen(): unable to connect to [domain.com]:80 in /var/www2/[domain.com]/htdocs/blog/wp-includes/class-snoopy.php on line 1142

The blog was originally at a sub directory /blog but it was moved (I think with a symlink since one of the files were actually moved on the ftp server) to a subdomain of blog.domain.com. and it does a 301 recirect, but image paths still work. I can’t say this problem started when they made the switch. It was too long ago.

Reply

Jeff-TVQC CANADA February 21, 2010 at 7:16 pm

nice plugin, but i have some issue align the text with the images.
as you can see here the text is a little bit on the left and not aligned with the image
http://www.tvqc.com/2010/02/une-version-israelienne-de-the-office/

Reply

Stav GERMANY December 20, 2009 at 3:43 pm

Nice little plugin. Works great. I am only declaring the image height in my posts so I did have to make one small modification to the image_caption.php file in the ic_add() function. I added the empty check for height:

if (empty($param['width']) and empty($param['height'])) {

I also modified the ic_format() function to add a width-inheriting style so that the caption doesn’t expand, but instead wraps:

{$caption}

Reply

David Collantes September 11, 2009 at 9:34 am

Would it be possible to enter a link, at part of the title or the alt, so I can link and attribute the image to it’s original creator? I tried, it things break. Any advise would be swell…

Reply

Charvel Jackson UNITED STATES August 22, 2009 at 2:48 am

I can’t seem to get this working on Jackson Guitars.

Is it WP 2.84 compatible?

Reply

Barbara UNITED STATES August 10, 2009 at 3:46 pm

Hi,

I’m using the plugin on http://www.directoryofdigitalphotography.com/blog

Everything is working fine except that if there are (2) paragraphs floating around the image, the paragraph spacing is removed.

I’m working around this, but would like to use your plugin on some other sites – but I need to figure out how to not have it strip and next to the images.

Thanks,
barbara

Reply

Li-An FRANCE June 10, 2009 at 3:12 pm

Does it work with WP 2.8 ? Seems not.

Reply

Wisam UNITED STATES May 25, 2009 at 6:31 pm

Hi and thanks for the nice plug-in! I customized the css and things looks so cool on my website. However, I am having a problem with one of the plug-ins called Simple Press Forums for WordPress. I’ve been working with the folks there on the forums for a solution and some css hacks but I thought you might be offer better help with the image-caption plug-in to help fix some remaining problem. I started a thread on the forum
http://simplepressforum.com/support-forum/skins-and-theme-problems/forum-buttons-and-layout-are-out-of-line/#p26590

Thanks!

Reply

Dermot February 25, 2009 at 12:53 pm

Hi

I’m trying to get additional lines of captions to appear below my image when it appears?

How can I do this?

Example on these pages:

http://murphymachinart.com/robert-pratt-mcmachan

I would like the caption below the image to have five lines:

Maria Rengane 2007
Hand embroidery
114 x 120 cm / 44? x 47¼ ins
Signed
Price

Is this possible?

Reply

Chantal CANADA February 4, 2009 at 12:09 pm

Hello,
Thanks for this great plugin. I read the comments and saw that you are thinking of adding link support within caption. I’m very interested in that feature and I was wondering when you think it would be available?
Chantal

Reply

Vin AUSTRALIA January 4, 2009 at 1:56 am

I am trying a work around to get a separate line of texts overlayed on the image so that I can give credit to the photogrpaher and link to the license.

It works nicely if I don’t use a title tag but as soon as I add the title tag the credit text gets shoved to the left of the image and is no longer overlaid on the image.

Of course I need to use the title tag to get image-caption plugin to create the caption as normal.

So I thought someone might be able to help me tweak the css to get it working.

Here is the html:

Photo by: Joe Schmo License

And here is the CSS I created for the img-cap style:

p.img-cap {
margin-top:-1.5em;
font-size: .75em;
font-style:italic;
text-align:right;
padding:2px 0 0;
}

Reply

Andrew UNITED STATES November 6, 2008 at 11:16 pm

This is awesome – and I love that you can do this – however, when I use the Plug-in (Currently deactivated on my site reallybadparentingadvice.com) it over-rides the nice frames I have surrounding my images. Is there any way to have both the captions AND the frames I currently have? Or is it pretty much one or the other?

Reply

Ron UNITED STATES October 16, 2008 at 6:34 am

Nice plugin for captions. The only thing missing is the ability to make links in the captions.

Reply

Mogens Høegsberg October 9, 2008 at 5:41 pm

I’m having the same problem Thiefhunter reported earlier, but only in Firefox and Firefox-based browsers (Flock, for instance): when I use the plugin, the blank line between the paragraph where there’s an image and the next paragraph disappears.

I’d much appreciate any or all tips on how to fix this, since the plugin is otherwise awesome. However, if I don’t find a way to fix this, I can’t use it at all…

Reply

Shane UNITED STATES September 23, 2008 at 8:32 pm

Hi – thank you for the plug-in. I have one question. When I use the_excerpt(), if the photo is at the top of the post then the caption is used as the first line of the excerpt. Any idea on how to fix this?

I tried to look through the 7 pages of previous posts, but no matter which page number I click or even if I click Show All – only the latest 3 posts appear, so I am unable to see if this question was previously asked.

Thanks!

Reply

Andrea February 18, 2012 at 5:05 am

Hi Shane, did you fix this? I have the same problem.
Thanks

Reply

Ann Brundige UNITED STATES August 1, 2008 at 9:03 pm

Great Plug-in!
I made a few changes in the CSS to make the caption blend more with my blog’s style. I changed the font family and color, making the color match the link and category headings. I also removed the border and background color, so the caption just floats on the background. It looks great! Thanks for writing this–it’s a life-saver!

Reply

Dgold UNITED STATES July 26, 2008 at 6:58 am

Does anyone know if this plugin works on images In The Comments?

Or, how can I make this work on images posted in a comment? I want the caption to show up when anyone posts an image with ALT text, there too.

Thanks!

Plugin’s great!

Reply

Li-An FRANCE July 22, 2008 at 7:42 am

Hello,
I’ve just discovered your plugin and I wanted to know if I had to put your CSS informations (from ic.css) into my style.css file ? Because for the test I made, I don’t have your nice “yellow box”.

I’m using Flexible Upload for my images and I got this code in my posts.

Reply

Derek Ralston UNITED STATES July 17, 2008 at 1:53 am

Found a fix for the issue with blockquotes overlapping the images:
Add this to your alignleft and alignright css code:
position:relative;z-index:10;

Reply

thiefhunter UNITED STATES July 9, 2008 at 1:40 pm

Thanks so so much for replying, Klaus.

But no, I think you didn’t notice. Look at how squishy, or close together the lines are in the first paragraph (starts with “A family visit…”

as compared to the next paragraph (starts with “The tv news…”

The leading (line-spacing) of the second para is correct, with space between the lines. If you want, I can disable the plugin so you can compare… Somehow, the plugin must be messing with the page’s css. Or something else?

Reply

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>