Calvin’s Hub

Image captioning is now working!

When I transferred all my posts from Wordpress.com to a self-hosted Wordpress 2.5 platform, I quickly noticed that the image captions were not working.

Oh no. I thought that I had to remove all the captions from my images and make them ordinary images. Image captions are something like you see on your right by the way.

Fortunately, I found out that the problem was not the Wordpress install but the theme that I was using. Old themes don’t have support for image captioning but you can easily solve this by editing your stylesheet.

Open your style.css (Design > Theme Editor) and just append the following code:

/* 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;
      }

Whew! I can’t believe it would be that simple. Thanks to this blog for posting the solution.

• Workaround for the grainy Saved Image Bug in iPod Touch
• Lakers meet Zoolander and Image Captioning
• Adding avatars on a Digg 3-column theme for Wordpress
• Just upgraded to Wordpress 2.7

Filed under: Blogging Experience