Hero Unit

UPDATED on May 29, 2018

Summary: The Hero Unit snippet provides an easy way to add an image with an overlapping, pre-formatted text box at the top of your page, without having to write html code from scratch. Once placed on a page, the Hero Unit becomes part of the page's content.

Examples of Hero Units:

• see Northwest Voices page
• see Art Gallery page
• see Community Conversations page

Preparing Image for Hero Unit Snippet

You must prepare your image to exact specifications before uploading to OU Campus and placing in Hero Unit snippet. Instructions for Hero Unit image dimensions featured at Image Size Guide help topic. Image editing software and knowledge of pixel dimension  required to prepare Hero Unit image. Contact your Web Coordinator or LCC's Graphic Designer for assistance.

Uploading and Storing Hero Unit Image

• Upload your image into the Assets/Images folder in the section you are working in.

Accessing Hero Unit Snippet

• Login to OU Campus and check out page.
• Click green edit button to enter editable region.
• Click 'Show Gadgets' icon at top right of page.
• *Click 'Snippets' drop down to display available snippets. Sort by 'all', or by 'Table Transforms'.
• Select 'Hero Unit'.

Preparing Image for Hero Unit Snippet

• To add an image, format it appropriately, then upload it into the Assets/Images folder in the section your are working in, then use the 'Insert Image' icon to navigate to the image, and add it via the dependency tag.

• To make an image mobile responsive (so it shrinks proportionally in mobile environments), select the image, then click the 'Insert/Edit Images button, then select the 'Appearance Tag', the select 'Mobile Responsive Image' from the drop down in the 'Class' field.

Inserting Hero Unit Snippet

• In edit mode, place your cursor on your page where you want to insert the Hero Unit.
• Click 'Show Gadgets' icon at top right of page.
• Click 'Snippets' drop down to display available snippets. Sort by 'all', or by 'Table Transforms'.
• Select 'Hero Unit'.
• Dialog box showing layout for Hero Unit. Click 'insert'.
• Hero Unit will be placed on your page.
• Replace placeholder image, pre-title, title and content with your own content.
• Save and submit for publish.

Example of Unmodified Hero Unit Snippet