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:
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:
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:
Rembrandt: philosopher in meditation
Rembrandt: philosopher in meditation
Code of this particular modified version:
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.
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:56If 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:12Alchemy 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:01But when it comes to light, my favorite painter is Vermeer.
Posted by Panos | August 4, 2011, 09:32Vermeer. 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:02Right: 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:00Yes, 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:57Oh 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:00OK. 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:17Posts 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:29Yes, 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“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:38oooh! gosh: I didn’t mean to make you angry.
LOL. guess I talks too much for such…
Posted by Tess | August 6, 2011, 10:04I 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:55Yes 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:31Bad 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:06Well, 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:52You 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:36Of 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:10Yes, 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:13Agree.
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:58This 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:50You’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:55Thanks 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:33I’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:06In 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:20It 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:44You’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:24Thanks. 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:22To 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