Home | Advertise | Contact

RSS Feed | Email RSS

WordPress 2.6 Changes How WordPress Handles Images

By | Filed Under CSS
Tag(s): ,

300x250 WordPress 2.6 Changes How WordPress Handles Images

If you’ve already upgraded to WordPress 2.6, you might have noticed that WordPress handles images a little differently than the WordPress 2.5 branch and below.  The main change is that you can now use the alt field to add a caption, which will wrap a sort of caption below the image.

The problem I’ve had with this new setup is that it can cause some problems when trying to float your images due to the new class=”alignleft”, class=”alignright” or class=”aligncentered” elements.  The image will still move, but I’ve found the text won’t wrap properly around the image.

Thanks to a recent post from Sadish over at WP Lover, it looks like this problem can easily be fixed by by adding some code anywhere into your CSS stylesheet:

img.alignleft, div.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter {
text-align:center;
margin:0 auto;
}

This way the images should float and the text should wrap properly.  Thanks for posting the easy fix Sadish!

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!
  • Print This

    • Kyle Eslick is WordPress enthusiast who took his passion for WordPress to the next level in 2007 by launching WPHacks.com as a place to share hacks, tutorials, etc. Connect with Kyle on Twitter or Google+!

    There Are 38 Responses So Far »

    • http://www.vitamincm.com VitaminCM

      This has been killing me since I upgraded. I’m using a custom theme and it has been broken since I upgraded. This helps fix it a little, but it’s still broken. Thanks, I’m sure a lot of people could use this help.

    • fikirbozan

      This is the post what i was looking for. thanx a lot… ? had a problem like this and solved via this great tutorial…

    • http://websuccessdiva.com Web Success Diva

      Great tip, solved my new dilemna :-)

      Thank you!
      Maria Reyes-McDavis

    • http://WriteYourBook.Net Barry Morris

      Exactly what I was looking for!

    • http://cybersurge.org Michael

      This is the kind of thing that makes me wish I stuck with the long term support versions of WordPress, changing things like this are pretty major and the fact that (at least to me) it doesn’t seem to be any real reason for it is ridiculous.

      Thanks for the tip though, I will be adding this code and hopefully it will work just as well for me as it has for everyone else.

    • Pingback: Internet Marketing Blog Posts in Review from Marketing Masters Guide | Marketing Masters Guide

    • crazytaxi

      no. this doesn’t really work, either. the app is broken. it’s like there’s this giant tremendous elephant in the room that no one is mentioning. Something as simple as plain old 1999 image placement…. could we get some HTML tables to hold pictures?

    • Pingback: BlogBuzz July 26, 2008 | Webmaster-Source

    • http://photographion.com Photographio

      Thank you.
      I’ll try it.

    • http://newyorkette.com carolita

      Hi! I’m using a wordpress “letterhead” template, and no matter what I paste in my style.css file, i can’t seem to get my text to wrap around my image. I’ve got version 2.5.1, and it automatically asks me if I want to align my image left or right, etc., but it never takes, not even after inserting the code above.

      What am I doing wrong? I did manage to get a wraparound text by moving the class=”alignleft part of my image code to just after the <img (instead of after the width and height indicators), but that syntax change, while it resulted in wrapping the text, made the image disappear, and also bleed into the top of my next post.

      This is an example of what an image code looks like in my version of wordpress:
      <img src=”http://newyorkette.com/wp-content/uploads/2008/07/hamburger_450.jpg” alt=”" title=”hamburger_450″ width=”450″ height=”401″ class=”alignleft size-full wp-image-675″ />

      It should wrap around, but it doesn’t.

      Can anyone help? This is what the image coding looks like in my letterhead stylesheet:
      a img { border: none; }
      That’s all there is! (until I pasted the code suggested here in, which didn’t change things for me).

      Would love some help! Been dying to have wraparound text for years!

    • John Kolbert

      Wow, this couldn’t come at a better time! Thanks for the tip, I’ll be using it in about five minutes

    • http://www.robinmalau.com Robin

      Pretty, thanks!

    • Pingback: Cadulicious: ícones gratuitos, dicas de Wordpress, portfolio online e muito mais! | Cadu de Castro Alves

    • Pingback: john keegan dot org » links for 2008-07-28

    • Pingback: Corregir error de alinear imágenes en WordPress 2.6 - Carrero Bitácora de los Hermanos Carrero, David Carrero Fernández-Baillo y Jaime Carrero Fernández-Baillo.

    • Pingback: Planeta WordPress » Corregir error de alinear imágenes en WordPress 2.6

    • Pingback: Image Wrap Løsning til Wordpress 2.6

    • http://newyorkette.com carolita

      Okay, I got some wrap around finally, but now I have a problem with the last photo, or the bottom of tall photos overlaying the footer of my post (the part that says, “leave a comment”, and even overlaying part of the header of previous post below it.

      Does anyone have a code fix for that?  I think it’s something to do with div clear, but not sure how that works.

    • Pingback: Problemas con la alineación de las imágenes en Wordpress 2.6 | Proyecto Aurora

    • Pingback: Dicas Wordpress - Alinhamento de Imagens em Posts Wordpress 2.6 - Wordpressbr.com

    • Pingback: Links for 29-07-2008 | Velcro City Tourist Board

    • http://MyLymphomaStory.com Brandi

      Thank you soooo much.

    • Pingback: Floating Image Change For Wordpress 2.6

    • Pingback: Handle Images Easily with a Quick CSS Update : ultimate geek girl

    • Pingback: WordPress Wednesday News: WordPress iPhone Upgraded, WordCamp San Francisco Registration, Simon Dickson Rocked the UK, WordPress Theme Directory, and 201,000 Blogs Using WordPress 2.6 : The Blog Herald

    • Pingback: WordPress Wednesday News: WordPress iPhone Upgraded, WordCamp San Francisco Registration, Simon Dickson Rocked the UK, WordPress Theme Directory, and 201,000 Blogs Using WordPress 2.6 | The Blog Herald

    • Pingback: WordPress News For The Week Of August 1st 2008 » The NMP Network

    • David Lau

      nice tips ,thanks you~

    • http://newyorkette.com carolita

      Well, nobody had an answer for me, so I’m assuming nobody knew, so I’ll tell you what I found out for preventing the wrap around text from making the photos and text overlay the previous post header, etc.  I got a clearer code: <br style=”clear: both;” />You just put that at the end of your post, and you won’t have any problems with the text and/or photo wandering into places it oughtn’t.

    • http://www.rickyjordan.com Ricky Jordan

      THANK YOU for this wonderful tip.  I just switched to WordPress and this solved my issue.  Worked well with the CopyBlogger Theme.

    • Pingback: Individualized Counseling » Blog Archive » McDragon on “Align images right/left suddenly not working after upgrading to WP 2.6″

    • http://www.SEOAdsenseThemes.com SEOAdsenseThemes.com

      This is exactly why we should always wait for X.X.1 releases before updating WordPress in crucial websites.

    • Steven

      Quick and easy fix for this problem

      Good work!

      S

    • Heather

      Carolita (#14), I was having the exact same problem and your solution fixed it. I really, really appreciate it since it was driving me nuts. Thank you!!!!

    • http://newyorkette.com carolita

      Heather (#18), I’m glad to help! I posted that question in so many places, and nobody had any time to answer me. (I was beginning to wonder if this was a real forum!) Glad to know I actually reached someone, and was helpful too! :)
      Happy blogging!

    • http://www.marcush.de Marcus

      Thanks for this tipp. This is what I’ve searched for.

    • http://www.collegefantasycoach.com J. Bentz

      Hey… I’ve been noticing that when I upload images below a width of 232px that the images have been autoformatting to that width. Most of the images in blog posts on my site have done this, if you would be willing to take a look (click my name link).

      Any tips or a stylesheet code fix you can provide me would be a great help. Thanks a lot man.

    • http://avtorentacar.bittersweet-place.com/ avtorentacar

      What I need.
      Thank you

    • Kudungga

      thanks a lot for sharing. Good luck for you

    • Pingback: Wordpress 2.6 - Images won’t align properly | eJabs

    • danielle

      it fixed the issue on my blog, but it didn’t fix the issue in my RSS feeds. email is still showing images to the left, but they are fine and on the right on my site. do you know why this is? can u email pls :) if u know

    • Pauly

      Wicked! Thanks a bunch

    • Andrew

      Thanks so much!

    • Revital

      Thanks! Solved my problem in an instant!

    • http://xiawa.my Xiawa

      This is exactly what i m looking for :D
      thanks a lot!

    • Mari

      My goodness, thank you for this post.
      Thank you, thank you thank you

    • Jeff

      Works in Firefox great but doesn’t work in IE.

    • Jeff

      My apologies.. works fine in IE and Firefox. My page was cached. Thx!

    • dM5.1

      Posting just to say thanks for this easy fix!

    • http://www.selfdefenceforkids.com.au Matty

      Thanks so much Kyle. I agonized over this for hours until I came across your post. You are my new god.

    • Lea Selley

      What css file are we supposed to edit? I’ve got 50 it seems!

      • Jeff

        Lea,
        You should only have one css stylesheet. Are you in the actual editor? It’s typically the last one in the list (though not always).

    • Bob

      Thanks Kyle…(two years later) your post is still helping people like me! Text “was” wrapping fine in my newer WordPress versions until I happen to change to a new theme yesterday, then it quit wrapping. That bit of code in your post fixed it!!!

      Thanks a million!

    • michael

      Perfect solution. thanks

    • http://www.astronyu.com astronyu

      Great tips. I was directed to here from one of the topic on wordpress support.
      Seems like the code you’ve given fixed my problem with wrapping post around the image.

      However, can you perhaps share how to make the caption of the image shows as well? I can see it clearly in the editor the image and its caption showed just nice but when the post is published, the border around the image and caption were gone.