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 Mark Mathson on 05.25.07 at 4:28 pm

Very good way to do this, efficient and clean.

Any suggestions on how to credit a photo with text right below image to someone (ie. link a photo with CC license from flickr)?

#2 Ryan on 05.25.07 at 4:33 pm

That cleans things up a ton. Thanks Chris.

#3 Donna B. on 05.26.07 at 12:40 am

Hello, this comment section takes a long time to load. Is that just because this is a sample site? Thanks.

#4 Chris P. on 05.27.07 at 12:14 am

Donna B. — You may have caught the server at a bad time, because everything tends to be pretty snappy.

#5 Chris P. on 05.27.07 at 2:57 pm

Mark — Captions are a tricky subject, and they require special treatments depending on the location of the picture. Centered pics are probably the easiest to caption because you can theoretically eliminate a div that would otherwise be necessary to envelop both the image and its caption.

On Pearsonified, for instance, I’ll caption centered pictures by wrapping my caption text in <small> tags. I’ve coded up those tags to appear gray, so the text does not look like part of the article [example].

I’d also like to note, however, that I apply a custom class to my captioned images as well. The cap class creates a much smaller margin beneath a centered picture so that the caption appears “married” to the image rather than spaced out like normal paragraph text.

Captions are really an element that beg for treatment on a site-by-site basis, although I do think I could probably come up with a good solution for captions from Flickr… It’s something that I’ll keep in mind for the next release.

Thanks!

#6 Mark Mathson on 05.31.07 at 3:34 pm

Chris-

Thank you for your helpful tip. Appreciate you taking the time…

#7 Ashwin on 06.02.07 at 8:36 am

When we use the class= stuffs then in the feeds, it’s not displayed properly. I guess we need to use the align= thing.

Or is there any way around?

#8 Chris P. on 06.02.07 at 11:28 am

Ashwin — Some feed readers will display the images properly, and others will just ignore the classes entirely. A lot of readers are moving towards a standardized picture markup structure (which is badly needed), but for the time being, you can test the align attribute to see if that renders the way you want both on your site and in a reader.

Honestly, I don’t know if an applied class will override an align attribute, but that would certainly be interesting to test. Also, for the record, I hate the way images render when only an align has been applied—0px of padding between an image and text is hideous.

#9 Peter Beck on 06.04.07 at 2:55 pm

Even though it seems a “violation” of the basic theme structure, is there any (easy) way to have a header image be part of Copyblogger, the way it is in Cutline (randomly generated or no)?

#10 Eric Thoolen on 06.09.07 at 2:36 am

Finally someone who puts a little effort to get images lined up properly and even with some choices, hehehe! Thank you Chris.

#11 The Piker on 06.12.07 at 1:40 am

Hey Chris,
Your theme looks great, I am planning to shift to it but I have one question here.

I am currently on K2 which supports inline asides. Does your theme support inline asides? (I mean having them on the main body of the blog itself instead of the sidebar)

#12 links for 2007-06-22 — Julians.name on 06.21.07 at 11:19 pm

[...] How to Format Your Images with Copyblogger — Copyblogger Theme Copyblogger wordpress theme image handline guidelines for css classes (tags: css wordpress wordpress-themes copyblogger-theme) Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

#13 Chris P. on 06.21.07 at 11:35 pm

Peter — One thing that I haven’t toyed with yet is the idea of removing the red and black bars from the top and bottom of the theme. My primary reason for doing that would be to add a rotating header image like the one you’re suggesting, and in all honesty, it wouldn’t be that difficult to add.

Randomizing those images would also be quite simple, as you would only have to involve the use of a PHP randomizer script, which is essentially just a couple lines of code.

At this time, though, this is something you’d have to do yourself. I’ve been meaning to set up a theme mod repository where people can submit their mods for the community at large, but I just haven’t done it yet.

Hopefully when that time comes, solutions like the one you’re after will be readily available.

#14 Chris P. on 06.21.07 at 11:38 pm

Piker — Right now, the theme doesn’t support inline asides in the manner that you’d probably like to see them (styled differently from regular posts). They would, however, appear in the main stream of content. Accommodating these is something I always wanted to do with Cutline, but I always strayed away from it because users have to create a category specifically named “Asides” in order to make it work.

Sounds simple enough, but these are the critical steps where things can go wrong.

Either way, though, I think asides are a great thing to include in any theme, and I will likely add those in the next release. Thanks for the heads-up on this, too!

#15 Blog Theme Standardization | blog rumble on 06.22.07 at 7:21 am

[...] thing about this theme is the ability to align pictures easily. This feature is also found in the Copyblogger Theme. There was no hint given by the designer though so I experimented with what was taught by Pearson [...]

#16 larry on 06.29.07 at 2:53 pm

I am new to blogging. I’m not even sure how to setup a blog site. Can I still use copy blogger? I like the looks of it and hope to help with sales on my website.

#17 JHS on 07.01.07 at 2:46 am

OK, I officially love this theme and am now using it on my newest blog.

2 questions: When I uploaded and activated it, why did I not end up with the RSS graphic in the upper right?

Also, is there a way to have an image in the header?

Thanks in advance . . . I’m new to WordPress, switching everything over from Blogger.

#18 Chris P. on 07.03.07 at 1:00 pm

Larry — If you use the WordPress CMS to run your site, then you’ll be able to use the Copyblogger Theme.

#19 Chris P. on 07.03.07 at 1:27 pm

JHS — Perhaps the entire contents of the images folder were not loaded onto your server correctly.

Second, yes, you can include an image in your header. Check out comment #76 over here for more direction.

#20 Blog Theme Standardization | Blog Gigs on 07.07.07 at 2:41 am

[...] thing about this theme is the ability to align pictures easily. This feature is also found in the Copyblogger Theme. There was no hint given by the designer though so I experimented with what was taught by Pearson [...]

#21 Ave Satana WordPress Theme on Ave Satana on 08.07.07 at 3:17 am

[...] notes on image alignment can be found here.  Did you enjoy this article? Enter your email address to receive more like it straight in [...]

#22 Jerome on 08.31.07 at 10:19 am

Chris – Love the custom image formating tips. Saved me time and cleaned things up nice.

#23 Angel on 09.17.07 at 1:15 am

Hi! I’ve read all the comments and I know you said that you are still working on the captions part… but I was just wondering.. if there is a way for the text wrap to work and still have a caption done below the image.. I used the tags to put caption but I didn’t like effect since the text wrap didn’t work..
Anyways, thanks for all your effort in tweaking your theme.. we are using it for our online magazine.. but we haven’t formally launched the site.

#24 Angel on 09.17.07 at 1:17 am

oopss.. sorry.. typo on the comment. what I meant to say is I used the table tags to put caption..

#25 Onur Orhon on 10.01.07 at 9:28 pm

Hi. Could you give an example of how to use the stack class?

Thanks, -onur

#26 Chris P. on 10.01.07 at 9:39 pm

Onur — Although these instructions are for the Cutline theme, the “stack” image class works exactly the same way in Copyblogger.

Be sure to check them out.

#27 Onur Orhon on 10.01.07 at 10:02 pm

Thanks for the link but unfortunately I wasn’t able to make it work. I omitted “off” from the example, thinking the frame is off by default for copyblogger. So the code looks like:

The left right positioning works fine, but the two images are stacked on top of one another, and text is running between them. If I don’t use any text, then I see the text from the comment fields at the bottom of the page (eg. Leave a comment, etc.)

I’m sure I’m doing something wrong, but what?

Thanks, -onur

#28 Onur Orhon on 10.01.07 at 10:07 pm

For some reason the code in my previous comment didn’t show up, probably due to formatting in the comments. Let me try to cheat by posting without the tags:

img class=”left stack” src=”image_url” alt=”image alt text” />

#29 Onur Orhon on 10.02.07 at 10:59 am

Chris, any updates on this? I’m sorry but I really need to stack two images side by side for my next post and I can’t figure it out. Could you post the exact code you used for the two images on the cutline theme page?

Thanks, -onur

#30 Career Counselor on 10.24.07 at 1:20 pm

help! I’m considering using the copyblogger wordpress theme because it’s awesome! I’ve been playing around with it and I’m stuck on something trivial. How can I link a picture to another page without the picture appearing underlined? Is there anywhere in your code where I can eliminate decoration for linked images?

Many thanks!

#31 WordPress: Image Alignment In Code View Part II — New Hampshire Real Estate with Jay McGillicuddy on 11.16.07 at 10:25 pm

[...] I was reading Cheryl Johnson’s post WordPress-Image-Alignment-In-Code and thought that was a good way to align pictures.However, when I went to add another theme to my already list of twenty thousand themes in my wp-content themes folder I found a pretty slick way to make the images align a different way. I have learned a lot by going to Chuck Pearson’s blogsite. [...]

#32 Nihar on 12.14.07 at 3:42 am

Hi,

how easy/difficult it is to take this copyblogger theme and add a new sidebar on the left. I like this theme very much but i need one more sidebar. I need help on this.

Thanks,

#33 Joe on 12.29.07 at 5:17 am

Wow, I wish I knew this about 3 months ago. This makes the posts look much much much better. Before when I would post an image, I would get the text RIGHT NEXT to the image. This is great.. You rock!

#34 James on 01.21.08 at 3:19 am

Thanks for such a fantastic theme. I’m using it at my site. Just one question. How can I make a sentence or word align at the centre?

#35 rpoulin on 01.31.08 at 4:25 pm

Hello – i’m exploring your theme for my new blog.

To format image to right or left with frame (optional) i have added this code to the style.css file. This way the images are automatically aligned to the left or to the right with text wrapping when done with the editor (pick the image and choose Alignt to Left / Align to Right)

/* rp* aligned to left with margings */
.alignleft {
float: left;
}

.entry img .alignleft, img[align="left"] {
float:left;
margin: 2px 10px 5px 0px;
border:0.3846em solid #EDEDED;
display: inline;
}

.alignright {
float: right;
}

.entry img .alignright, img[align="right"] {
float:right;
margin: 2px 0px 5px 10px;
border:0.3846em solid #EDEDED;
display: inline;
}

Test blog is: volvosoft.com/blog

#36 Richard on 01.31.08 at 4:39 pm

Sorry: Errors in the above addresses :

Actual blog is: http://volvox.wordpress.com/
Test blog is: http://volvoxsoft.com/blog/

#37 Missy on 03.04.08 at 5:27 pm

Is there a way to add this code (e.g. align right) to the core template, so it is permanent?

Unless i’m understanding this incorrectly, this has to be done on every post, every image? There has to be a more automatic way.

Please advise.

#38 Chris P. on 03.04.08 at 6:31 pm

Missy — The align attribute is deprecated, which means that although it is supported in major browsers, it is no longer the W3C-recommended way of styling an image. In other words, using the align attribute to position an image is now the wrong way of doing things.

WordPress has not yet changed their interface to allow for the addition of classes to images (at least not in the WYSIWYG interface), so you have to actually go into code view to add the appropriate image classes.

When I first made the switch to this type of image styling on my personal site, I had a tough decision to face—edit the images in 100 posts, or just make sure that I do things correctly moving forward.

I chose the latter, and I would recommend the same course of action to anyone else. Just be sure you do things the right way moving forward, and as a result, you’ll be doing one more thing to future-proof your site!

#39 New Themes — fresh2link.com on 05.24.08 at 6:06 am

[...] and I found a site that prefer a free wordpress themes and one of the themes it’s Copyblogger. So, I see it and decide to use it for my blog and without wait for long I just download and upload [...]

#40 Mitch on 07.13.08 at 10:15 am

Is there a file to edit so that each time I add a picture the frame is automatically added?

#41 Jon S. on 07.22.08 at 9:42 pm

Ah, but I see the image styling classes don’t work in the sidebar. Is there a way to make that effective there, too?

#42 dinu on 09.30.08 at 5:52 am

Chris, It worked on posts :) thanks .. but, its not working on sidebar ? I am trying it on thesis affiliate code,

#43 Chris P. on 09.30.08 at 9:45 am

dinu — The image formatting styles only exist in the content section and not in the sidebar. If you want to apply your own image styles in that area, you should use the custom.css file to make it happen.

#44 dinu on 09.30.08 at 9:46 am

thanks Chris :)

hope you liked my copyblogger customization :)

#45 Chris P. on 09.30.08 at 9:49 am

Just checked out your site for the first time in a few weeks, and WOW! You’ve really done a fantastic job, especially with the color palette. Looks to me like you’re really getting the hang of CSS!

#46 dinu on 09.30.08 at 9:51 am

@ Chris

thanks a lot Chris.. your comment means a lot to me :) love your work :)

#47 Prhime on 10.28.08 at 8:24 am

I cannot get the align left / right to work on my site. Any advice?

#48 Greg on 01.16.09 at 4:11 pm

Hi – I’ve been trying to work with images and having problems. I want to show a row of thumbnails and then have a line break and then some text describing the next thumbnails, and when I use “left” and “stack” the text insists on wrapping to the right of my last image, no matter what I do to try to get it to be on its own line below. Any ideas?

#49 Pat on 05.06.09 at 1:42 pm

Thanks for the info… been driving me crazy. Now I’ve got it down.

#50 Ken Shim, RMT on 07.22.09 at 6:15 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?

#51 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?

#52 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

#53 Dizzy Dee on 11.11.10 at 6:12 am

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

#54 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!

#55 Pano Kontogiannis on 05.27.12 at 9:45 am

Nice theme, I’ll give a try