Recommended Dimensions for Images in OpenCities – OpenCities

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, 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: 480 px x 316 px OC Full Width: 480 px x 316 px OC With Full Width Image: 900 px x 506 px
OC Business	OC Default: 480 px x 316 px
OC Consultation	OC Default: 480 px x 316 px OC With Full Width Image: 900 px x 506 px
OC Department	OC Default: Feature image: 900 px x 506 px Department head profile image: 480 px x 316 px
OC Development Application	OC Default: 150 px x 100 px Note: this image will only appear on Development Application listing pages.
OC Directory	OC Default: 480 px x 316 px
OC Elected Official	OC Default: Elected official profile image: 480 px x 316 px Feature image: 900 px x 506 px
OC Event	OC Default: 480 px x 316 px OC With Full Width Image: 900 px x 506 px
OC Featured background	2000 px wide, with varying heights depending on your other background settings. The most common screen resolution for desktop computers is 1920 x 1080, so an image of 2000 px 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: 480 px x 274 px
OC General	OC 2 Column: 480 px x 316 px OC Full Width: 480 px x 316 px
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: 900 px x 506 px
OC Lost Animal	OC Default: 150 px 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: 480 px x 316 px Note: the image uploaded to an OC Message page will only display on the page itself.
OC News Article	OC Default: 480 px x 316 px OC Full Width: 480 px x 316 px OC With Full Width Image: 900 px x 506 px
OC Park	OC Default: 480 px x 316 px OC With Full Width Image: 900 px x 506 px
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: 1140 px x 440 px Full-width: 1920 px x 600 px Banners can be tricky to implement and manage; check out About Rotating banners for best practices and accessibility tips.
OC Service	OC Default: 480 px x 316 px
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: 100 px x Auto Mobiles and individual staff profiles: 150 px x Auto
OC Venue	OC Default: 480 px x 316 px OC With Full Width Image: 900 px x 506 px
OC Project	OC Default: 480 px x 316 px OC Full Width: 480 px x 316 px

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: 380 px x 250 px
- Stream > With image, title and description: 150 px x 100 px
- Special > Consultation template: 150 px x 100 px
- Special > Event template with block date: 150 px x 100 px
- Special > Event template with inline date: 150 px x 100 px
- Special > News template: 150 px x 100 px
- Special > Parks template: 150 px x 100 px
- Special > Venue template: 150 px x 100 px
Homepage listings are available for:
- OC Consultation: 380 px x 250 px
- OC Elected Official: small image: 150 px x 150 px (circular and cropped), large image: 760 px x 350 px
- OC Event: small image: 380 px x 250 px, large image: 760 px x 350 px
- OC Message: displays a cropped and circular version of the user's profile image
- OC News Article: small image: 380 px x 250 px, large image: 760 px x 350 px
Landing pages have many templates; the following include images:
- OC 3 Columns with Images: 380 px x 25 0px
- OC 3 Columns with Search: 380 px x 250 px
- OC Full Width with Search: 150 px x 100 px
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: 380 px x 250 px
- Stream templates: 150 px x 200 px

Calendars and Maps

Images on maps and calendars are sourced from the main image field of a content page and will display at 300 px x 150 px. 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?