This guide covers how images work in the Single Digital Presence (SDP) Content Management System (CMS). It also includes recommended image ratios and a size guide for images used in CMS components.

On this page:

Changes to CMS images

In the latest update of the Ripple front-end design system, ratios are now used rather than exact pixel sizes for CMS images.

Image containers are responsive and change on different devices. It was designed this way to best display your content and make optimal use of the available screen space.

Because of this, we cannot give exact image sizes for components. To help you choose and test an image, follow the steps below.

Recommended file types

The following file types are recommended for CMS images:

• JPEG

• PNG (this is a preferred format)

Step 1: Select the right image

Before selecting an image, consider how the image will display on different devices, for example, a mobile phone.

Select images that provide an opportunity to position the focal point on the right side. If an image is flipped horizontally, be mindful of text on clothing or street signs, as they will be backwards.

Images are usually supplied in 2 layouts: portrait or landscape. While our CMS is designed to support these 2 layouts, we recommend using a landscape image. If you decide to use a portrait image, we recommend to have lots of space around the subject. The subject is the location on the image that you want users to connect with. For example, the person looking at the camera or an important part of the image that’s in focus.

If images are used in a hero banner, avoid important information on the left of the image, as this will be blocked by the page title and summary.

Step 2: Adjusting an image ratio

While the CMS automatically handles image cropping and allows you to set an image focal point, you may want to crop your image to suit its purpose. The 2 most commonly used image ratios in our CMS are landscape 16:9 and ultrawide 21:9.

If you don’t have professional software like Adobe Photoshop, you can use the suggested free image editing tools:

• Pixlr.com

• Canva.com

Landscape images (ratio 16:9)

A rough guide for landscape images is:

• wide: 1280 pixels

• high: 720 pixels

Ultrawide format (ratio 21:9)

A rough size guide for crystal-clear hero banner images is:

• wide: 2560

• high: 1080 pixels

Hero banner / full-width background display on devices

Below is an example of how a hero banner image responds using the standard ratio of 21:9, on small, medium and large screens.

Mobile phone (small screen)

Tablet (medium screen)

Desktop (large screen)

Tip: the image moves around a pre-defined image container. The image will enlarge and crop differently to suit a user’s device, as well as the length of your content.

For example, if you have 3 lines of introduction text in your headline, the image will zoom in and use the maximum height of the image to allow for the extra content.

Avatar (ratio 1:1)

This image will be automatically masked with a circle, you will only need to provide a square image. Make sure you upload an image that is zoomed into the face, because these image types are reduced significantly.

A rough size guide for avatar images is:

• wide: 400 pixels

• high: 400 pixels

Avatar display in the timeline component

Below is an example of how an image is used in the timeline component.

Step 3: Upload the image and set the focal point

For the optimal presentation of your image across all devices and screen sizes, it's best to set a focal point.

1. Select the Media icon, then Add image.

2. Add a descriptive title for the image to the Name field (this is what’s used to search for your image in the Media library).

3. Select Choose File to add a new image and select the image from your computer.

4. Once the image has been uploaded, you can set the focal point of the image by using your mouse or moving the + icon on the image to the desired focal point:

   

5. Complete the Alternative text field (if the image is informative) and the Title field.

6. Select Save.

Step 4: Review the image before publishing

Test the image to see how it will respond on different devices. This means that you should check that the position of your image focal point works for the following screens:

• small (mobile phone)

• medium (tablet)

• large (desktop).

Simple screen test

Once you have a draft preview link of your image within a content page, you can simply hover over the far right or left hand side of the browser and drag it inwards to see the tablet and mobile view.

Accurate screen test

When previewing a front-end draft of your page, right-click on an empty area of the website and select Inspect > Inspect Element.

Alternatively, you can use the following keyboard shortcuts:

• Mac: Command + Option + i

• PC: Ctrl + Shift + I

Then select the Dimensions drop-down to change to particular device / screen size.

Remember, the website is responsive and will adjust the image based on the amount of content used, and the device it is displayed on.

Logos

Logos can now be placed in various locations within your site. Follow these dimensions for the best outcome and clarity of your logo.

Primary navigation / site-wide logo

• Width: 280 pixels

• Height: 80 pixels 

• File type: PNG

Supporting logo in hero banner

• Width: 656 pixels

• Height: 184 pixels 

• File type: PNG

Footer

• Width: 240 pixels

• Height: 96 pixels  

• File type: PNG

Favicon

• Width: 512 pixels

• Height: 512 pixels 

• File type: PNG

More information

• Use the aspect ratio calculator to help with image cropping

• For more information about CMS images, visit the Ripple Pattern Library.

• For help with images, log a content support request.