How to Format Your Images with Copyblogger

Ace as a puppy

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="left" and 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:

  1. <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:

  1. <img class="left" src="http://path/to/your/image" />

Biggie as a puppyIf 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).

  1. <img class="right frame" src="http://image/path/" />

Ace the sleeping puppyIf 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 left or right class, allows you to stack images side by side if need be

55 comments ↓

#1 kokos on 12.21.09 at 7:40 am

Ever since I tweaked the custom.css text doesn’t wrap around my images anymore. That is, only the image shows up on the line with other text or images above or below it, not beside it. Any suggestions?

#2 GTinLA on 01.13.10 at 4:41 pm

Hi Chris,

Thank you for this phenomenal theme! How would I go about getting captions into my images like you did, i.e. BIGGIE 4/15/07. I looked into the CSS files of the theme and the source of this page, but couldn’t spot how you did that?

Thanks for the lesson!
G

#3 Dizzy Dee on 11.11.10 at 6:12 am

This is definitely the most “awesome-est” theme EVER 🙂

#4 Person from Texas on 01.20.12 at 3:07 am

Hello! I’ve been following your web site for a long time now and finally got the courage to go ahead and give you a shout out from New Caney Texas! Just wanted to say keep up the fantastic job!

#5 Pano Kontogiannis on 05.27.12 at 9:45 am

Nice theme, I’ll give a try