• The Previous Posting

  « WordPress, Fatal error: Allowed memory size of 33554432 bytes exhausted

• The Next Posting

  Enabling HTML in Magento Terms and Conditions »

How Do I Specify a Class For IMG Inserted With Visual Editor…

The fol­low­ing is in response to a ques­tion on WordPress.org. We’ve become extremely pro­fi­cient with word­press in the past few years, and we’re always com­ing up with inno­v­a­tive ways of using this amaz­ing prod­uct. We try to post most all our fixes, hacks, and tricks, in the hopes that it will prove use­ful to some­one. Hope­fully this will be no different.

When you say Visual Edi­tor, are you say­ing you don’t have the abil­ity to choose HTML view in your posts? If so thats a whole nother prob­lem. But if you do have HTML view, read on.

I don’t know why no ones answered this yet. Its actu­ally really sim­ple. All you need to do is style your images in you style sheet. Here’s a few examples.

If you don’t have an img class setup in your style sheet, you should first add some­thing like…

1
2
3
4
5

.entrybody img{
   margin:0;
   padding:0;
   border:none;
}

Note, The div class on my posts is entry­body, yours may be dif­fer­ent. Also this will style every image, in all your posts.

Next to style your images dif­fer­ently, ie. float left, float right, etc. You’ll want to use a class selec­tor, as follows.…

1
2
3
4
5
6

.entrybody img.leftfloat{
   margin:0 10px;
   padding:0;
   border:none;
   float:left;
}

Now to call to this class selec­tor in your post, your img tag will look some­thing like this.

1

<img class="leftfloat" src="http://www.yoursite.com/wp-content/uploads/2009/08/myprettyimage-150x150.png" alt="MyPrettyImage" title="MyPrettyImage" width="150" height="150" />

I real­ize the orig­i­nal poster asked for this almost a year ago, but I’m sure it will still prove help­ful to someone.