WordPress Rocks!

Jul 20 2008

Floating Images within the post in WordPress 2.6

Filed under WordPress Tips by Sadish around 12:43 pm

The text editor that comes with WordPress 2.6 has some interesting things added.
When you have images within the content, you can float them inside the post so that the text wraps around the images properly.
You can align the images to be “left”, “right” or “centered”.

When you use the text editor to align the images, WordPress adds class=”alignleft”, class=”alignright” or class=”aligncentered” to the ‘img’ tags or its surrouding ‘div’ element, when you choose left, right or center alignment for your images.

The post looks aligned to the left, right or centered within the WordPress admin area, but when you see the post on your site, it may not look properly aligned. It is because the theme that you are using, may not be aware of those classes added by WordPress.

How do you make your site’s theme to be aware of these classes?

You have to add the style definitions for these classes in your current theme’s stylesheet.
Open your style.css in your Theme Editor [Login to your site and click on Design -> Theme Editor].
Add the following code to the end of style.css.
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; }

How to display the CAPTIONS for the image properly in WordPress 2.6?

Recently another question popped up in the support forums, asking the above question.
The Solution to that problem is mentioned at the codex as follows.
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; /* optional rounded corners for browsers that support it */ -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; }
Add this to the end of your theme’s style.css.

This should normally take care of the image alignments / Captions when using the properties of the text editor in WordPress 2.6 and using one of my themes as your current theme.
Let me know if this article can be improved.
Thanks.

46 Responses to “Floating Images within the post in WordPress 2.6”

# WordPress 2.6 Changes How WordPress Handles Imageson 21 Jul 2008 at 4:03 am

[...] 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 [...]
# VitaminCMon 21 Jul 2008 at 7:22 am

Great tip. Thanks.
My site has been a disaster since I upgraded. This cleans up a lot of the problems, but I still have a few.
This should help a lot of people.
# TurntheScrewon 21 Jul 2008 at 7:54 am

Hey thanks for this! Funny thing is…I got the align right to line up all nicely nicely, but the align left for some reason just won’t take. any suggestions?

Thanks in Advance!
# Barry Morrison 21 Jul 2008 at 2:06 pm

Thanks so much for this fix. I needed it.
# Hishamon 21 Jul 2008 at 2:35 pm

Thanks, this works fine for me, I was having the same problem when I try to align photos to the left.. works better after adding this code to my CSS file!!
# Arikuron 21 Jul 2008 at 6:17 pm

Thank you very much Sadish!
# Wordpress 2.6 - Bilder vom Text umfliessen lassen | [gregel dot com]on 22 Jul 2008 at 3:53 am

[...] schnellen googeln bin ich dann aber doch noch kurzfristig fündig geworden. Es sieht so aus, als verwendet WP2.6 für diese Ausrichtung neue CSS-Klassen - und die sollten [...]
# QuoVadamon 22 Jul 2008 at 11:05 am

This doesn’t seem to work for me when centering images.
# Bobon 23 Jul 2008 at 12:34 am

remove the -ed and make it img.aligncenter, div.aligncenter
# Sadishon 23 Jul 2008 at 10:29 am

#Bob,
I fixed the code after reading your message.

#QuoVadam,
Please use the code as you see now on this post. It will center the images properly.

Thanks.
# Bobon 23 Jul 2008 at 2:43 pm

They put a similar code in the codex at http://codex.wordpress.org/css
# Andre Kibbeon 25 Jul 2008 at 4:19 am

Sadish,

Wordpress doesn’t rock. You rock. Thank you so much.

@Bob: True, their code is similar. The only difference is that the code posted here worked for me, whereas the Codex listing didn’t. That might have been my fault, though. I tried to add the code to custom.css rather than modify the style.css directly, unlike this time around.
# Nathan Driveron 25 Jul 2008 at 9:11 am

THANK YOU! Been searching all week to figure this out.

THANK YOU!
# Nathan Driveron 25 Jul 2008 at 9:53 am

…while it worked it did change the layout for my sidebar…ideas/suggestions?
# Bobon 25 Jul 2008 at 10:17 am

Nathan, it’s easier to help if we can see your site.
# Bobon 25 Jul 2008 at 10:22 am

Nathan, of course, clicking on your name would help me find the site. Sorry about my ignorance. Sadish has a post on several things to try when troubleshooting the sidebar drop-down effect.
http://wpthemepark.com/2006/10/13/sidebar-drops-down.html
# Zhuon 27 Jul 2008 at 1:09 am

Awesome trick! It makes my life much easier, thanks!
# John James Jacobyon 27 Jul 2008 at 1:16 pm

How about clearing out the ‘alignnone’ class just for safe measure?

img.alignnone { float: none !important; margin: 0 0.5em 0.5em 0; }
# Kenon 27 Jul 2008 at 10:45 pm

Thanks for the tip and for FallSeason Sadish!
# WordPress 2.6 Floating Images within poston 28 Jul 2008 at 5:34 am

[...] Source:→ WP Layer [...]
# Ottoon 28 Jul 2008 at 10:22 am

This change was introduced in 2.5, not 2.6.

Also, try the WordPress support forums next time, this information has been available since the WordPress 2.5 release:
http://wordpress.org/support/topic/164999
# Sadishon 28 Jul 2008 at 11:15 am

Thanks Otto,

I understood it was introduced even in WordPress 2.5, but I only noticed it when testing with WordPress 2.6.
I also understand you have already written a post about it 3 months back on the wordpress.org forums, but I did not come across that till you mentioned it.
The CSS code I mentioned on this post is kind of evolved as I was trying to help one person in my support forums.
see the thread below for that matter.
http://wprocks.com/forums/comments.php?DiscussionID=1427

Thanks
Sadish
# Dicas Wordpress - Alinhamento de Imagens em Posts Wordpress 2.6 - Wordpressbr.comon 28 Jul 2008 at 5:55 pm

[...] Floating Images within the post in WordPress 2.6 [...]
# Sadishon 29 Jul 2008 at 7:51 am

The post is updated to include the CSS for CAPTIONS that can be added to the images.
# Floating Image Change For Wordpress 2.6on 29 Jul 2008 at 12:25 pm

[...] Shortly after drafting this post up I discored I had been beaten to the buch by HackWordpress.com and Wordpressrocks.com. [...]
# Nikkoon 30 Jul 2008 at 9:13 pm

I added the code to my seashore theme but I still cannot get the text to wrap around the images. In the visual editor the wrap works but then I save and preview the text reverts to the top or bottom of the image.
# Sadishon 30 Jul 2008 at 9:22 pm

People
don’t use this comment form for any theme issues. That’s why I created a support forums. Click on the forums link from the top navigation .
# 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 Heraldon 31 Jul 2008 at 12:55 am

[...] Themes that have not been updated to handle the new image placement, see Hack WordPress and WP Lover for technical [...]
# Estheron 31 Jul 2008 at 7:59 am

Thank you! I’ve added this to a lot of my themes and it’s making things much happier!
Love it when a google search actually gets me an answer…
# RobtWmson 31 Jul 2008 at 1:18 pm

Thank You Very Much!!

I’ve pulled what little hair I had out trying to figure this out. Any puzzle is easy when you have the answer.

Thanks Again!
# garazonon 01 Aug 2008 at 12:04 pm

Thanks so much Sadish! Not only for your wonderful themes, but the great support in maintaining them through these Wordpress upgrades. the caption thing was driving me crazy :- /
# Lincolnon 03 Aug 2008 at 4:29 pm

The biggest problem I’ve seen with this is that these css definitions are worthless in feeds. I usually center my images but I find I have to wrap them in a centered or tag anyway so they stay centered in my feeds as well. It seems redundant, but there doesn’t seem to be any other solution.
# Patrick Sizemoreon 04 Aug 2008 at 3:41 am

Just what I needed! Thanks.
# katyaon 07 Aug 2008 at 6:37 am

This worked like a gem.
Thank you Sadish.

I hope this information is available to many others. I have linked this page on http://theyoungindia.com/?page_id=233
# Ruthieon 10 Aug 2008 at 12:14 pm

Thank you so much Sadish! It worked perfectly for me!
# Pies de foto y alineación de imágenes en WordPress 2.6 | ¡Desperta Ferro!on 14 Aug 2008 at 2:20 am

[...] Floating Images within the post in WordPress 2.6 ids.push(326);SHARETHIS.addEntry({ title: “Pies de foto y alineación de imágenes en WordPress [...]
# elaineon 14 Aug 2008 at 11:18 am

Thank you so much, Sadish. This has been driving me crazy. Works fine, now.

Now if I could only get the image caption thing to work properly.

Great info!!! Thanks again.
# Roberto Silvaon 19 Aug 2008 at 10:04 pm

Thanks so much for this fix. I needed it.
# Branton 24 Aug 2008 at 1:36 am

Hi - I am having similar issues with my WP site and the sp-captions div.

Have a look at this post:

http://brantwinter.com/2008/08/22/where-have-we-been/

I need to know why the image is being pushed down instead of being in line with the text block. There is no margin being applied to wp-caption. I have spent hours trying to sort this out now - any help appreciated.
# Problema de alineación de imágenes en Wordpress 2.6.x | Punto Geekon 25 Aug 2008 at 10:43 am

[...] correctamente, pero al publicar la entrada la imagen queda a la izquierda. Pero ese problema tiene una simple solución, y se las voy a citar [...]
# Dineshkumaron 26 Aug 2008 at 3:28 am

rekha
# branton 26 Aug 2008 at 3:41 am

Fixed - see http://brantwinter.com
# Solucionar la mala alineación en el editor de Wordpress 2.6 » galder.neton 26 Aug 2008 at 2:23 pm

[...] la había, o grande Wordpress, con esa comunidad que Carrero, y Wordpress Rocks ya se hacían eco de una [...]
# Wordpress 2.6 problème d'alignement des images | Cmicblogon 27 Aug 2008 at 11:04 am

[...] solution est publiée par Sadish Bala sur son blog : Il suffit d’ajouter le code suivant dans le fichier style.css (qui se trouve dans le [...]
# Christinaon 29 Aug 2008 at 6:11 pm

I wish this would work for a friend’s WP theme. It has minimal CSS and the text will just not wrap around the image if the image is floated to the left. It does if floated to the right.

It’s a custom theme with the standard files. Not using any widgets.
# Обрамляем Картинки Текстом | WPCms.ru: еще один сайт о Wordpress CMSon 30 Aug 2008 at 7:47 am

[...] Исправить эту неувязочку легко. Достаточно добавить в конец используемого CSS файла следующий код: 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; } [Источник] [...]