Header Background Images (Slate and Hemingway Themes)

The Slate and Hemingway themes provide for a header background. These header background images are a 'design feature' that is not meant for informational purposes. The images that need to be used are images that add a design aspect to the site and not site information banners. For example, you would want to use a photo of a bookshelf full of books rather than a banner that has the library phone number and office hours. The reason is, as the viewport size of the browser gets smaller, the image will 'flex' and the specific titles and information on a banner may not be legible. These themes will put your site title and site logo over the top of the banner images as well so having the information in the header twice won't look as nice.

Good Banner Example:

Bad Banner Example:

How Do you get Good Quality Images?

We all would love to become professional photographers but most of us specialize in something else. We recommend that you find free stock photography that is available on the Internet. A site that has many royalty free, high-quality images for download is unsplash.com. Doing a search for the term 'books' comes up with over 200 images that you can download and use for free.

For this example, we will use the following image: https://unsplash.com/search/books?photo=-9C3TMXwQjQ by Jamie Taylor. 

Whatever image you use, for this FAQ, we will assume you have it somewhere on your local device/hard drive.

How Do I process this Image?

There are many tools you can download or buy to crop and edit your pictures. One free online service that works really well is pixlr.com. For the rest of this tutorial, we will use Pixlr to crop and resize our image. The process is much the same no matter what image editing tools you use.

1. Open your browser to pixlr.com.
   You want to use the new version pixlr X this version does not use flash
   
   
   
   
   If you click on the old version of pixlr you will see this alert. Select to use the non flash version indicted by the arrow.
   
   
   
2. Upload the image you want to use to pixlr.com by clicking on the browse icon and then selecting the image from your local device.
3. You should see your image in Pixlr. Click on the Adjustment tool. We need to resize our image because it is much too big for our site. Most images from digital cameras and stock photography sites are fairly large and need to be reduced. Our maximum recommended width for our site header images is 1200px.
4. Click on the Resize tool and then type in '1200' in the width box and click Apply.
   

   
   
   
   

5. You can zoom in on your resized image with the zoom tools in the upper right:

   
   
   
   

6. We now need to crop our image to be about 400pixels high. With the Adjustment tools open, click on Crop.
   
   

7. Type '400' in the Width box and then position the cropping grid box where you think your header image would look best:

   
   
   

   
   

8. Click Save, name your image, and then click Save again. Your image is now ready to be uploaded to your site. Follow the directions below to upload your header image.
   
   

   

   Edited header image after being uploaded to a website using the Hemingway Theme.

Theme Banner Instructions

1. Make sure you are logged into your site.
2. You need to upload the site header image. To do this, Click on the Site Admin link (in Hemingway it is the gear icon () and select Site Configurations.
3. Scroll down to the Set Home Page Header Image field and click the Choose File button.
4. Select the image you wish to upload. Click on the Apply button.
5. Navigate to your homepage and you should see your image in the header of the site.