This update to the framework includes the new banner options of Video, Text Overlay, and Text + Image (50/50). The update also includes new image sizes for Image banners. Learn more about the banner options on the Web Style Guide. For information on using the new banners, see the banner documentation.
Step 1:
In the Administration area of your site, locate the data definition for Page - Standard.
Edit the data definition in XML.
Locate the XML for the banner.
Step 2:
Replace the banner XML with the following XML:
<group collapsed="true" identifier="banner" label="Banner">
<text default="-" identifier="type" label="Type" type="dropdown">
<dropdown-item value="-"/>
<dropdown-item show-fields="banner/image, banner/tablet-image, banner/mobile-image" value="Image"/>
<dropdown-item show-fields="banner/header, banner/subhead, banner/link-label, banner/link-internal, banner/link-external, banner/background" value="Text"/>
<dropdown-item show-fields="banner/mp4, banner/webm, banner/fallback-image, banner/mobile-image, banner/transcript" value="Video"/>
<dropdown-item show-fields="banner/content-position, banner/image, banner/tablet-image, banner/mobile-image, banner/header, banner/subhead, banner/link-label, banner/link-internal, banner/link-external" value="Text Overlay"/>
<dropdown-item show-fields="banner/image, banner/tablet-image, banner/mobile-image, banner/content-position, banner/header, banner/subhead, banner/link-label, banner/link-internal, banner/link-external, banner/background" value="Text + Image (50/50)"/>
</text>
<asset identifier="image" label="Desktop Image" type="file"/>
<asset identifier="tablet-image" label="Tablet Image" type="file"/>
<asset identifier="mobile-image" label="Mobile Image" type="file"/>
<asset identifier="mp4" label="MP4" type="file"/>
<asset identifier="webm" label="WebM" type="file"/>
<asset identifier="fallback-image" label="Fallback Image" type="file"/>
<text identifier="transcript" label="Transcript" wysiwyg="true"/>
<text default="Left" identifier="content-position" label="Content position" type="radiobutton">
<radio-item value="Left"/>
<radio-item value="Right"/>
</text>
<text identifier="header" label="Header"/>
<text identifier="subhead" label="Subhead" multi-line="true"/>
<text identifier="link-label" label="Link Label"/>
<asset identifier="link-internal" label="Internal Link" type="page,file,symlink"/>
<text identifier="link-external" label="External Link"/>
<group identifier="background" label="Background">
<text default="Crimson" identifier="bg-color" label="Color" type="dropdown">
<dropdown-item value="Crimson"/>
<dropdown-item value="Secondary"/>
<dropdown-item value="Light Gray"/>
</text>
</group>
</group>Step 3:
Click Submit to save your changes.
Step 4:
To confirm the field has been added, when viewing the Page - Standard data definition, check the Apply Smart Field rules box at the top left. Expand the Banner section. The new options should appear.
Step 5:
To update banner options on all page types, the data definitions for Page - Event, Page - News, and Page - Profile will also need to be updated following Steps 1-4.