you're reading:
Captions, Html & inline css codes, Images

Changing the formatting of image captions

http://wpbtips.wordpress.com/

Users sometimes ask if and how you can change the formatting of the caption in a captioned image.
The answer is you cannot, if you confine yourself to the initial result you’ll get in the Visual or the HTML editor, because what you get when you insert a captioned image is a shortcode: a pre-configured formula you cannot alter (highlighting the caption and trying to change it via any of the editor tools will only mess the image up on your actual blog post, and then the only thing you can do is delete the image and re-insert it).
But you can change their formatting, if you replace that shortcode with the actual sourcecode of the image.

When you insert a captioned image, its shortcode in the HTML editor will look like this:

[caption id="attachment_etc etc etc etc[/caption]

Visit the actual blog post, select View Source in the View menu of your browser, locate and copy the image code.[***] It will look like this:

<div id="attachment_etc etc etc etc<p class="wp-caption-text">CAPTION HERE</p></div>

If you paste this into the HTML editor in place of the original shortcode, it will give you the exact same result. But now you can modify the caption by adding style properties and values to the p tag that encloses the caption. Example:

Default caption

Rembrandt: philosopher in meditation

Modified caption (bold, larger, colored, slightly higher)

Rembrandt: philosopher in meditation


Code of this particular modified version:

<div id="attachment_etc etc etc etc<p style="font-size:120%;font-weight:bold;color:#87421F;padding:2px 0 7px;" class="wp-caption-text">Rembrandt: philosopher in meditation</p></div>

For various style properties and values, see my posts on formatting text etc.

If you buy the Custom Design upgrade and have experience in CSS editing, then of course you can change the formatting of captions once for all.

[***] Update: See the post Image captions with no dash in Twenty Eleven for an alternative method you can use directly instead of having to publish then dig into the sourcecode then go back and edit.

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

31 thoughts on “Changing the formatting of image captions

  1. What alchemy is this!

    Perfect picture for this post.
    An almost Escher-esque vision of the original stairway to heaven.

    (~~~at the least, it’s a very nice new trick~~~)

    Posted by Tess | August 3, 2011, 22:56
  2. If it’s alchemy I should have used this:

    http://www.art-wallpaper.com/17379/Van+Ostade+Adriaen/The+alchemist?Width=1680&Height=1050

    But Rembrandt is god! (And of course Escher is the first thing that came to my mind too when I first saw this amazing painting.)

    Posted by Panos | August 3, 2011, 23:12
  3. Alchemy to make the philosophers’ stone:
    a golden trick to format captions, indeed!

    And god said Let there be light…
    Rembrandt, with his illusions of light (and shadow) could well be speaking for (of?) god

    Yes another perfect gift for us, your readers.

    Posted by Tess | August 4, 2011, 04:01
  4. But when it comes to light, my favorite painter is Vermeer.

    Posted by Panos | August 4, 2011, 09:32
  5. Vermeer. Light and life in detail enough to tell stories. Snapshots in colors. Pictures of the moments of (middle-class—wealthy?) life with its moments spoken? Yes, I think he is a kindred spirit to our friend Emily D. Not God, but expressing what life is.

    Perhaps consider using some paintings by Vermeer to explain your insights into excerpts/galleries with themes that don’t directly allow excerpts? (Or have I misunderstood again?)

    As always, best…

    t

    Posted by Tess | August 5, 2011, 05:02
  6. Right: stories (sometimes hidden), moments, life. A related feeling I have with Vermeer is that he has achieved the almost impossible in painting: to make you sense how time passes in the scene he’s depicting.

    Ok, Vermeer it is next time I’ll need images in a post! But I probably don’t need them for the new excerpt/gallery trick, as it has to do with the gallery post format, not the gallery feature, so using images would be confusing. I think I’ll make it a separate post – but not before publishing a post on post formats in general.

    Posted by Panos | August 5, 2011, 19:00
  7. Yes, I meant “snapshot” in the best way: a picture to make you want to know the story, before and after…

    Deal on Vermeer! ≥^!^≤

    I gave up on fooling around with using my gallery format/excerpt trick and decided to use Chateau for my work blog. Probably stick with it unless your solution is less work than mine… (I was hoping to have other people be guest authors so it needs to be simple simple simple; though no one has taken me up on the proposition yet.)

    I’m looking forward to your post about post formats: I used a couple of “asides” and they don’t take titles but in the recent posts widget they list a number. I meant for them not to show up there at all, but they’d be better with a title than a number. I must be missing something…

    Posted by Tess | August 5, 2011, 19:57
  8. Oh I can answer that now, as the post won’t be very detailed. Aside means no title displayed on the main page, it doesn’t mean no title entered when you create the post! (You only get a number when you try to publish a post with no title: the permalink must have a slug, so a number is automatically added in place of the words you didn’t type.) Widgets, category pages etc. display asides just like any other post.

    Chateau is nice I think: refined, a bit modern and a bit classical, good for posts with images since its color scheme is almost no color…
    And of course if others are to contribute you must forget the tricks you like but only a few can easily understand!

    Posted by Panos | August 5, 2011, 21:00
  9. OK. Thank you.

    So asides are not really what I want: I was aiming for something not possible on wp.com: a sort of post that would disappear: not be listed as a post. Sort of like Google Places for businesses, an announcement that would self-destruct after a month (or some other time period)(I know: you don’t know anything about Google Places and neither do I!)

    At this point, that blog has very few readers and mucking about with title changes (post format changes) won’t really matter much.

    Chateau is nice, uncluttered, easy to use and can show a lot of previous posts to people who don’t have lots of internet experience. We are such a small not-for-profit place, but my boss wants me to work on this even though I think other work I could do would be more useful. I’ll just go with that.

    Thank you again.

    Posted by Tess | August 5, 2011, 23:17
  10. Posts not listed as posts? I’d say assign them to a special category, create a custom menu with all the categories except this one (load it to either the header or the sidebar), and don’t use the Recent Posts widget (or if one is necessary, create a custom one in a text widget, which you’ll have to update manually of course).

    Posted by Panos | August 5, 2011, 23:29
  11. Yes, of course: cats and custom menus would work. Or even putting another announcement as a text widget in the sidebar.

    But if asides don’t have titles, then in my opinion they should not be included in recent posts.

    Yes, I do understand the structure of a blog, where each post is catalogued (2 B searched for) with some sort of title. I was hoping that “asides” would be outside of the blog structure, sort of like pages. Findable but not as normal posts.

    Sort of the opposite of what lots of folk want with writing posts on multiple pages: a page (or note) outside of the blog structure which would appear on the home page. sort of a sticky post, but not really a post and not a page in or out of a menu.

    I’d say that I don’t understand the point of the aside format for a post.

    Now I made the (aside) post on my work site about being closed for a holiday and it has turned itself into a “featured post!”

    I must be missing something here: expecting something that the aside format won’t provide. Obviously. Sorry: I am stressed out…

    Posted by Tess | August 6, 2011, 04:53
  12. “I’d say that I don’t understand the point of the aside format for a post.”

    How dare you! As explained when 2010 (the first theme supporting Asides) was launched, the inspiration for the aside format was this blog:

    http://ma.tt/

    Posted by Panos | August 6, 2011, 08:38
  13. oooh! gosh: I didn’t mean to make you angry.

    LOL. guess I talks too much for such…

    Posted by Tess | August 6, 2011, 10:04
  14. I tried using this formatting of captions in my second blog, tess expressed. The top picture, I had to adjust the margin and border of the image so that the normal caption background is colored as I like. It has text below. The second picture, with similar adjustments to the margin and border but with very small thumbnails below. Even though they are set to allignnone, they appear in a column rather than in a row below the big picture. (I think I’m missing something?)

    http://tessespressed.wordpress.com

    Posted by Tess | August 8, 2011, 04:55
  15. Yes you’re missing the obvious: align none means no wrap-around – row needs align left!

    But you’re very naughty, trying to squeeze four linking thumbnails there… That’s not the job of a poor caption, that’s the job of techniques you have already mastered.

    Posted by Panos | August 8, 2011, 05:31
  16. Bad Tessie!
    Just pressing the boundaries…

    J showed me a cartoon from the New Yorker magazine the other day:
    picture of a man standing next to his cat, standing next to the litter box.
    caption:
    “Don’t even think about going outside the boX!!”

    Posted by Tess | August 8, 2011, 06:06
  17. Well, it’s still messed up, it’s 2 a.m. and it looks better.
    poor captions should not be pushed LOL

    Posted by gracie | August 8, 2011, 08:52
  18. You know I’m not against outside the box or pressing boundaries! But I’m skeptical about captions in particular, because captioned images seem to be the most sensitive and easily disrupted object on wp.com blogs – not to mention we don’t know if the even poorer IE can cope with such tricks.

    Posted by Panos | August 8, 2011, 14:36
  19. Of course: you are always thinking of different ways to accomplish things!
    I’m the one who carries out some of them to extremes at least once, but this code is really useful for all those people asking about linking to the photographer in their captions. There have also been a lot of questions about formatting the captions: color, size, and so one…

    IE, who knows?

    But we still don’t know about enclosures; remember this:

    http://wpbtips.wordpress.com/2009/04/26/images-the-three-link-options/#comment-59

    (her photos don’t show up anymore, but the code is still there!)

    Posted by Tess | August 8, 2011, 18:10
  20. Yes, a single link maybe, but I seriously doubt if IE can handle your extremes; as a Mac user I can’t check them in IE, so I’d stay away from twisting things so much when the same result can be accomplished via more “natural” means (div or table coding plus bg color).

    Enclosure? Still no idea. My guess is the post where you saw it was created in an extraneous application.

    Posted by Panos | August 9, 2011, 02:13
  21. Agree.
    It’s a little puzzle to play with. That blog has very few readers, you and at most a dozen others? Maybe not even you or my friend who works with me. A little amusement for myself. I did even try out some of the flash widgets there! Mostly I like plain things.

    IE and enclosures will remain a mystery for now…

    Thanks again.

    Posted by Tess | August 9, 2011, 03:58
  22. This post solved my problem, so thanks.

    P.S: Sorry that this comment, with its lack of art history allusions, now sticks out like a sore thumb.

    Posted by Bianca Pencz | November 24, 2011, 09:50
  23. You’re welcome. As for your PS, my blog is on technical tips and advice, so actually it’s the first comments above that stick out, not yours. (But Tess and I are friends, and we occasionally digress.)

    By the way, I’m planning to update the post and provide a code model for you to use directly instead of having to publish then dig into the sourcecode then go back and edit.

    Posted by Panos | November 24, 2011, 10:55
  24. Thanks so much– that was not hard at all and it did the trick perfectly!

    [Username link to non wp.com site removed - P.]

    Posted by Susan Wood | January 25, 2012, 22:33
  25. I’m in firefox and I don’t see View Source. Help!!!! I need to properly cite my photog for her work. Will be using her regularly. I want to post ASAP, so I hope you get this. You are the first person I found who addresses this in a way a none programmer, HTML illiterate can understand.

    Posted by Julie Punishill | March 10, 2012, 15:06
  26. In Firefox it’s View menu > Page Source. But anyway you probably didn’t notice the Update at the end of the post: I’ve worked out a hack you can use without resorting to the sourcecode of the page. See here:

    http://wpbtips.wordpress.com/2011/11/29/image-captions-no-dash-twenty-eleven/

    Posted by Panos | March 10, 2012, 15:20
  27. It worked. Thank you so much. I’m trying to tweet your praises, but I can’t figure out exactly who you are. What’s your Twitter user name?

    Posted by Julie Punishill | March 11, 2012, 00:44
  28. You’re welcome.
    You need to replace the YYY and ZZZ of my model with actual numbers (in your case, 600 and 610). And my code is tailored to simulate the captions of the Twenty Eleven theme: you should increase the font-size.

    I’m not on Twitter.

    Posted by Panos | March 11, 2012, 04:24
  29. Thanks. Can I right justify the caption? Do I have to always use full size or can I make it smaller. You are such a find. Wish you were on Twitter so I could talk you up.

    Posted by Julie Punishill | March 11, 2012, 05:22
  30. To right justify the caption, you replace this:
    text-align:center;
    with this:
    text-align:right;

    Image can be any size. The size is controlled by the number you enter in place of YYY. To give you an idea, around 350 is roughly half the width of your posts.

    Posted by Panos | March 11, 2012, 05:38

Trackbacks/Pingbacks

  1. Pingback: Formatting Captions « HoustonWeaver - March 25, 2012

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,560,186 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: