Banners

Banners can help highlight important information, promote initiatives, or create strong visual impact at the top of a page. However, banners must be implemented in ways that support accessibility, performance, and long-term maintainability.

This page outlines what is allowed and not allowed in the School of Medicine web system.

Not Allowed

Image Carousels, Sliders, and Slideshows

Image carousels (rotating banners) are not permitted. Carousels create significant accessibility barriers, including keyboard navigation issues, timing controls, and screen reader confusion.

Review our Carousels Accessibility documentation for more information.

Envira Gallery and Soliloquy Plugins

As mentioned, slideshows are not allowed, including those created with the Envira Gallery or Soliloquy plugins.

• Envira Gallery may continue to be used for static image galleries, but it should not be used to create slideshow-style banners or rotating headers.
• Soliloquy is being phased out. Sites currently using Soliloquy should redesign their slideshow content without it.

Allowed Banner Options

Cells Plugin Banner Options (Recommended)

The Cells plugin includes several pre-designed banner and full-width layout options that are accessible and responsive.

Using Cells is the preferred method for adding banners because:

• Layout and styling are already built to match the SOM theme
• Responsive behavior is handled automatically
• No HTML or CSS knowledge needed

The Image Blocks and Banner Blocks within Cells are the closest “banner” options.

If you are new to Cells, review the Getting Started with Cells documentation before you begin.

Add an Image to the Featured Content Area

The Featured Content area displays directly below the top navigation. If styled correctly, an image placed here can span the full width of the browser window and function as a banner.

The Featured Content area only accepts HTML and shortcode. If you’re unfamiliar with HTML, the steps below will show you how to use the editor to generate the HTML you need.

1. Add the Image to the main content area of the page.
2. Ensure you add meaningful alt text (required).
3. Click on the image to select it. This will highlight the code so it is easy to find in the next step.
4. Click on the Code tab in the editor to view the html of the page.
   
5. The HTML for the image should already be highlighted (if you followed step #3 above). If not, locate and highlight the whole <img> tag.
6. Copy the complete <img> HTML code.
7. Paste the HTML into the Featured Content area.
8. Modify the html
   1. change the width attribute to 100%
   2. Remove the height attribute completely. This ensures the banner spans the full width and remains responsive.
9. The final results will look something like this:
   
10. Delete the image in the main body content area as it is no longer needed.
11. Save or Update the page.

The TEACCH website is a strong example of consistent, well-designed banners placed in the Featured Content area.

Using the Featured Image Field

The Featured Image field can also be used to display a banner image below the top navigation. However, this option provides less layout control compared to Cells or images placed in the Featured Content area.

• The Featured Image area has a predetermined height. Images may be clipped depending on their dimensions.
• The amount of clipping varies based on screen size.
• The image is not fixed which means it will scroll with the page.

To use this option, simply add an image to the Featured Image panel.