skip to primary navigationskip to content
 

Adding an image or carousel to the top of a page

You can add an image or carousel of images below the main navigation on your home page and other pages within your site. These can have captions and can be linked to other pages on your site or external sites.

A carousel is a type of portlet. To add one to a page, select 'Manage portlets'. Then select 'Add portlet' and 'Carousel image portlet'.

For the image, click on 'Browse ...' and select an image you have uploaded to your site. Images need to be a specific size:

  • 883 × 431 on a home page
  • 590 × 288 on a second-level page.

When you save your images, it's best to clearly indicate in the file name that they are intended for use in a carousel, so that you can find them easily.

You can add a caption to the image. This will appear in a black band overlaying the bottom 50 pixels of your image, so make sure this won’t obscure anything essential in the image – for example, a sign or other text.

Add an image title and alt text for your image. The former will appear when the pointer hovers over the image. The latter is required for accessibility, and should be a useful description for those who use a speaking web browser.

You can also add a link for the image. This is where the user will be taken in they click on it. It could be a link to a page on your site, which you can add in the ‘content item’ field by clicking on ‘browse’ and selecting a page from your site contents. Or it could be an external link, which you enter in the ‘external url’ field. Remember to include ‘http://'.

Then click save. Your first carousel item will appears under ‘Portlets assigned here’. You can go ahead and add another carousel item by clicking on ‘add portlet’ and repeating the process.

When you have more than one image, navigation arrows will be overlaid on the bottom right of your image. This is another aspect to bear in mind when cropping your photos.

From the ‘manage portlets’ screen, you can delete, temporarily hide and change the order of your carousel images. 

When users arrive at your page, it will always display the first image first, and slowly cycle through the items on your carousel. It’s usually best to keep the number of images fairly small – for example, three or four.