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 Type | Aspect Ratio | Resolution (Pixels) | File Size (KB) |
---|---|---|---|
Homepage carousel | 2:1 | 2000 x 1000 | ~300 |
Section page banner | 2:1 | 2000 x 770 | ~300 |
Featured item banner (news or event post) | 16:9 | 2000 x 1125 | ~300 |
CTA banner | 3:2 | 1500 x 1000 | ~300 |
Midpage banner | 1:1 | 700 x 700 | ~90 |
News featured image | 16:9 | 715 x 402 | ~65 |
Event featured image | 16:9 | 715 x 402 | ~65 |
Post featured image | 5:7 | 430 x 600 | ~75 |
Profile featured image | 6:7 | 270 x 319 | ~30 |
Button with image module | 1:1 | 715 x 715 | ~90 |
Testimonial module | 1:1 | 150 x 150 | ~20 |
Card with image (large) | 2:1 | 2000 x 1000 | ~300 |
Card with image (medium) | 7:5 | 700 x 500 | ~75 |
Card with image (small) | 16:9 | 715 x 402 | ~65 |
Quick links | 2:1 | 2000 x 1000 | ~300 |
Editorial image module requirements
Image Type | Resolution (Pixels) | File Size (KB) |
---|---|---|
Browser width | Width: 2000 Max height: 850 | ~285 |
Site width | Width: 1170 Max height: 1170 | 250 or less |
Content width | Width: 570 Max height: 800 | 90 or less |
Floating | Width: 385 Max height: 800 | 80 or less |
File naming conventions and character limits
We encourage the use of a consistent naming convention when saving and uploading your images to better help you identify which images are used for which purpose. For example, “Page-Module-UBC-Unit” so, “About-Featured-Image-UBC-MUSC”, as well as including alternative text to your images to help improve accessibility.
The file name should be no more than 50 characters, otherwise they may not display.
Placeholder images
We have uploaded additional placeholder images that can be used as alternatives to the primary placeholder news and event featured image if you do not have images of your own.
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”.
Image galleries
Image galleries are used to display a collection of images on your website.
For sharing large sets of images (20+) at a time, we recommend using a tool that is specifically meant for sharing large amounts of photos, like Facebook or Flickr. For example, UBC Brand & Marketing uses Flickr to store and share their images to the public. You can then add a select number of photos to your news or event post in the form of an image gallery, image carousel, or editorial image module, and include a button or card to your news or event post (e.g., “View all photos”) that links to the external photo album.
Standard WordPress image galleries
To create an image gallery:
- Click on “add media” button on the editor toolbar
- If you haven’t uploaded your images yet, click on the “upload files” tab to upload your image into the library
- On the left-hand side, select the option “create gallery”
- Select the images you would like in your image gallery
- After you have selected your images, click on “create a new gallery”
- Click on “insert gallery”
Arts CMS image carousels
To create an image carousel (up to 20 images):
- Follow steps 1-5 above
- After you’ve clicked on “create a new gallery” and are in the Edit Gallery page, check the carousel [ ] check box to make this gallery a carousel
- Set your desired carousel size on the carousel height dropdown
- Select each image on the gallery and add a title and a caption for the images
- 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 Direction | Aspect Ratio | Resolution (Pixels) | File Size (KB) |
---|---|---|---|
Portrait | 3:4 | 690 x 920 | ~100 |
Landscape | 4:3 | 920 x 690 | ~100 |

Horizontal image example
Caption for image

Vertical image example
Caption for image

Horizontal image example
Caption for image
Adding image captions
You can add a caption to any image on your site using the following method:
- Navigate to your site’s dashboard and click on the media button on the left-hand menu to open the Media Library
- Click on the image you would like to caption to open the Attachment Details box
- Enter your desired caption on the caption field on the right side of the image details
- Click on the X on the top right of the Attachment Details box to save your changes and return to the Media Library
- 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.