After the weird confusion in the last video about which header we were actually doing, this time we really are going to be implementing the custom header for the Deals page! This one was done by Meg Hunt.
Like all the headers, we spent some time looking at the original files and figuring out how it’s going to best sit on the page. We try a few options, but ultimately decide putting it in a confined box is best (as opposed to something like the Demos header where the header melts into a border around the content.
On exporting it, we play with a lot of the different graphic formats. This particular style, interestingly, is about the equal in both quality and file size between PNG and JPG. We output it at 2000px wide, which should look good on any screen. We also hit about 150k, which is big but for a hero graphic like this, is an OK target.
We start getting the template for deals in order, including looking at how deals are each individual custom fields that are randomized before being output. We’ll spend more time on this markup and all that later, but since we’re in this template getting things ready for the header we might as well clean it up.
We look at several different possibilities for putting the custom header graphic onto the page. A background-image makes the most sense, since we’re using a semantic
<h1> for the title and image replacement. Using
background-size, we check out
cover, but that can cause cut-offs. We check out contain, but that allows space on the outside.
100% does the trick, but we’ll need to make an aspect-ratio style box to have that work nicely. That’s easy though, we just make the height 0 and use a percentage top padding to make that work (padded box).
This is the seventh custom header we have done and every single one of them was done differently. Web design, eh? What a trip.
Tip: You can do math calculations within Spotlight – no need to launch Calculator. Cmd+C to copy the value.
Another quick tip, you can crop whilst preserving the original image.
When you have the crop tool selected, in the top toolbar is a checkbox ‘Delete cropped pixels’. Simply un-tick this. That way if you need to access a part you ‘deleted’, just click the crop tool and stretch out.
Wow, how am I learning this for the first time.