Using Captions With The Attached Image
Ok so a few people have asked me if it would be possible to add captions into my plugin The Attached Image. The answer, probably yes, however it’s a little outside it’s scope & it can’t do everything people ask for or it will turn into a bloated plugin that uses massive amounts of memory. So instead I’ve come up with a simple tutorial on how to do it manually. Yes it’s harder, but unfortunately it’s the only viable way to do it without bloating TAI.
Over on the right is what the captions could look like if you want to make them look nearly indistinguishable from the ones WordPress normally makes. I do give the CSS & HTML to do that further down however I’m not a master of CSS so sorry if there are any mistakes.
Anyway here we go. Basically we are going to use WordPress’ custom fields to add a caption. CSS styling isn’t my best point so I’ll leave that to you. Here is the code you need to add The Attached Image, plus a caption:
|
1 2 3 4 |
the_attached_image('img_size=thumb'); if($caption = get_post_meta($post->ID, 'imageCaption', true)) : echo $caption; endif; |
If you have the options set for The Attached Image in the admin you won’t need anything in the quotes, just leave 'img_size=thumb' out & it will work fine. Finally add your text in the value field & imageCaption in the key field and hit update. That’s it done, you can even include HTML. 🙂
Put together with some HTML your code could look like this:
|
1 2 3 4 5 6 7 8 |
<div class="image_caption"> <?php the_attached_image(); if($caption = get_post_meta($post->ID, 'imageCaption', true)) : ?> <small><?php echo $caption; ?></small> <?php endif; ?> </div> <div style="clear:both;"></div> |
With some basic CSS that tries to imitate WordPress’ normal caption system:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
div.image_caption { background: #eee; margin: 5px; padding: 5px; float:right; } div.image_caption img { display:block; } div.image_caption small { display:block; text-align: center; } |
I hope that helps anyone looking to add a caption system along with my plugin The Attached Image. Let me know if you run in to any problems & I’ll help as much as I can. 🙂
