Image Requirements

Arts CMS has specific image requirements for each module and post type. Optimize each image by reducing the file size as much as possible without sacrificing image quality.

This can help decrease your site’s loading time, improve the user experience, as well as your SEO rankings.

Image requirements

When uploading photos to your website, use the JPEG/JPG file format.

JPEG images are the most popular file format online because they can be compressed considerably, which results in quality images with small file sizes. It is recommended that no images on your website should exceed 500 KB.

Image TypeAspect RatioResolution (Pixels) File Size (KB)
Homepage carousel2:12000 x 1000
Section page banner2:12000 x 770
Featured item banner (news or event post) 16:92000 x 1125~300
CTA banner 3:21500 x 1000~300
News featured image16:9715 x 402
Event featured image16:9715 x 402
Post featured image5:7430 x 600~75
Profile featured image6:7270 x 319
Button with image module1:1715 x 715~90
Testimonial module1:1150 x 150~20
Card with image (large)2:12000 x 1000~300
Card with image (medium)7:5700 x 500~75
Card with image (small)16:9715 x 402~65
Quick links2:12000 x 1000

Editorial image module for News and Event posts

Image TypeResolution (Pixels) File Size (KB)
Browser widthWidth: 2000
Max height: 850
Site widthWidth: 1170
Max height: 1170
250 or less
Content widthWidth: 570
Max height: 800
90 or less
FloatingWidth: 385
Max height: 800
80 or less

Creating image galleries

Image galleries are used to display a collection of images on your website.

To create an image gallery:

  1. Click on “add media”. If you haven’t uploaded your images yet, click on the “upload files” tab to upload your image into the library
  2. On the left-hand side, select the option “create gallery”
  3. Select the images you would like in your image gallery. After you are done, click on “create a new gallery”

Creating a carousel of images

You can create a carousel of images to allow your users to look at your images without having to scroll down your page.

To create an image carousel:

  1. Click on the “add media” button on the editor toolbar
  2. Click on the “create gallery” button and select the images you want to display in a carousel
  3. Click on the “create a new gallery” button to enter the Edit Gallery page
  4. Mark a check on the carousel [ ] check box to make this gallery a carousel, and set your desired carousel size on the carousel height dropdown
  5. (Optional) Select each image on the gallery and add a title and a caption for the image
  6. Click on “insert gallery” to add the carousel to your page

Image dimensions

For the best user experience and display of the carousel, follow these image parameters:

Image DirectionAspect RatioResolution (Pixels)File Size (KB)
Portrait3:4690 x 920~100
Landscape4:3920 x 690~100

Additional placeholder images

In response to feedback that the standard placeholder images used for news and events posts can become repetitive for those posts that do not contain a featured image, we have uploaded additional placeholder images that can be used as alternatives.

These images can be used for more specific themes, such as virtual or student events and can be found in your website’s media library with various sizing options depending on the desired use case.

You can locate these images in your media library by searching for “news-events-placeholder-image-ubc-arts”.

Adding a caption via the media library

You can add a caption to any image on your site using the following method:

  1. Navigate to your site’s dashboard and click on the media button on the left-hand menu to open the Media Library
  2. Click on the image you would like to caption to open the Attachment Details box
  3. Enter your desired caption on the caption field on the right side of the image details
  4. Click on the X on the top right of the Attachment Details box to save your changes and return to the Media Library
  5. Add the image to the page or post using the Add Media button on the content editor toolbar to embed the image onto your page or post

Adding hyperlinks to your caption

In addition to using site-wide captions using the caption field embedded in the media, you can add hyperlinks to your captions to provide more ways to interact with your users. To add links, use the <a href="LINK_TARGET">Your Text Goes Here</a> HTML tag in your caption.
You can add the hyperlink in either the embedded image module’s caption parameter or the media’s caption field.

Additional resources

On this page