Now that we have set the Content and Sidebar width and the Font sizes, the next thing we are going to do is add a header image to this Thesis 2.3 website.
Difference Between the Header Image and Logo
Chris, would you like to describe the difference between the header image and the logo?
Logo as Title Replacement
Chris: Yes. A logo is essentially title replacement. So if we are talking about the elements on your website where the title of your site is printed out like in the example you have up, that “Introduction to Thesis 2.3”, that text is going to get replaced by your logo graphic if you choose a logo.
But the text beneath that, “Learn How to Build Your Own Website with WordPress and Thesis 2.3”, that’s known as the tagline. If you use a logo, the tagline is still going to be there. It’s all going to look the same except for that big headline text is going to be replaced with your logo.
Header Image Replaces as Replacement for Header
A header image is fundamentally different from a logo in that it completely takes the place of whatever was formerly occupying your header. It’s like a complete overhaul. Insert this, get rid of this. And it’s intended to be an image replacement for a header.
It’s kind of an antiquated, legacy technology that we’ve kind of carried along with us forever. It’s something in action that is intuitive to many people who maybe aren’t super familiar with building a website but they think “Oh I’d like to put a big image here” because they’ve seen it so many times before on other websites. It’s just kind of a basic action that seems to make sense to a lot of people.
Not all of our skins have that header image functionality. It’s not always appropriate to the design, I think.
Rick: But I think it is appropriate in Thesis Classic so we’re going to add one.
How to Add a Header Image
The first thing you need to do is figure out what size you want. Because there’s nothing else that is going to go up here by default you probably want it to span the entire distance.
Use Chrome to Find Header Size
One very easy way to know what size that should be is by using a Chrome feature. You can right click and choose inspect element up here and then follow the HTML up like this.
You’re going to want to the image to essentially to match the overall width of the menu. Follow that line. If you come over here and put your mouse on the right hand side, over the menu, then you can see in the upper left corner pops this 1064×34. 1064 is the width of the image.
That’s how you decide how wide your image should be if you are using a header image that you intend to span from one edge of your webpage to the other.
What if Image is Bigger or Smaller Than the Space?
If you put an image in that is bigger than the space then what will happen is it will scale the image down to fit inside the available dimension. If you put an image in that is smaller than that it’ll sit off here to the left hand side and fill up whatever space it has. That’s the typical behavior of the header image.
I’m going to select a header image here. Here’s one that’s smaller. This header image is smaller, it’s only 897 pixels wide and if we reload the site you can see it sits over here on the left hand side and continues but does not fill up the entire width.
Now notice how you still have the site title and tagline available here. That’s with the header image. If we did this as a logo, the site title would not be there and this would be on top of the tagline. It would still stay the same size.
Clear Caching to Review Change
Chris: You need to hit shift + refresh because that’s not rendered the updated CSS which changes when you select a header image. In Classic Responsive it’s supposed to suppress the title and the tagline.
Rick: There it is. I needed to flush GoDaddy. I didn’t recognize that for what it was. So, this is what the header image looks like now. I hate developing with a cache. I like being able to turn the cache off.
Chris: If you just select the header image it will actually be padded. You know how there’s padding in the header by default? It will be squished inside that padding and the title and tagline are going to show until you hit shift + refresh, update that cache and get that new CSS file. At that point then the image will span the full width of the available space.
Some people come to us and say “my image looks grainy and crappy after I did my header image”. That’s because your image is too small and it’s being stretched out. You’ve got to make sure it’s at least as wide as the container you want to put it in. You don’t want it to be much, much wider because then it takes too long to load. And you don’t want it to be smaller because it gets stretched to fit and the image loses some of its quality.
Rick: So you are saying that this image got stretched?
Chris: No, that one ended up fine…actually I guess it didn’t stretch it. I was remembering my old code where we used to stretch it. We stopped stretching it because it was happening so much it was annoying.
Rick: I was going to say, I thought that was the underlying rationale for me making that comment is because of what happens now due to that change.
Let’s add another image here that is 1064 wide. I’ve got one here. Let’s come back over to the header image and select the image we want from the media library. Now you have the header image spanning the entire…after flushing the cache and reload it.
So now you’ve seen how to set the header image. It’s a simple thing to do.