If you want your blog posts to appear as polished as possible, then proper image styling is a must. Gone are the days of
align="right"—the best way to style your images is through the use of CSS classes, and the Copyblogger theme comes with a robust set of image styling options that will have you looking like a formatting pro in no time.
The only roadblock that stands in between you and these styles is the WordPress posting interface itself. You can’t apply CSS classes to image declarations from within the visual text editor, so you’ll have to switch to the code editor in order to make it happen. Don’t worry, though—it’s a straightforward process, and I’m going to walk you through it right now.
Note: this assumes you are running WordPress 2.1 or higher. If you’re not, then now is an excellent time to upgrade!
Image Formatting Examples
In our first example scenario, we want to align an image to the left, and we’d also like to have our paragraph text wrap around the image so as to maintain a clean, uninterrupted flow. You’ll start by inserting an image into your post just as you normally would, but in order to apply the proper CSS class, you’ll need to switch over to code view by clicking on the “Code” tab. A quick explanation of that process along with a visual can be found here.
Once you’re in the code view, the first thing you need to do is locate the
img tag for the image that you want to change. You should find something that looks like this:
<img src="http://path/to/your/image" />
To apply the proper image styling class, all you have to do is add the code shown in blue:
<img class="left" src="http://path/to/your/image" />
If you’ve done everything correctly, you should end up with an image that looks like the one shown here. Notice how it is not only aligned to the left, but it is also padded away from the text to produce a clean word wrap. This is a nice result, but for many images, it’s more desirable to “frame” them in some way so as to separate them from the content and just to make them look nicer in general. Fortunately, this is extremely easy to do with the built-in image styles of the Copyblogger theme.
With that in mind, in our second example, we’re going to align an image to the right and put a frame around it so that it will really stand out and look professional on our page. We’ll do the same thing that we did for the first image, but this time, we’re going to use the
right class. Oh, and in order to add a frame, we just need to add one more class declaration –
frame – and we’ll get the result that we’re after (again, you add the code in blue).
<img class="right frame" src="http://image/path/" />
If you’ve done everything correctly, you’ll end up with an image that is styled just like the one you see here. The frame is 5px wide on each side, so if you’re going to use frames, you’ll need to keep the extra width in mind. For the record, the posting area is 468 pixels wide, so if you want consistent behavior across a variety of different browsers, you should always ensure that your pictures are no more than 468 pixels wide. If you intend to place a frame around an image, just make sure that it’s no more than 458 pixels wide, as the frame will add an additional 10px to the width.
Available Image Styling Classes
Here is the quick list of image handling classes available in the Copyblogger theme:
left— aligns an image to the left, wraps text around it
right— aligns an image to the right, wraps text around it
center— centers an image, does not wrap text
frame— adds a frame, should be used in conjunction with one of the above classes
stack— should be used with the
rightclass, allows you to stack images side by side if need be