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

Placing rotating banners on your homepage

avatar of Kira Hartley

Kira Hartley

Last updated

Rotating banners on your homepage can announce specific events, facilities, or other points of interest and are customized and implemented in your site's theme. 

A full-width banner on a homepage

Homepage banners will need to be built into your theme by implementing the rotating banner component in the theme's layout and styling the banner in the Styles tab.

Check out this video to learn all about rotating banners on your homepage:

Our rotating banners are built to conform to accessibility considerations, but when styling and creating your homepage banner, you'll need to ensure you're choosing accessible colors and fonts. If you're unfamiliar with how to implement or style your rotating banners so that they continue to meet accessibility requirements, we recommend consulting with our team. To do this, submit a support ticket, and our team will get in touch with the next steps.

Once the rotating banner row is configured, create banner content in the Slideshow folder under Home in the site tree. 

The Slideshow folder in the site tree

If this folder isn't available to you, create it by right-clicking on Home and creating an OC Folder page called 'Slideshow'.

Create homepage banners

  1. Right-click on the Slideshow folder.
  2. Select Create Page.
  3. Select OC Slide.
  4. Fill out the necessary fields.
  5. Save and publish for the slide to show in your banner.

Repeat this process for each slide in your rotating banner. You can change the order in which slides appear by re-ordering them in the site tree. 

We recommend using five slides or fewer. If you use too many slides, you risk your community missing essential information.

What to include in your OC Slide fields

Use the following information to fill out OC Slide fields when creating slides for the rotating banner.

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. Keep the length in mind when adding captions – you don't want users struggling to read extra-long summaries as the slides are switching back and forth.

Add feature image

Main image for the slider. Image dimensions for the homepage banner slides are determined by the height and width of the container:

  • full width (1920px) or fixed-width (1140px)
  • the height of the banner, which is set within the theme builder.

Ensure the image file size is up to 500kb.

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

Homepage banners can be the width of the page content area or the full width of the screen depending on how your theme has been set up. 

For banners the width of the content area, the ideal image properties are: 

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

For full-width sliders, the ideal image properties are:

  • Image size: 1920 x 600 pixels
  • Image format: For most images, JPEG. If your slider contains text, PNG
  • File size: Up to 500kb

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 0 found this helpful