Now that we’ve taken a look at the default 2 column header configuration in the Agility Skin for Thesis 2, I want to review the 1 column header. And the 1 column header is kind of a specialized creation.
Add the 1 Column Header
Let’s come over to the skin editor and take this typical header out. So I have the home page and I’ll use the Agility 1 column header instead. The Agility 1 column header doesn’t have a column configuration because it’s 1 column so it spans the whole width.
You have three choices here. You can have it be empty and then drag content there just like you would in anything else. You can put a header image in or put in a widget area there. All three of those choices make the header full width.
How to Make the Header Image Responsive
If you choose header image, you have the ability to use a responsive header. So I’m going to say 1 column header here and then in this case, I’m going to come back over to the dashboard and go to the media library and I’m going to add some different header images. I’ve got that one and then I’ve got my full size one.
Now if I choose this, copy that image URL and I can just put the full size header image in here. When I do that and save it and then go to the site, obviously it’s not affecting it here because we’re on the home template but on the home template you can see I’ve put that big image in here.
Add Multiple Image Sizes for Different Devices
Now, when we get responsive at some point that big image just gets too small, doesn’t it? So when it’s down like this it doesn’t look very good. Well, if you only put one image in there that’s what you’re going to get. You’re going to get this image and it’s just going to shrink.
However, you do have the ability to add multiple images one for each size and that essentially means you got the full size header image.
Then you put another image in here for tablet landscape devices and that’s for devices that are between 1024 and 800 pixels wide which means generally what you want it to be is 800 pixels wide. That’s what you’d want the image to be. Then one for table portrait that you want to be roughly 500 pixels wide and then one for smart phones that should be really 300 pixels wide.
I uploaded those images, now I’m going to get them. Here’s my 800 pixel wide one. We’ll copy it and put it there and then my 500 pixel wide one is actually 430 pixels, I’ll copy that one and put it here. Then my 300 pixel wide image is this one and I’ll put it here and what this is going to do is display different images depending upon the width of a content available.
Now when we refresh this, we still see the great big image but now if we scale the browser down, all of a sudden we’re below 800 pixels and the image has changed out. Actually, this was below 1024, now it’s below 8, now it’s below 5.
So you end up with potentially entirely different images and regardless of what devices looking at your site, you get a decent header image out of it. That’s the responsive header image and that is available in the Agility 1 column header.
Now, there’s one caveat and that is you have to put an image in each one of these sizes. You can just put the full size header image in and that’s fine but if you’re going to put any more than the full, you have to put an image in for each of them, you can’t leave one out.
If you leave one out it fails so sometimes people will say well, this is fine for this one and this one but I want a different one for this one and this one. Well, if that’s the case you still want to fill this with the URL of the image you want to show there. If you don’t do that the system fails so something to bear in mind. That’s the way it works.
Use as Many Different Headers as Wanted
Those are the Agility smart headers and you can have as many different headers in your site as you want. You can put a different header in every template if you like and you can configure each one of them differently and it will all work the way you want them to work. That’s one of the unique elements of the Agility Skin.