WordPress 2.6 a Bear at Image Handling

Wordpress Upgrades a Bear

Taming the WordPress Image Bear with Captions

There are a couple of major changes in CSS styles that will need to be incorporated into your blog if you are going to use the new caption class and the image class for your blog posts. This is due to the change from align=”right” etc. to img class =”alignright”.

The easiest way I’ve found to include this is to go to the css.style for the default theme and find the image and image caption section and copy it into my theme css.style file.

This is because of the way the visual editor inserts CSS style codes in this version of the visual editor.

Here is a none captioned image entered with an align right selected.

I disabled the CSS image handling built into the Cutline CSS file by commenting it out.

Here are the two code sections from teh default theme in case you don’t want to go get these yourself.

Image Handling Code

/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}

/* Using ‘class=”alignright”‘ on an image will (who would’ve
thought?!) align the image to the right. And using ‘class=”centered’,
will of course center the image. This is much better than using
align=”center”, being much more futureproof (and valid) */

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;

display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}
/* End Images */

CSS for Image Captions

/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-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;
}
/* End captions */

Why I hate WordPress 2.6 in less than one minute

It looks like I’m stuck using the “Add media” button in this editor which means:

• the insert image function is much slower than before
• the custom changes I talked about adding everything but the image file name won’t work so you have to type in the entire URL to the image once again. (I really loved this custom feature) I might have to take time to find out if I can make this work again.

One last little goodie. If you use the keyboard shortcut to add header tags (which I always do) you will find that now the visual editor doesn’t set it back to paragraph like it used to. It still is set to Header 3. So you either have to shortcut, or mouse to paragraph. The other work around is to write your post then come back through and put your header tags in place.

But I shouldn’t have to change the way I write and edit because of a new WordPress landmine. More to come on WP 2.6