Our content management system (CMS), Apostrophe 2, has the capability to crop and resize images to fit their locations on a given page. In most cases, you will have the option to re-crop an image to your liking. Apostrophe does this in a non-destructive way, meaning that the original image you upload will remain untouched in the media gallery no matter how and where it appears on the site.
In order for this system to work properly, you must upload an image that will fit the maximum dimensions of the space you want it to occupy. In fact, the best practice would be to upload an image that will fit the maximum dimensions for the largest image slot, the marquee image. A marquee image is one that appears at the top of a page in conjunction with a title card.
Our recommendation for uploading most images is to have them be around 2000 pixels wide at a resolution of 72 dpi. This gives you some room to crop for the marquee image slot.
The minimum for most image slots (including those on buttons and cards) is 480 pixels. The system will warn you when you upload an image that is smaller than that. The image may still go into the system but will not show up as an option to use.
For your reference, here are the dimensions of images in some common formats:
Marquee image: 1200 x 600 pixels
Single-column, full-width landscape image: 750 x 450 pixels (5:3 ratio)
Single-column, full-width square image: 750 x 750 pixels (1:1 ratio)
Single-column, full-width portrait image: 750 x 1000 pixels (3:4 ratio)
Single-column image attached to text: 600 pixels wide
Two-column landscape image: 528 x 318 pixels wide (5:3 ratio)
Two-column square image: 528 x 528 pixels (1:1 ratio)
Two-column portrait image: 528 x 704 pixels (3:4 ratio)
Two-column card image: 528 x 338 pixels
Two-column button image: 528 x 267 pixels
Three-column landscape image: 344 x 207 pixels
Three-column square image: 344 x 344 pixels (1:1 ratio)
Three-column portrait image: 344 x 458 pixels
Three-column card image: 344 x 338 pixels
- Three-column button image: 344 x 213 pixels