Getting Fancy Image Captions in Wordpress 2.6

Getting Fancy Image Captions in WordPress 2.6

By Lee Odden Blogging

Calming Clouds

WordPress 2.6 comes with a feature that adds captions to images. It looks really nice in the WordPress editor, but if you don’t have the code, it won’t look as nice when you publish your post.

The good news is, all you have to do is add the following lines of code to your theme’s CSS file.

/* Captions */ .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

.wp-caption img { margin: 0; padding: 0; border: 0 none; }

.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }
/* End captions */

Now your images and captions will look just as good live as they do in the editor.

SUBSCRIBE TO TOPRANK’S TIPS NEWSLETTER

8 Comments »

Be the first to rate this post: Poor

Loading ...

Related Posts You May Enjoy Reading:

Please read the Online Marketing Blog comment policy.

http://www.limbicnutrition.com/blog/ Jonathan

Thanks a bunch for this tip off.
http://m-alo.dk m-alo

Now all we need is a way to put links inside the captions and it would be a killer feature!
TM

I was curious. Is there a way in addition to adding a caption creating a space and/or adding photo credits i.e.

Calm Seas Photo Credit: Whomever
or Calm Seas/Photo Credit: Whomever

Without having to type in either “/” or “Photo Credit:” and just have that automatically inserted in?
http://hypescience.com HypeScience

Thank you for the tip.

It works in parts, but is not aligning at right or left as set on the “add image” wordpress backend.
http://www.aleeya.net Erica St. John

Thanks, this is perfect for what I was looking for~
Thomas

Here is the code for image alignment:

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}
http://www.banagale.com Rob

This was of good help to me. You may want to add Erica St. John’s code to the original post. Thanks.
http://www.mikegrosshandler.com mike

thanks a ton, this had been bugging me for a while!