Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.

Follow

Create Page-level Rotating Banners

avatar of Kira Hartley

Kira Hartley

Last updated

Rotating Banners can be used on any content type with a WYSIWYG editor, using OC Rotating Banner and OC Slides content types. Slideshows on homepages are created differently and may require expert consultation.

Use page-level rotating banners to indicate different sections of your site. Here, for example, our demo site has a rotating banner to showcase the various library branches of the council. We have seen successful examples of them used in the top WYSIWYG Editor of OC Landing Pages, where they can give the section a different look and feel.  

Slideshow image on landing page

You can place rotating banners into any WYSIWYG content using the rotating banner icon in the WYSIWYG Editor and selecting the banner you would like to add to the page. The WYSIWYG will pull a list of all the banners created within that site. In the WYSIWYG Editor, the banner will present as a green widget.

WYSIWYG editor bar with Rotating Banner icon highlighted and banner widget

There are two ways to organize your banners; you could either create all banners in a dedicated folder in the site tree, or you may prefer to create each banner as a direct child page of the page they are added to. 

How to Create an OC Rotating Banner

  1. Right-click in your site tree where you wish to place your banner and select Create page. 
  2. Select OC Rotating Banner as the content type.
  3. Fill out the necessary fields.
  4. Publish the page.
  5. Right-click on the OC Rotating Banner page you just made in the site tree.
  6. Select Create page and choose the OC Slide content type. 
  7. Fill out the necessary fields on the OC Slide page.
  8. Repeat this process for each slide in your rotating banner. You can re-order the slides by dragging and dropping them in the site tree. 

Rotating banner and Slides in site tree

Remember, accessibility-friendly banners have no more than five slides!

What to Include on Your OC Rotating Banner

Use the following information to fill out the OC Rotating Banner fields.

Field

 Function/Display

Page Name

The name of your rotating banner. It’s best to make this descriptive as you’ll be using it to select your rotating banner later in the WYSIWYG.

Banner layout

The text placement on your banner – either in a strip along the bottom of your banner or in a floating box.

Max number of slides to show

The maximum number of slides your banner can display. You can have as many OC Slide child pages as you’d like for your OC Rotating Banner page, but only this number of images will be shown once your banner is published. 

Banner animation

How you’d like banner slides to transition from one image to another.

What to Include in Your OC Slide Fields

Use the following information to fill out the OC Slide fields.

Field

Function/Display

Page name

Completes the unique Page URL

Feature title

The title displayed in the slider caption

Add feature summary

The text displayed in the slider under the title

Add feature image

Main image for the slider. The image needs to be at least 1140 px wide x 350 px high, with a file size of up to 500 KB.

Add feature link URL

The link used to direct users to more information

Anchor Image

The position on the original image that the slider will display, e.g., Top Left, will apply the slider dimensions from the top left of the original image.

Image Sizes

Page-level rotating banners are the width of the page content area. The ideal properties for these are: 

  • Image size: 1140 x 350 pixels 
  • Image format: For most images, JPEG. If your slider contains text, PNG  
  • File size: Up to 500 KB

We’ll automatically resize images that fall outside of these dimensions, but it’s best to upload images that are at least as big as what we’ve suggested above. When images don't meet these dimensions, they need to be upscaled, resulting in poorly rendered or clipped images. 

What Else?

Was this article helpful?
0 out of 2 found this helpful