Adding a Short Header to a page

The Short Header appears at the top of the page. It displays a title for the page over an engaging image:

To add a Short Header to a page, you must:

· Add images to the media library (or using existing images)

· Add Short Header image items to your web site’s site data folder (or use existing items) · Select the Short Header image items and text on your web page

Add images:

1. In the content editor, go to the Media Library by clicking its name below the content tree:

The media library contains a folder for everything related to your area (eg FABLE, Science etc). Under this folder are subfolders related to each type of module which uses images. More folders may be added over time, as new modules are developed.

2. So, to add images for a Short Header in FABLE, you will need to navigate to:

For the Short Header, you will need to add a new image for desktop and for mobile.

TIP: For desktop, a 1920 x 432 pixel image is required. For mobile, an 800 x 864 pixel image is required.

3. For Desktop image, right-click Desktop then choose Insert > Upload File:

4. Use the ‘Upload File’ dialogue to browse to an image you have saved on your computer, and press upload:

The image appears under the Desktop subfolder:

You will receive notification of ‘1 warning’ because the alt text field of the image is so far empty. You can ignore this warning and leave this field empty, since images in Short Headers are decorative rather than informative, and therefore do not require alt text.

TIP: Short Header images will have large title text and optional smaller introduction text sitting over them. Text over images often causes legibility problems, so simple, bold images are best.

5. If the file name you used when saving your image isn’t appropriate (eg ‘best_image_final_final’), you can change it now, by right clicking on the image asset and selecting ‘Rename’:

TIP: Use file names which are brief but descriptive, to help you and other users quickly recognize and search for the image later.

6. Repeat these steps to add a mobile image (800x864) to the Mobile subfolder.

7. Save and publish the new images.

Add Short Header Image items:

1. From the Media Library switch back to the Content Editor. In the Site Data folder, expand the Short Header Images subfolder, to display the Desktop and Mobile subfolders:

When creating image items for pages in your site, navigate to the Site Data folder in your own site. When creating image items for Global Features, navigate to the Site Data folder in the Corporate Site (since the image items will need to be created in this global location – not isolated in your specific site.

2. To add a Desktop Short Header item, right-click Desktop and select Insert > Image item.

3. In the dialogue, give the image a name – usually it makes sense to give it the same name as the image in the Media Library.

4. Your new item will appear in the Desktop subfolder and, to the right, you will now be able to browse to the image you previously added to the Media Library, so that this image is inserted into your Short Header Image item:

5. When you click Browse, a dialogue will appear. Click the ‘Tree view’ button in the upper right, to display the Media Library tree:

6. Navigate to the folder which relates to your area (eg Faculties>FABLE), then expand the folder relevant to your area to see the subfolders related to specific modules – in this case Short Header.

7. Expand the Short Header subfolder to display Desktop and Mobile subfolders. Then expand the Desktop subfolder, click on your image, and click the Select button:

8. Your image will now be visible as part of your Short Header Item:

9. Under the 'Image Base' heading you will see three fields

Background colour – From the dropdown menu, select whether the image's overall background colour is dark or light (If Light is selected – dark text colouring will be used for the overlaying title, if Dark white text will overlay the image)

Opacity – Ignore this field.

Focal Point – When the browser window is less than 1920 pixels in size this will decide how the image will be scaled and cropped.

10. Click save, and then repeat the process for the Mobile image.

Select the background image items and text:

1. In the content editor, browse to the page to which you are adding your Short Header.

2. Set the following data fields:

In the section ‘Page’ set:

Title – already entered above, will appear in large text over your image.

In the section ‘Short header details’ set:

Introduction – If required, you can enter additional text which will appear under your page title.

TIP: Remember that text over images can cause legibility problems. Avoid lengthy introduction text to minimise conflicts with background image details. As always, text should be concise and engaging.

Desktop background image – expand the content tree until you find your site, your Site Data folder, the Short Header subfolder, and the Desktop image you have created. Then click to select it and click the > to move it to the ‘Selected’ pane.

Mobile background image – repeat the Desktop process for your Mobile image:

9. Click save