You have probably known by now that one of the latest addition to WP 2.6 – among other great features – is the Image Caption – a little description of the image derived from the ALT text.
The theory is ALT text to your image is what you describe the image to the Search Engines. For SEO purpose, it should always be optimized with the use of proper keywords.
Well, to tell you the truth, I’m not too fond of image caption as I always think the image is better off without it and to make the matter worst, what I see on the editor is not what I see on preview.
I assume that to the majority of us, the image caption will not display properly the way it should on the published post. Since it’s one of the default features that comes with the package, I was just wondering why there isn’t any official guide on how to make the caption work – properly.
So in the spirit of sharing, I’d like to share with you the solution to fix it by adding some CSS elements to control the visual appearance of your image and its caption.
Image Caption at Work
This is Image Caption
Adding CSS Style to Your Stylesheet
/* IMAGE CAPTION
/* ----------------------------------------------*/
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* For rounded corner */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin-bottom: 5px;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* IMAGE POSITIONING
/* ----------------------------------------------*/
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
Credit goes to Isaiah for the solution.
To stay updated with the latest blogging tips, get the daily update into your inbox via email subscription. Happy blogging!
Related posts
- 5 Little Known Way to CSS Styling Your Blog Let me just say this is supposed to be the second part ofwhich I wrote a couple of days ago....
- How To Enable Gravatar On Your Blog Without Plugin Do you know WordPress 2.5 has a built-infeature? Have you tried to enable it and still no picture of you...
- D-I-Y Image for Your Blog You’d Not Want To Miss The above iPhone image is created using the creative online tool of RedKit. What I like about it is...
- How To Add Post Date To Your List Of Recent Posts The WordPress function wp_get_archives(’type=postbypost’) displays a lovely list of posts, but sadly to say, it won’t show the date of...
- How I Make Money Online with HubPages? Yes! You’ve arrived at Yan’s blog. This is the NEW (albeit, half-baked) thoushallblog.com. After much contemplation and with the help...
{ 1 trackback }
{ 13 comments… read them below or add one }
the radius is different in other browser.
i think this also should be compiled along with javascript.
doesn’t it?
syuxx’s last blog post..Friendster Auto-Friend Adder & Comment Software
What’s up Yan? Yeah I don’t like the image caption feature at all. Although, it is much better if you style it to match your theme, etc.
Cheers!
Jay
@syuxx – You have your point. I’m not aware of using Javascript. To my knowledge, it only works if the browser supports it.
@Jay – Hey, hey, hey, I’m glad you drop by. Thanks for your suggestion, Jay. Why didn’t I think of that?
Good tips for making image caption work with CSS. Since a lot of people do not know how to do this this will help in lot of bloggers do it by each of your steps.
Ultimate Blogging Experiment’s last blog post..Quality or Quantity of Blog Posts
I didn’t bother adding a caption to my pictures. After the first caption wasn’t styled and appeared as regular text, I decided to just not add them anymore.
Thanks for the code though, I might just start using them :)
Brad Blogging.com – Personal Blog Tips And Blog Help’s last blog post..Conducting an Experiment – Advertising And Guest Posts
I am using the image caption but should blend with the blog theme’s color
I envy you guys talking all these WP stuff. I was with wordpress but due to certain problems with hosting, I had to move to blogger. I am enjoying many benefits with blogger but i will be migrating back to wordpress at the end of the year.
I LOVE WORDPRESS.
AZ Blogging’s last blog post..Rambling – A journey to Niche-blogging
@Uncle Che – Hey, buddy. The fact is I haven’t heard of any host that is not compatible with WordPress. Which hosting provider are you talking about?
Yes, yes, yes…without a doubt, WordPress is more flexible than blogger in general.
I am no expert on CSS but this code is pretty useful for me, in case I wanted to use the image captions.
But for now, I find them to be a redundant feature.
@jeflin – Yes, contrary to popular belief, I use less images here than any other blogs.
I use at least one image in my every post. But not very much enthusiatic to use Image captions.
Shanker Bakshi’s last blog post..Meet The Shanker Bakshi Junior
Thanks for sharing this tidbit. My captions looked missed up due to the theme being released before the feature was added
EmmaB’s last blog post..5 Blogging Platforms To Consider
I added the code to my style.css file and still ‘no’ captions. Is there something else I need to change.
I added a caption to the first image in this post: http://mommyknows.com/growing-wider-thanks-to-cupcake-pops/
I’ve looked and looked for a solution … any ideas?
Thank you!
mommyknows´s lastest post..Growing Wider Thanks to Cupcake Pops