How to: Create Full-Width Post Images in Thesis

Images are one of the most important elements a blog article can have. Every post you write should have some sort of illustration or picture to capture the reader’s eye, and more importantly — bring your content to life.

Thesis makes it very easy to add images to your posts, and even comes with some great formatting options. One reader emailed me and wanted to know how he could take his image formatting a step further.

Hey, I’d like read a tutorial on how you make your post images span the full width of the content area? Like you have on Blogussion.

By default, Thesis adds a margin around the post box so that the text and images do not touch the borders of the #content area. With just a little CSS however, we can hack around that and create full-width images like you will see on Blogussion.

Step 1: Figuring out the Width of the Image

The first and most important step is finding out the dimensions of the image. You have to be pixel-perfect, spot on here because the image needs to be as wide as the content area.

Design Options, Content column width

The width of my content area is 633

To do this, go into the Thesis Options page, and then to Design Options. Look for the width of your content area and keep a note of it.

Now, add 23 pixels to that width. Thesis adds margin and padding to separate the content box and sidebar from one another, so take the width of your content column and add 23 pixels to it.

So, the width of my post image will be 653px. You can make the height anything you want (I’d recommend around 100-120, but you can go as big or small as needed).

Step 2: Change Image Settings

In your posts panel, go to the Thesis setting “Post Image and Thumbnail” and change the options on the post image to the settings on the right. This will position your image above your post and center it.

Teaser Settings

Note: These are your post image controls, NOT teasers!

You can also insert your post image and ALT text here too.

If you want to change the options for every post image on your blog by going to Design Options → Default Post Image Settings.

Step 3: Adding a Little Style

We now need to remove the extra margin I talked about in the beginning of the post. If you try adding an image now, you will see that it breaks outside of the content box (as shown below).

An image breaking out

Ewww (click image to see bigger size)

So, open up custom.css and add this little line of code to your style:

[css]
.custom .headline_area .post_image.aligncenter { margin: -2.2em 0 2.2em -1.1em }
[/css]

This code takes away the top and left margin Thesis adds, as well adds some extra margin to the bottom to separate the image from the headline.

Resources for Finding Big Images

Since these images are usually pretty big (width wise), it can be hard to find a well-sized image to fit this new post format. Here are the resources I have used for the past year (ever since I started formatting my images like this) to find decent sized images:

  • Tip: Make your own in Photoshop!
  • Search Flickr (always check the Creative Commons box)
  • Believe it or not, Google Images isn’t bad.
  • Tip: Use Photoshop or another image editor to resize images (DO NOT let your browser resize it!)
  • stock.xchng
  • Creative Commons (searches multiple sources for ready-to-use images)

7 comments add yours

  1. Whoa! Pretty nice.
    I tried it, and it worked perfectly, I just had to change:
    margin: -2.2em 0 2.2em -1.1em to
    margin: -1.5em 0 2.2em -1.1em
    Thanks alot Alex for this great Tutorial.

  2. Neat! Just headed over to blogussion and I really like that kind of styling. Looking forward to trying it out sometime soon. I always tend to stick my lead images after the headline so thanks for the inspiration. 🙂

    • Putting the post image on top like this makes the post looks so much more bolder IMO, but it’s sometimes a pain to find the images for them.

      Glad you liked the tutorial though man. 😀 Keep up the good work at your blog.

  3. Indeed some one mailed you before me I was thinking to ask you this. Really you are a Thesis Rockstar 😉

Leave a Comment