Banner images are full-width images that appear on a site. WCMS 3 allows for up to 8 banners per block, with the option to add links, Big text, and Small text.
Multiple Banner images will display in a carousel format. For ideal display, all banners should have the same dimensions. This can be achieved by editing the picture using either an online image editing software or a built-in application on your computer. A minimum banner size of 1010x300 is recommended. Banners that are narrower or wider than their location will automatically be scaled to fit.
The style of the section (width of the section) will affect the width of the Banner images. If you would like your Banner image(s) to be a different width than the rest of the page, consider using multiple sections. See What are sections for more information.
Avoid images containing text; if necessary, centre the text and use a colour contrast checker to ensure it meets accessibility requirements.
Create a Banner image
From the administration bar, select Workbench, then select My Dashboard.
Navigate to the Content list panel and select a web page. If you need to create a new web page, refer to How to create a web page.
On the web page, select the Layout tab.
Select + Add section if applicable. It is best practice for your Banner image(s) to have their own section on the web page. Sections can be styled to have different widths, which will affect how the Banner image(s) appear. Refer to What are sections for more information.
Select + Add block.
Under Content, select Banner images.
Enter a subject in the Title field. The title will appear as the Block header unless Display title is unchecked.
Select the Add image banner button. You also have the option to add a local (uploaded) video or a Vimeo video by selecting Add local video or Add Vimeo video from the respective drop-down menu.
Select Add media, then select Browse. Select an image from your computer or an image previously added to your site. Enter the alternative text if prompted and select save. For guidance in writing appropriate alternative text, refer to the University of Waterloo Brand Formatting page.
Select Insert selected.
Optional: Add a Link. Begin typing the title of the published content on your site that you would like to link to, then select it from the drop-down function. You may also enter an internal path such as /blog or an external URL such as https://example.com . This is where site viewers will be redirected if they select the Banner image.
Optional: Add Big text and Small text to appear with the image. Small text appears below the large text.
To add additional banners, select the Add image banner button and repeat steps 7-12.
You may adjust the slide speed, transition speed, and text overlay style in the Settings drop-down menu. The default settings are:
Slide speed is 7000 ms (increase if a lot of text is present to allow time for the user to read).
Transition speed is 400 ms.
Autoplay is on (checked).
Text overlay style = Full banner width, bottom, theme colour background ("FDSU" style).
Optional: If you would like to support an anchor link to your block, use the Block ID option. The ID entered in this section will allow you to link directly to your block by adding that ID to the end of a URL. If you are not sure how to add a Block ID, refer to How to add a Block ID.
Select Add block (Or Update if it’s a pre-existing Banner image block).
Select state from the Change to: drop-down menu.
Select Save layout.
Edit a Banner image
From the administration bar, select Workbench, then select My Dashboard.
From the Content list panel, select the web page where the Banner image you would like to edit is located.
Select the Layout tab.
Select the pencil icon on the top right-hand side of the banner image.
Select Configure.
Make the required changes and select Update.
Select state from the Change to: drop-down menu.
Select Save layout.
Edit width of Banner image
From the administration bar, select Workbench, then select My Dashboard.
From the Content list panel, select the web page where the Banner image you would like to edit is located.
Select the Layout tab.
Select Configure Section # for the Banner image's corresponding section.
Navigate to the Style drop-down function and select the desired width.
Select Update.