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

Recommended dimensions for images in OpenCities

avatar of Kira Hartley

Kira Hartley

Last updated

There are many different images in OpenCities, for different types of content, and there is varying best practice for image dimensions. This article details specific sizes for the images you'll find on OpenCities, divided by content type, but keep in mind that OpenCities is a responsive platform. Being a responsive platform, we can't predict precisely how an image will display in any given situation; this means that images may display differently across different device sizes.

A single image uploaded and added to a content type could be displayed in multiple places and at different dimensions. For example, an image used on the OC Default template of the OC Event content type could also be displayed on a homepage listing, an event listing, a calendar, and in search results. The product is built to responsively show the image in all of these formats to the best of its ability, but it may not display exactly as you'd like it to.

You can set image sizes in your theme, so the dimensions your city or council uses may differ from those listed below. Our recommendation remains to note the preferred image dimensions and quality in your city's or council's style guide.

Content types

The table below lists the recommended dimensions for the images of each content type, organized by the template used. Although we state height dimensions throughout the table, please note that most templates use an Auto height dimension. When an image has an Auto dimension, the aspect ratio of the uploaded image is retained, and the image won't be trimmed when rendered on the page.

Content type/feature

Template and recommended image size (width x height)

OC Blog
  • OC Default: 480px x 316px
  • OC Full Width: 480px x 316px
  • OC With Full Width Image: 900px x 506px
OC Business
  • OC Default: 480px x 316px
OC Consultation
  • OC Default: 480px x 316px
  • OC With Full Width Image: 900px x 506px
OC Department
  • OC Default:
    • Feature image: 900px x 506px
    • Department head profile image: 480px x 316px
OC Development Application
  • OC Default: 150px x 100 px

Note: this image will only appear on Development Application listing pages.

OC Directory
  • OC Default: 480px x 316px
OC Elected Official
  • OC Default:
    • Elected official profile image: 480px x 316px
    • Feature image: 900px x 506px
OC Event
  • OC Default: 480px x 316px
  • OC With Full Width Image: 900px x 506px
OC Featured background

2000px wide, with varying height depending on your other background settings. The most common screen resolution for desktop computers is 1920 x 1080, so an image of 2000px width should fill the whole screen of most devices.

These dimensions also apply to the homepage background image.

Please note that we also recommend choosing a background image that will display best with the content you have. For example, if you're setting a background image for a content page, don't use an image with a central focal point, as the content area will cover this.

OC Featured content
  • OC Default: 480px x 274px
OC General
  • OC 2 Column: 480px x 316px
  • OC Full Width: 480px x 316px
OC Image Gallery

Image galleries display in a grid with three images per row and can be maximized to their full size by clicking on them. Images of different dimensions will be scaled down to fit into the grid. For this reason, there is no recommended size for image galleries.

Note: this applies to the OC Image Gallery content type and image galleries found in the Supporting information of other content types.

OC Initiative

OC Default: 900px x 506px

OC Lost Animal
  • OC Default: 150px width, Auto height

Note: this dimension is set by the product and cannot be changed in the theme. This image will only display on the Lost Animals listing page and can be enlarged to show the complete image.

OC Message

(Intranets only)

  • OC Default: 480px x 316px

Note: the image uploaded to an OC Message page will only display on the page itself.

OC News Article
  • OC Default: 480px x 316px
  • OC Full Width: 480px x 316px
  • OC With Full Width Image: 900px x 506px
OC Park
  • OC Default: 480px x 316px
  • OC With Full Width Image: 900px x 506px
OC Redirect Page The OC Redirect Page image will only display on content lists, landing pages, or search results (OC Module Interface); please consult those entries for more details.
Rotating Banners

Rotating banners can be on the homepage or content pages. Banners on content pages will always fit the width of the content area (fixed width), but homepage banners can be fixed width or the full width of the screen.

  • Fixed width: 1140px x 440px
  • Full-width: 1920px x 600px

Banners can be tricky to implement and manage; check out About Rotating banners for best practices and accessibility tips.

OC Service
  • OC Default: 480px x 316px
Staff Directory

The Staff Directory displays a cropped and circular version of the user's profile image or the Default profile image. On the Staff Directory listing, the image will render differently depending on the device:

  • Desktops and tablets: 100px x Auto
  • Mobiles and individual staff profiles: 150px x Auto
OC Venue
  • OC Default: 480px x 316px
  • OC With Full Width Image: 900px x 506px
OC Project
  • OC Default: 480px x 316px
  • OC Full Width: 480px x 316px

Homepage listings and other content lists

The images you select for a content page will be used in various places throughout your site. The main page image for an OC Event could also be displayed on the homepage, in search results, in content lists, or on a landing page.

When you create a theme, the product will assign these dimensions:

  • Content lists have many templates; the following include images:
    • Grid > With image, title and description: 380px x 250px
    • Stream > With image, title and description: 150px x 100px
    • Special > Consultation template: 150px x 100px
    • Special > Event template with block date: 150px x 100px
    • Special > Event template with inline date: 150px x 100px
    • Special > News template: 150px x 100px
    • Special > Parks template: 150px x 100px
    • Special > Venue template: 150px x 100px
  • Homepage listings are available for:
    • OC Consultation: 380px x 250px
    • OC Elected Official: small image: 150px x 150px (circular and cropped), large image: 760px x 350px
    • OC Event: small image: 380px x 250px, large image: 760px x 350px
    • OC Message: displays a cropped and circular version of the user's profile image
    • OC News Article: small image: 380px x 250px, large image: 760px x 350px
  • Landing pages have many templates; the following include images:
    • OC 3 Columns with Images: 380px x 250px
    • OC 3 Columns with Search: 380px x 250px
    • OC Full Width with Search: 150px x 100px
  • Module Interface pages have many templates, and not all display images. Those that do are split into grid (such as OC Events Listing Grid) and stream (such as OC News Listing) formats.
    • Grid templates: 380px x 250px
    • Stream templates: 150px x 200px

Calendars and maps

Images on maps and calendars are sourced from the main image field of a content page and will display at 300px x 150px. This dimension is set by the product and cannot be changed. For example, an event on a calendar will display the image you select for the Add event image field of an OC Event page.

Some image cropping may occur because the dimensions of the image field on an event page differ from those used for maps or calendars.

What else?

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