Align Image In Post WordPress 2.7

Written by Costa on February 16, 2009
Categories: Theme Modification Tips

More than a year ago, I posted the stylesheet codes for aligning images in your WordPress posts. Times have changed and WordPress has added many new advanced features. One of them is the ability to align your images perfectly when you insert your image in your post editor. The only thing is the old codes which I posted the last time do not seem to work with the newer version of WordPress. So I went a digging and did some investigation. Studied the codes in the default theme that came together with WordPress 2.7. This are my findings.

To have your images aligned properly in WordPress 2.7, and your theme is an old one that is not compatible with 2.7, you need to and this few simple lines only. (UPDATED)

p img {
padding: 0;
max-width: 100%;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

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
}
Copy those codes and paste it in your stylesheet, anywhere that you find appropriate.  When inserting images during posting, select your alignment preference and your image will appear perfectly aligned.

This is an image with a caption

This is how an image with a caption looks

Another feature that comes as default is captioning your images. This is really a cool feature as it allows you to add a short description to the image or maybe add in the copyrights credit to the owner of that image. You can still use this feature in any theme but the captioned image will be just a plain looking one. To make the iamge more elegant and classy with the captions aligned nicely at the bottom of the image, add these codes to your stylesheet.

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

It will result in the iage looking like the one shown here.

  • Advertisements

617816e5b8045006d7d0ab0438a6b23f

Article by Costa Fong

@costafong

Who loves to mod and mess up WordPress Themes.

Costa has written 560 articles here. Some are awesome, some are lame.

If you enjoyed this post, whether it's awesome or lame, consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

SUBSCRIBE NOW to receive free Photoshop Action scripts for creating beautiful eCovers.


FREE Photoshop Action Scripts For Subscribers Only. Download link is at the bottom of the article when you receive your feeds.
ENTER YOUR EMAIL

REMEMBER TO CONFIRM YOUR SUBSCRIPTION

Other Awesome Articles

  1. How To Align YouTube Videos In WordPress Post
  2. WordPress 2.9 Image Thumbnails And New Features
  3. Add Text And Image Shadows To Your WordPress Post
  4. How To Use An Image For Your WordPress Theme Background
  5. How To Align Your WordPress Quotes Left Or Right
  6. How To Remove Dates In Your WordPress Blog
  7. Better Display Of Images In your WordPress Post Excerpts
  8. Adding Thumbnails To WordPress 3 Default Theme

Users who found this page were searching for:

  1. how to align an ad with in a post wordpress
  2. wordpress align image top right
  3. wordpress img align header
  4. align image in wordpress
  5. thesis theme image caption alignment
  6. thumbnail images not aligned in frugal
  7. how to align header center wordpress
  8. cannot align image in wordpress
  9. wordpress align text images
  10. can't center image in wordpress post

8 Responses to “Align Image In Post WordPress 2.7”

Comments

Read below or add a comment...

  1. Ryan
    February 18, 2009 at 3:07 am

    Hi Ah Pek,
    I know you’re a popular man around the WP forums, so I thought I’d see if you can work out the kink in my image-align issue:

    I have tried about EVERY solution I could find on all the forum sites concerning this, but nothing’s worked yet. Here is a prime example of my problem:

    http://www.epochsy.com/2009/01/27/edletwinter08/

    The David Bowie quote is meant to be centered, but obviously, is not. Here is what my style.css currently looks like:

    /*img.alignright { float:right; margin: 0 0 1px 5px; padding: 2px;}

    img.alignleft { float:left; margin: 0 5px 5px 0; padding: 2px;}

    img.aligncenter { float:center; margin: 0 5px 5px 0; padding: 2px;}*/

    /*This works to RIGHT align images, but not centered ones!!!*/

    img.alignleft, div.alignleft {
    float:left;
    margin:2px 2px 2px 0px;
    }
    img.alignright, div.alignright {
    float:right;
    margin:2px 0px 2px 2px;
    }
    img.centered, .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

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

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

    If you can help me I would be infinitely grateful. I’ve been trying to fix this for about 3-4 hours, and if I can’t fix it by tomorrow night, my head might explode.

    Thanks!

    • Costa
      February 18, 2009 at 9:41 am

      Ryan,

      Are you using WordPress 2.7? Some themes simply do not comply but what I can suggest is that you remove all those old image alignment codes and replace them with these

      p img {
      padding: 0;
      max-width: 100%;
      }

      img.centered {
      display: block;
      margin-left: auto;
      margin-right: auto;
      }

      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
      }

      Can’t promise anything as like I said, some themes simply do not work with 2.7

      Do save up your old stylesheet before messing with it though.

      I’ll update the ones I have posted above.

  2. Andres Vivas
    May 2, 2009 at 11:43 pm

    Thanks a lot, this fix corrected my issue with the images. I truly appreciate it!!!

  3. Tiffany
    August 13, 2009 at 7:57 am

    I just wanted to tell you – thank you, thank you, thank you for this fix! I was feeling so frustrated with my image alignment after a wordpress upgrade and your code fixed it perfectly after days of searching for a solution. Your time is appreciated! Thanks again!!

  4. Ed
    November 4, 2009 at 2:57 am

    Code worked a treat, thanks. The theme I am using is really kicking now.

Trackbacks

  1. Aligning Images With Your Stylesheet. | Blog Templates Reviews says:
    February 16, 2009 at 9:56 pm

    [...] for visiting!UPDATE: If you are using the new version of WordPress 2.6 and above, check this post: Align Image In WordPress 2.7 A lot of WordPress Themes don’t include the functions to align images, something which I find [...]

  2. Andres Vivas says:
    May 2, 2009 at 3:33 pm

    RT @tweetmeme Align Image In Post WordPress 2.7 | Blog Templates Reviews http://bit.ly/dV3Ag (it took me 4 hours to try to do it by myself)

  3. Costa says:
    April 24, 2010 at 12:21 pm

    Latest update from Blogigs.com – Align Image In Post WordPress 2.7 Read all of it here http://bit.ly/dB8F5v