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      

Log into the Website Admin Panel.

Click on the HOME menu on the left-hand side.

Over on the right hand side is the Set a Featured Image selector.


Click the existing image to open the media library.  Either choose an existing image from the media library or upload a new image using the upload files tab.


Select the picture you want to use, enter a description to this picture under Alt Text to help your any visitors to your site with vision impairment to be able to use a screen reader, and then click "Set Featured Image for this Home Page".






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

    • The images associated 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 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 ...

    • 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 ...

    • 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 ...

    • Adding and editing phone numbers on homepage

      Overview Your website has the ability to display three different phone numbers; Phone Number Mobile Number Whatsapp Number To change the numbers; Log into the Admin Panel Select the General menu Scroll down to the numbers section and make the edits ...