In this session we review how to add a header image to the Agility Skin for Thesis 2. We show where the header images goes and talk about how the selected column configuration affects the image. The header area will automatically expand to fit the height of the image but if the image width is wider than the available space, it will be automatically scaled. In Agility images can’t be any larger than their container.
Member: Well, I’m going to be using this theme here and what I’d like to do is place an image in the header area for the… and what I’d like to do is have the image a specific size, of course. It’s going to be 225 pixels in height. Now if I add the image under the header area, will that image auto align itself in there or do I have to specify CSS rules for the header height? Because currently, your header image is not 225 pixels in height.
Rick: This will automatically expand to fit the width of… the height of the picture.
Member: Awesome, okay. I probably should have put one in there first but I just haven’t had the time. Cool.
Rick: All you have to do is put your URL in here. Now if the image is wider than the space available, it will scale the image down so that it fits in the width. Because right now, this is divided up into 1/3 and 2/3 for columns. And we said that the header image is going to go to the left column so it’s the 1/3 width. And the 1/3 width is 320 pixels. So if your column is… if your image is 150 pixels, it’s going to scale it down to 320 and it’s going to do so proportionally so the top image… so that the height of the image will change. It won’t any longer be 225. It will be the proportional resized height based on the image being 320 pixels wide rather than 350 pixels wide.
Now if the image is 200 pixels wide and you picked 1/3 width, it’s not going to change image size at all. But in Agility, images can’t be any larger than their container or any wider than their container. So they’ll automatically scale to fit the width of the container.