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.
Thanks pal, worked like a charm! another mystery solved
I wonder when the wordpress changes, I cannot post my article.. I don’t what happened.. For the latest wordpress update, can we post article?
Thank you so much, your post was super helpful in resolving an issue with a new blog I’m working on!
Thank you very much for these fixes. The image and caption alignment had always bothered me on WordPress version 2.6 and higher. Your code helped fix those issues on a customized template.
For those that don’t want a border around images (when an image has captions) you can use the following code (for white backgrounds only):
.wp-caption {
border: 1px solid #fff;
text-align: center;
background-color: #ffffff;
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;
}
All I have done is replaced the border color and background-color from what Sadish had provided.
Thanks for the fix.
[...] 1. Highlighting the comment of the post author 2. The CSS style definitions defined in the post Floating Images within the post in WordPress 2.6 is now part of the theme itself. 3. New and updated mistylook.pot file [Yes, the old translations [...]
[...] reading: Floating Images within the post in WordPress 2.6 (wprocks.com) Thanks [...]
Thanks for this information. I thought I was stupid for not get it right. Now I can sleep..
You Rock!
Thank you, thank you, thank you!!!!
What about SEO content benefits? From what I understand, ‘content=”sss” or title=”sss” does not provide help there.
I was told that a floating div tag could do the trick, but don’t know how to pull that off with your Misty Theme. Please look at the example on the following page:
http://www.jcphotos.com/uva.html
Mouse over University of Virginia and you get a content box.
Thanks in advance for any suggestions.
Best regards.
Sorry, previous site link was not right.
Works great. It could be done in a more easier way though. But so far so good.
Thanks Sadish for the support. it works great!
chriz
Thank you for the super clear step by step instructions! it worked… now my text wraps and my content looks great! thanks so much! http://www.avalondesign.ca/markreidart/wordpress/?page_id=5
Thanks a lot works great!
Wow – you have fixed my ongoing dilemma – thank you so much
Hello Sadish,
thanks a lot for this tutorial, it worked just great for my project. Your blog is a real treasure chest for everybody working with WordPress
Ricbi
I was brooding over this problem for days until I found your tutorial – it worked like a charm, now everything goes neatly together
Thanks a lot for sharing!
Have tried inserting your code but unfortunately, the text still doesnt wrap around the image – its still at the bottom!
Could there be a clash of css elsewhere?
i am using a theme called Voodoo Dolly from wordpressthemesbase.com
i am also using WordPress 2.9.2
Any other ideas would be greatly appreciated.
Thanks
Finally got the floating images working using this guide. I’ve been struggling with this for awhile
I inserted the codes from here, and they seem to work well (i have to manually adjust the picture within the caption frame, but that’s not a big deal)
My big problem is now the headlines for my posts are starting right-aligned and taking up two lines.
Any suggestions?