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.
rekha
Fixed – see http://brantwinter.com
[...] la habÃa, o grande WordPress, con esa comunidad que Carrero, y WordPress Rocks ya se hacÃan eco de una [...]
[...] 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 [...]
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.
[...] ИÑправить Ñту неувÑзочку легко. ДоÑтаточно добавить в конец иÑпользуемого 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; } [ИÑточник] [...]
[...] WordPress Rocks! » Floating Images within the post in WordPress 2.6 – Was tun, wenn im WP 2.6 die Bilder nicht richtig ausgerichtet angezeigt werden? Dann liegts am Theme So wie bei mir. [...]
Any idea how I can easily (I don’t want to mod the WP install, incase of an upgrade) remove this functionality. Or define my own TinyMCE styling?
It’s annoying when functionality not included in my build / layout is provided via TinyMCE
[...] WordPress Rocks! » Floating Images within the post in WordPress 2.6 – Was tun, wenn im WP 2.6 die Bilder nicht richtig ausgerichtet angezeigt werden? Dann liegts am Theme So wie bei mir. [...]
[...] WordPress Rocks (en ingés) [...]
Yay, it works
But how do I make the “captionimages” show WITHOUT borders even though my normal pictures have borders?
Thank you for quickly solving a very frustrating problem!
[...] 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 [...]
I have tried SO MANY themes, and SO MANY ‘fixes’ for this issue in WP 2.6. This is the FIRST TIME EVER that something has actually worked, and not only worked, but worked perfectly! Thank you SO MUCH!!!
[...] Although I found this solution at the link I gave aboeve, the code was originally posted by Sadish at WP Lover. [...]
Inserted code with instant success, thanks for an easy fix to a real headache of a problem!
[...] Recurso: wprocks.com [...]
Thanks Chris,
]
Glad to be of help. [by the way your gravatar was nice
Thanks for this clear, easy-to-understand fix! Worked perfectly. Thank you.
Sadish – I purchased Nigarila from you and love its look – my very complex site for a non-profit foundation is currently unpublished and under construction but will eventually show up through hosting by Lunarpages (with much help from friends). I am unable to get my images to float left, right or center on my pages by following your instructions. My postings are therefore not very attractive. I thought the code for floating was included in the Nigarila theme, but maybe it’s not? The commands are there in the gallery posting instructions boxes. I’m new to modifying the style sheet and so am nervous about doing it myself. Can you please help? Thanks!