Setting your Homepage Header Image

Setting your Homepage Header Image

Overview

This shows you how to add a change the image on the Home Page of your website.

Method      

  1. Log into the Website Admin Panel: logging into your website admin panel
  2. Click on the HOME menu on the left-hand side.
  3. Over on the right hand side is the Home hero image selector

  4. Click "Add Image"
  5. This opens up the media pop up. If your image is already in there go to the Media Library  and select your image

  6. If your image is not already in the media files, go to upload files and select the file that you want to use from your computer files

  7. In either case, make sure to put in the Alt Text to help visually impaired visitors to your site navigate your website.


Choosing a good image for your header

Tips for choosing a good image:
  1. Choose one that's as landscape as possible. This will mean less of the top and bottom of the image will be cropped on desktop
  2. Choose an image that's as high resolution as possible.
  3. Choose an image where the subject is relatively central to the image, so any cropping won't matter as much.
  4. Avoid using text or logos, as they may get cropped and look bad.

Header Image Behaviour

Under the Home menu, scroll down and you'll see options for how the header image behaves. You have three options to choose from:

Image Fit

This dictates how the homepage stretches to respond to different size browsers (e.g. desktop or mobile).
  1. Full Width Centered. This ensures the image will stretch out to the far left and right edges of the browser. It will crop the top and bottom of the image to make it fit.
  2. Natural Width. This will display the image in its native aspect ratio at all times, preserving all parts of the image.
  3. Content Width. This will limit the header to the width of the rest of the site. On desktop this means you'll have gaps on the left and right. On mobile, it'll most likely be full width.

Background Style

You can decide what appears behind your header image. You have 4 options:
  1. White Background. Just a blank white background.
  2. Parish Colour Background. This uses the Parish Online Green.
  3. Custom Colour Background. You can define what the background colour is.
  4. Blurred Background. This creates a blurred version of your header image as the fill.

Custom Background Colour

If you've selected the Custom Colour in the option above, you can define that here. Click Select Colour and choose from the colour palette.




    • Related Articles

    • Changing your Homepage Image

      Overview You may want to change your homepage image (hero image). Method Log into the Website Admin Panel: logging into your website admin panel Click on the HOME menu on the left-hand side. Hover over the exiting hero image; a pencil icon and a ...

    • The images associated with news items don't appear on the homepage

      For an image associated with a New Article to appear on the Homepage instead of the Placeholder image (the grey one), you need to set a featured image. Images added to the gallery or the article body will not appear on the Homepage. Follow the ...

    • Setting a Featured Image

      Overview Featured images can be added to: News Stories Pages Events Method This is the image that will appear alongside your news story. Click the 'Set featured image' link to choose your image. Accessibility Hint: Remember to enter appropriate ...

    • Setting a homepage logo

      Overview As the Header image for your website changes size depending on the size of device someone is viewing it on, it's a bad place for a council logo. That's why we've added a dedicated spot for your logo below the header. Limitations This is a ...

    • Posting a News article

      Overview News stories can be used to post information and notices to your website. Method Log in to your admin panel Click 'News Articles' in the left-hand menu Click 'Add News Article' in the submenu Replace the "News Article Title Here" with your ...