Make Caption Under Images in WordPress
Making caption under images is a major pain in WordPress (I am running 2.1.2 currently).
I have devised a way to ease the pain. If you want to do the same, here are the 4 easy steps:
1. Find header.php file of your theme. Usually it’s here:
/myBlogDir/wp-content/themes/myTheme/header.php
2. Find where </head> is in header.php and add the following code right BEFORE it:
<script type="text/javascript">
/* addImgCaption() for WordPress */
/* written by: Brett Chang of evercloud.com */
var IMAGE_TRACKER = new Array();
function addImgCaption(myImgElem)
{
var myParent = myImgElem.parentNode;
var myParentParent = myImgElem.parentNode.parentNode;
var myWrapperTable = null;
var myNodeForAppend = myImgElem; function createTable(myImgElem, myNodeForAppend)
{
var eTable = document.createElement("table");
var eTbody = document.createElement("tbody");
var eTr = document.createElement("tr");
var eTd = document.createElement("td");
var eBr = document.createElement("br");
var eCaption = document.createTextNode (myImgElem.getAttribute('alt'));
//stylin'!
eTd.style.textAlign="center";
eTd.style.whiteSpace="nowrap";
eTd.style.width=myImgElem.getAttribute("width")+"px";
eTable.style.display="inline";
eTable.style.padding="0px";
eTable.style.borderCollapse="collapse";
//create the table structure
eTd.appendChild(myNodeForAppend);
eTd.appendChild(eBr);
eTd.appendChild(eCaption);
eTr.appendChild(eTd);
eTbody.appendChild(eTr);
eTable.appendChild(eTbody);
return eTable;
}
if(null == IMAGE_TRACKER[myImgElem.getAttribute('src')])
{
if(myParent.nodeName == 'A'){
myNodeForAppend = myParent;
myWrapperTable = createTable(myImgElem, myNodeForAppend);
myParentParent.appendChild(myWrapperTable);
}
else
{
myWrapperTable = createTable(myImgElem, myNodeForAppend);
myParent.appendChild(myWrapperTable);
}
IMAGE_TRACKER[myImgElem.getAttribute('src')] = '1';
}
} </script>
3. Go compose your blog entry with the photos, in VISUAL or CODE mode.
If in Visual Mode: You MUST provide an image description.
If in Code Mode: You MUST provide a description within ALT attribute of the IMG tag.
4. When you are done, go into CODE mode of the editor and find your image. It usually willl look like this:
<img src=”http://www.evercloud.com/photos/….” title=”My Photography….”
alt=”Cool Photo” border=”1″ height=”133″ width=”200″ />
You are going to add an additional attribute to that img tag:
onload=”javascript:addImgCaption(this);”
The final version should look like this:
<img src=”http://www.evercloud.com/photos/….”
onload=”javascript:addImgCaption(this);” title=”My Photography….”
alt=”Cool Photo” border=”1″ height=”133″ width=”200″ />
VOILA!
You have to do the same for every single photo or image you have.
Check out an example.
Now, here’s the technical mumbo jumbo — so basically the gist behind this script is that I am creating a table surrounding the image at run time through DOM. The description and the image itself are separated by an <BR/> tag. And after the table is constructed, I would append it to the parent of the original IMG element. Now, the reason I chose TABLE over DIV is because, div is a major pain in the ass to deal with. You have to do more calculations as you need to clear the floats. TABLE, in this case, will not break easily and holds up quite well.
However, the caveat is that your images can’t have very long descriptions or else they might run out of the container. You can try taking out the whiteSpace:nowrap declaration within the script. By doing so, you will also run into problems where say you have two images next to each other, and one of them has extremely long wrapped description. In that case, the table containing the image with long description will be taller than the one next to it. Now, I am sure it’s possible to improve the script, but this is a good starting point.
*UPDATE. I had to bloat the script a bit so that it adds a global variable to see if you already create an table for the image. I will try to clean up the code later so it’s more object oriented.
April 27th, 2007 at 6:41 pm
Hey Brett, I hope you don’t mind, but I used your code as a basis for a WordPress plugin for easier implementation within WordPress. Check it out here - http://www.shiftthis.net/wordpress-image-captions-plugin/
I give you full credit for your Javascript, though I have made some alterations and switched it to use a div as I guess I must be one of those so-called div-nazis.
If you’d like to alter this plugin for yourself so that it uses tables or anything else, feel free to alter it and rerelease it on your own. I thought it was useful and wanted to share. Thanks!
April 29th, 2007 at 2:02 am
I have tried your scripting for the image caption just like you said, but I get nothing. I am running 2.0.10. Could that be a problem since you said that you have 2.1 from above? Thanks in advance for your help.
Justin
May 3rd, 2007 at 10:42 am
Marcus: sure no problem. Go right ahead. I haven’t tried out your script, but I guess you solved the problem with div where if you have an extremely long image title, it doesn’t wrap the title? Or the problem where if you have 2 or 3 photos next to each other, you would need to clear the float?
Regarding divs in general — I would still use divs mostly, but not to the extreme. When it’s more sensible to use table tags, I would still use table tags.
Blog4Brains, can you send me an URL where you are applying this script? I would like to check it out.
May 14th, 2007 at 7:15 pm
Hey Brett and Marcus,
thanks for that nice piece, that is quite exactly what I was looking for. But - it doesn´t work on http://11webmaster.net/homeblog/next07/. Got an idea why? I used both (now it´s the plugin from Marcus), the onload-command is correct. But there is no caption under the image.
Thanks for everything you might explain,
best regards
David
June 1st, 2007 at 8:22 pm
David, I suspect your problem (I took a while to figure this out myself) is that, by default, the plug-in requires the .js file to be in the wp-content/plugins directory, not in a subdirectory of it. Edit the plug-in, and you can change this easily. (There’s even a comment saying “CONFIGURE st-image-caption.js directory” just above the relevant line.)
June 7th, 2007 at 12:52 am
hides all my images for some reason. Doesn’t work
June 7th, 2007 at 6:02 am
OK. It doesn’t work with the plugin I’m already using , which is ImageManager. If I deactivate Image Manager, and post the image using standard WP UI, then it works ok, once I add the alt property.
This is not good to me, since I need to use the Image Manager to add in other styles, ec… Can anyone make this work with Image Manager? Thanks in advance.
June 9th, 2007 at 9:26 pm
This works great except it breaks the plugin Enlarger. Any work arounds for this? Your plugin causes an image tagged with Enlarger to disappear, but the size of the original image is in the post.
http://www.yellowswordfish.com/my-wordpress-plugin-library/enlarger-wordpress-plugin/
June 10th, 2007 at 9:23 pm
Yes, this is exactly what happens to my images as well. All my images disappear. That’s why I said, it hides all my images. Even though the code is still there. REally weird. Anyways, I use ImageManager, for using it in the thumbnail with popup mode. So this put the thumbnail img as well as the link to the actual image for popup. That is where the problem is. If I use the actual image directly, then it works.
Anyways, hope some can help, otherwise, this will be useless for me. I would love to use it, since I can’t find any other captions creator that works with ImageManager. Thanks in advance.
June 14th, 2007 at 6:39 pm
hi thx for the plugin
is there a way to put some break row or something similar in the title alt tag ?
June 30th, 2007 at 1:16 pm
This is exactly what I expected to find out after reading the title Make Caption Under Images in WordPress. Thanks for informative article
July 11th, 2007 at 4:26 am
Correction, the caption to the non-linked image appeared to the left, not the right. Click my name to get to the site.
September 3rd, 2007 at 12:08 am
I am just getting started with a wordpress 2.2.2 blog. I take lots of photos and would like to caption them so I added your javascript to my theme’s header file as instructed. Two things I notice:
1. the caption is to the right of the picture instead of below
2. using align “left” and “right” doesn’t seem to work as a way to word wrap around the picture like it did before I added your captioning script.
Do you have any advice on how I can get the caption below the photo and how to still do wordwrap around a photo?
My first blog entry is here with the captions to the right and now word wrap:
http://www.sharani.org/2007/09/02/wickford-and-jamestown/
September 3rd, 2007 at 12:33 am
Me again. I opened up the post in the Safari Browser instead of Firefox and it displays the caption underneath although it still does not word wrap. I’m guessing that having it do both might be asking for too much? I wonder why in firefox it displays differently?