Image Caption
100 comments ·
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’stitleoraltattribute - 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
divimage container - automatically adds
widthandheightattribute 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="/img/spacer.gif">
Example output:
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="/img/spacer.gif">
Example output: (float left)
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="/img/spacer.gif">
Example output: (float right)
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/spacer.gif">
Output XHTML
<div style="px;">
<img src="/img/spacer.gif">
<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
- Download and extract the “image-caption” folder
- Upload the “image-caption” folder to your WordPress plugin directory, usually “wp-content/plugins”
- 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! |
If you like this plugin, express your love by donating and sharing this plugin with your readers!
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 }
{ 82 comments… read them below or add one }
← Previous Comments
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
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
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 class="” 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
What can i do to remove captions from the_excerpt()?
Thanks
Reply
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
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
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
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
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
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
I really like this plugin so I am bummed my website doesn’t validate when the plugin is activated :-(
Any suggestions?
Reply
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:
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
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
www.tvqc.com/2010/02/une-version-israelienne-de-the-office/
Reply
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
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
Would it be possible to enter a link, at part of the
titleor thealt, so I can link and attribute the image to it’s original creator? I tried, it things break. Any advise would be swell…Reply
I can’t seem to get this working on Jackson Guitars.
Is it WP 2.84 compatible?
Reply
Hi,
I’m using the plugin on 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
Does it work with WP 2.8 ? Seems not.
Reply
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
simplepressforum.com/support-forum/skins-and-theme-problems/forum-buttons-and-layout-are-out-of-line/#p26590
Thanks!
Reply
Hi
I’m trying to get additional lines of captions to appear below my image when it appears?
How can I do this?<">