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.  Edit the section 
  2.  Go to the 'More' tab and choose 'Metadata'
  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 - See our section on Resizing Images or Watch this demonstration video.
    For best results, you should use dark (or low-key) images.
  • You can link to a section or content by choosing either the 'Add section link' button or 'Add content link' button, a Select section popup of the site structure will appear - select the section/content you want to link to. (Be careful not to click on an incorrect section name)
    will appear for you to Fill in  either 'Link URL' or 'External URL'. 
  • If you wish to link to an external (Non- t4) page, leave 'LInk URL' completely alone and add the external link in the 'External URL' field.

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 called 'Righ-Justify hero carousel background image'.