Overlay images

A graphical way of linking one page to another

Overview

Overlay images are used for linking one page to another, usually on landing pages. They are displayed as a link in a semi-transparent box overlaid on an image. The link text comes from the Link title field of the page that is being linked from.

Overlay images should be 480 x 320 pixels in size
Example
family fun

Family fun

WCMS use
  1. Set your image to the correct size (480 x 320 pixels) if it isn't already. You will need to do this in an image editing tool.
  2. Upload the image into the Media Library. Save the image in an appropriate folder according to the area it belongs to
  3. In Content Editor, locate the page that should be linked from and go to the Link image field. Browse to your image and add it. Save. You can now add the overlay image to a page of your choice.
  4. Open the page in Experience Editor. Click in the required rendering and click the add here button. Select a link grid. You can select a four column, three column or two column grid.
  5. In your grid, click on the first column. In the placeholder, select the add here button. Select Overlay image.
  6. You will be asked to select associated content to the overlay image. Choose an existing page or link item to link to, or create a new link item from the content tree.
  7. The Image, title and URL are all set as properties of the linked page or linked link item. For more details on setting up link items, see link basics
MVC.net use
Code

<a class="overlay-image blocklink">
	<img src="" />
	<h2 class="caption bottom">Eclipse BRT</h2>
</a>	
Version and status
  • 1.0
  • current version
  • Concept
  • Alpha
  • Beta
  • Release