There are multiple places across your Commonplace project where you'll want to upload images to make your content more visually engaging. The image dimensions below are guidelines for each of the image types, but there are two important points to remember:
Some images, such as the 'hero banner' at the top of the landing page are designed to adjust size based on the amount of text you've included - this means that there is no one image dimension that will fit every use case.
Commonplace uses responsive design - this means that instead of having separate websites for desktop and mobile, we have a single website that automatically adapts to a user's screen size. As a result, images will display at different sizes and different crops on different devices.
Further information about some of the image types listed below can be found here:
Content blocks: Image
Bring your engagement to life with advanced image options
As a general rule photographs should be in .jpg/.jpeg format, whereas diagrams, drawings, text, maps, etc. should be in .png format. If setting custom branding, favicons should be in .png, .gif or .ico format.
Homepage banner image
2560 x 720 pixels for a smaller amount of text, or 2560 x 960 pixels for a larger amount of text
Tile images
720 x 300 pixels
Organisation logos for the Team page
320 x 320 pixels - if logo is not square, ideally add blank space to the top or sides to create a square shape
Before/after slider images
There is no specific requirement here, other than both images having the same dimensions, as the before/after slider automatically adjusts to the width of the page - for adequate detail, each image should be at least 1280 pixels wide
Default image layout
Any dimensions - a landscape image works best (e.g. 1920 x 1080 pixels)
Full width image layout
1920 x 700 pixels
Image carousel
1080 x 608 pixels
Image alongside text
The exact dimensions will vary depending on the layout and amount of text. Where the image is above or below the text, 1280 x 560 pixels should work
Image grid
560 x 560 pixels - images in the grid layout will automatically be cropped to a square
Favicon
32 x 32 pixels
News post images
Images within the body of a news post can be any size - the news tile image should be 960 x 960 pixels
Images within accordion blocks
Whilst there are no specific dimensions required, it is recommended to set the width of the image to 100% for best results
How to customise branding on your project
Still unsure about anything? There's lots more information here on the Commonplace Help Centre - alternatively, contact the support team and we'll be happy to help 👋
