Home › T4 Training▻Training▻Training Examples▻Widescreen Landing Page Hero Carousel

Widescreen Landing Page Hero Carousel

See how this content type looks in different page types:
With Rightbar, Without Rightbar, Widescreen, and Ultra-Wide (sub-site) / Ultra-Wide (top-level) pages
or else
Normal, Widescreen, and Ultra-Wide (Sub-Site) / Ultra-Wide (Top-Level) Landing pages

Note: You change a page's width (and other options) using its section's DC.Keywords field - see my interactive demonstration for full information.

Widescreen Hero Images

Works best on widescreen pages.

To make a page widescreen,:

  1.  Modify the section 
  2.  Go to the 'Metadata' tab
  3.  In the DC.Keywords field, enter 'fullWidth subSite'

Make sure you include a 'Widescreen Navigation' content type  in the page to replace the sidenav that will not be visible.

Instructions

1. Add a 'Widescreen Landing Page Hero Carousel' content type to the page you want the image(s) to appear in. 
This is the container that will will show any widescreen hero images you add to the page.

2. Create a sub-section called 'Widescreen Hero Images'

3. In the 'Widescreen Hero Images' sub-section, add up to 5 'Widescreen Hero Image' content types (you can add more but very few people will wait to see them).
Each time you add a 'Widescreen Hero Image', do the following:

  • Give it a name
  • Select an image from your hard disk (not the media library).
    Have a 1600 x 500px, 96dpi, JPG image prepared - Read these instructions or Watch this demonstration video.
    For best results, you should use dark (or low-key) images.
  • Fill in  either 'Link URL' or 'External URL'.
    If you wish to link to an external (Non- t4) page, leave 'LInk URL' completely alone - i.e. Select nothing and do not give it a custom link text.
    If you wish to link to a t4 page - leave 'External URL' completely blank.

play icon circular tealTuition Video

A note on background images

This content type was designed for use with background images.   At different screen sizes, the edges of the image may not visible.  This is because it is automatically sized wider than the available space so that its height will take up the entire space needed for the background image.

A trend has emerged where editors are using background images with text / logos on them.  These logos may be partially hidden, due to this automatic 'cropping' of the image.

For this reason, it is possible to duplicate some content into your page that will right-justify the background images displayed in the widescreen hero carousel.
You can find the content to duplicate into your own section in NUI Galway » T4 Training » Training » Training Examples » Widescreen Landing Page Hero Carousel.