Banners

Learn how to add Banners (Single Banner or Multiple Rotating Banners) to webpage.

Add Banners vs. Rotating Banners

Just a reminder that, in Ektron Metadata, you use the Content Banner option to add a banner to the 3-column template and the Banner Rotator Smartform to add a banner (stationary or rotating) to the 2-column template. For the Banner Rotator, each image needs to live in its own html content item, then those content items are gathered together in the rotator smart form. It’s the rotator smart form file that gets attached in Metadata.

Add Banners (Single Banner or Multiple Rotating Banners) to webpage

For each banner image, there needs to be an image created and then an Ektron content item that holds the image.

Build the image

Create an image that is 788 pixels wide and 345 pixels high. (Height could be slightly more or less, but stay consistent in size with all banners for your website. Size and compress in Photoshop or GIMP (free). Link to GIMP instructions here. File size of image should be less than 100kb, and probably closer to 50kb. Upload the image to the Library and place it in the _Images folder. If you are planning multiple rotating images, upload the additional images, prepared in the same way. Contact University Relations for help with images, if you need it. They don’t take long and we are happy to assist you in getting a properly prepared image.

Create a Content Item for each image

Go back to the Content Tab (you were in Library to add images), Go to the _Banner Rotator folder, and create a content item. You’ll need both a content item (or multiple content items for rotating banner) and a smart form.

As an example, we’ll create a new HTML content item called Contact Us Image to use on the Contact Us page of a website. Create and title your content item, and then use the library icon in the editing panel to bring the image into the editing panel. Publish your document.


Create a Smart Form for one or multiple content items

Then create a new Rotating Banner Smart Form and call it Contact Us Smart Form.

Use the Folder Lookup icon to navigate to the content item you just created. You can have one or multiple content items and adjust their display order using the blue menu icon.

Set the number of images to display.

Rarely, we have occasion to want to have a long list of images and only display some of them. (This is primarily used on “Find Your Major” where we have a banner for each department/program and ask Ektron to randomly display 5 at any time.) If you choose randomize, it will randomly pick as many images as you have set in “Number of Images to Display.” So each time a user visits that page, they’ll see a different set displayed.

Add your Banner(s) to a Web Page

Open (Edit) the content item that you want to add a banner to. Click on the Metadata tab. Scroll down to the Banner Rotator Smartform ID section. Click on the Edit button. Use the pop-up box that appears to navigate to your _Banner Rotator folder and choose and “Save” the appropriate Smart Form.

Then Publish your page.

Resources:

Basic Training: Image Basics

Advanced Training: Image Advanced

See more about Styles & CSS Classes