Image Formatting Issues on Upgrading to WordPress 2.6

WordPress Download Page

WordPress Download Page

Got a call yesterday from a buddy of mine who had just upgraded his blog to WordPress 2.6 and found he wasn’t able to get images to align in his new posts the way he did before. No matter what he did the images just displayed one way.

I knew right away what his problem was because I’d seen the same thing when I upgraded SuccessCREEations.

Adjusting to New Features

The culprit is the new image caption feature that was added in WordPress 2.6, which is something both me and my buddy who called are glad they added.

However, to make it possible for the captions display under images, WordPress has added an extra div around images. This extra div requries a style sheet adjustment for many WordPress themes.

Many theme designers style the post images either within a div for the specific post content area or within a paragraph so you might see something like this in your style sheet:

#postcontent img .alignright {…

OR

p img .alignleft {…

Trouble is, the extra div now overrides those CSS attributes, meaning that if there is no specific entry in the style sheet for the new div class the associated image styling will cascade back up to any generic img styling (if it even exists.)

In my buddy’s case the default image styling was aligned to the left so no matter how he formatted the image in his post text area it stayed the same when published.

The Fix

There are a couple ways you can fix the problem. The one you choose will depend on your own stylesheet.

The easy fix is to just add generic classes for left and right aligning everything. For example

.alignleft {…

OR

.alignright {…

But you many not want everything those two classes formated the same way. The good news is, if you added a caption to your image then WordPress adds the class “wp-caption” to that div for you. So you can use that class to uniquely style that div (and the image it contains). For example

.wp-caption .alignleft {…

OR

.wp-caption .alignright {…

And while you’re at it you can even style the text of the caption using the “wp-caption-text” class.

Change can be frustrating, I know. Fortunately the good folks at WordPress do a really good job of consistently making chages that improve things for us and avoid changes just for the sake of something different.

SuccessCREEations.com runs on the Genesis Framework

affiliate program logo

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Check out these incredible features and wide selection of designs. There are so many to choose from they created this handy theme chooser to help you find the perfect theme for your needs. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Or you can even Become a StudioPress Affiliate yourself to start earning today!

Comments

  1. thanks great post!

  2. I am still on WP 2.2, is it a bad idea to ugrade to 2.6 without someone who really knows CSS around? Could I be looking at nightmares?

    Help.

  3. Karl, That all depends on the level of comfort the site owner has with some of the technical stuff. WordPress is a relatively easy platform to maintain but it can be a little much for folks who struggle with computer stuff. For those folks (who have non-commercial blogs) WordPress.com may be a good hassle free choice.

    Not upgrading at all is a bad idea because older versions of WordPress can get hacked.

    I do offer WordPress Support for folks who have their own sites but don’t feel up to the technical aspects of maintaining them.

    Bottom line is they are constantly upgrading WordPress to add features and make it more secure. Any time the core software is changed it can potentially cause issues with plugins and themes. It’s good to have a working understanding of CSS and the time to dig through the WordPress Codex when maintaining WordPress.

  4. I was very skeptical about upgrading. None of the other blogs I’ve visited for info provided these details the way you have. I now have the confidence to move forward with it.

    Thanks,

    Jen Thomas
    Muvar Software

  5. Thanks for giving that fix, but it’s problems like these that have prevented me from upgrading to WordPress 2.6. I’d rather just stick with the old WordPress, which really is just fine for my needs.

  6. Great advice Chris, I’ll be updating soon

  7. I was looking for a fix with the align issue when I’ve stumble in yout site. I have fix it alright. You know how? I used the same code from the 2.5 version. haha

  8. I’ve just upgraded to 2.6.2 and wrapping text around images isn’t happening. I see your fix but I’m not finding where to change this in the stylesheet. I don’t see the example you’ve created here. Am I looking in the right place?
    thanks!

  9. Rob, a quick look at your style sheet and it looks like the designer left off the .alignleft and .alignright classes all together. So you’ll just have to add them in formatted as you like.

    One example that might work for you is as follows:

    .alignleft {
    border: none;
    float: left;
    margin: 5px 10px 5px 0px;
    }

    .alignright {
    border: none;
    float: right;
    margin: 5px 0px 5px 10px;
    }

    But how you style it ultimately is your choice.

  10. Thanks for giving that fix, but it’s problems like these that have prevented me from upgrading to WordPress 2.6. I’d rather just stick with the old WordPress, which really is just fine for my needs.

  11. Good article on upgrading ‘WordPress 2.6′. Thanks!!

  12. Thanks for giving that fix, but it’s problems like these that have prevented me from upgrading to WordPress 2.6. I’d rather just stick with the old WordPress, which really is just fine for my needs.

  13. I have fixed it alright. You know how? I used the same code from the 2.5 version. The text just did not wrap around the pictures as it used to.

  14. Although it’s not a security update, it’s always a good idea to keep your WordPress software up-to-date… WordPress 2.6. is out and fixes a bunch of errors with right-to-left within the admin panel, IIS errors..

  15. Thank you for your post…The culprit is the new image caption feature that was added in WordPress 2.6, which is something both me and my buddy who called are glad they added.

  16. Change can be frustrating, I know. Fortunately the good folks at WordPress do a really good job of consistently making chages that improve things for us and avoid changes just for the sake of something different.

  17. The culprit is the new image caption feature that was added in WordPress 2.6, which is something both me and my buddy who called are glad they added. Many theme designers style the post images either within a div for the specific post content area or within a paragraph

  18. It is obvious ,new image feature is upgraded in word press..It sounds good…word press allow me to change theme often, although it is not more secure, upgrading is must..Thanks…

  19. Fortunately the good folks at Word Press do a really good job of consistently making charges that improve things for us and avoid changes just for the sake of something different. I used the same code from the 2.5 version. The text just did not wrap around the pictures as it used to.

Comment Policy: Your words are your own, so be nice and helpful if you can. Please, only use your real name and limit the number of links submitted in your comment. If in doubt, please take a moment to review our full Comment Policy before you click "Post Comment" so we don't mark your comment as spam.

Speak Your Mind

*

css.php