Build Your Own Business Website header image

Thesis 2.1 Launch Party – Part 4 – Add a Header Image to Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

We’re going to continue to customize the Thesis Classic Responsive skin. And now what we’ll be doing is adding in a header image. But I want Thesis to tell me how big that header image is.

Thesis 2.1 can now Recommend a Header Image Size

Thesis 2.1 comes with this new header image feature and based on how wide your columns are, it will tell you what the recommended header image size is. Unfortunately, this calculation isn’t working right in Beta 11, but it has been fixed for the next release. As you can see here it’s not showing the right number.

The right number is the sum of those two columns. Let’s go back over to Design and look at these two columns at 634 and 354 which is a total of 1008. That’s the actual width and when the next version comes out, that’s what this will say, the ideal header image is 1008 pixels wide instead of 897.

Add Header Image via the Media Library or Upload

Anyway, I’ve got 1008 pixel wide header and I want to use it so I’m going to select my header image and you see it brings up the WordPress Media Library. Now, if you’ve already got this thing sitting in your Media Library, it’s no big deal, you can just pick it from the Media Library. But I need to upload it so I’m going to select upload, select my file and then go to where I have this thing stored.

Header Image Automatically Links to Home Page

I’m going to install the 1008 version of the image. Now that I’ve done that, you see it says Set Header Image, I don’t have to do anything over here, I can just set the header image and if I refresh my page, now the header image is here and it is automatically clickable. So if I click it, it’s going to take me back to my home page.

Responsive Behavior

If we just take a look at this in the Responsinator, you can see that the header image scales to fit the space. So that’s one of the really cool things about this Thesis Classic Responsive Skin, is that the header image scales to fit the space.

What Happens when the Header Image is too Big

Now, that’s putting the header image in the right size, 1008 pixels wide. What happens if you put a header image in that’s too big? Well, let’s go ahead and upload one that’s too big, we’re going to upload one that’s 1400 pixels wide, that’s this one right here.

If we set the header image, you can see the header image is 1400 pixels wide by 270 pixels tall and what it does is, it shrinks the image down so that it fits in the space. This is a 1400 pixel wide image but it’s been shrunk now into the 1008 pixel wide so it doesn’t crop the image off, it scales the image down. Let’s look at it in the Responsinator, you can see the same thing happen, it just got scaled down.

What Happens when the Header Image is too Small

Now, there’s one other case and that’s what happens when the header image is smaller than the available space. I’ll pick this one here, this one’s only 293 pixels wide so we’ll come back and take a look at it. In this case, it makes the full size and it leaves a whole bunch of space over here.

Now, notice what happens in the Responsinator, that space goes away. If it doesn’t fit in the space then it’ll get shrunk down but doesn’t shrink. You can see it did shrink here right because this is only 240 pixels wide so it’s smaller. The image shrinks if it has to and otherwise, it leaves the space.

So those are the various conditions that exist for this header image. We’re going to switch back over and just select the header image that actually fits the space which was the main intention here all along. Perfect.

2 Comments… add one
2 comments… add one
  • Mohamed Hassan October 6, 2014, 8:17 am

    This is amazing! A real, productive tutorial for us, beginners. Your work is helping us. Thank you.