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:
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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
There are many file types you can upload onto the CMS, but for images the following file types are recommended:
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 predominately in 2 formats, portrait or landscape. While our CMS is designed to support these 2 formats, we recommend using a landscape image. If you decide to use a portrait image, we recommend to have lots of space around the subject.
You can use the guides below to resize your images, however, images must be tested to ensure they display correctly across different devices. Use steps 3 and 4 below.
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
When you upload an image, there's no need to adjust it yourself; the CMS automatically handles the cropping for you. All you will need to do, is set a focal point (and this is achieved in the CMS).
If you need to resize your image and don’t have professional software like Adobe Photoshop, you can use the suggested free image editing tools:
Landscape images (ratio 16:9)
A rough guide for landscape images is:
wide: 1280 pixels
high: 720 pixels
| Tip |
|---|
Recommended component use:
|
Ultrawide format (ratio 21:9)
A rough size guide for crystal-clear hero banner images is:
wide: 2560
high: 1440 pixels
| Tip |
|---|
Recommended component use:
|
Hero banner / full-width background display on devices
Below is an example of how a hero banner image responds using the standard ratio of 16: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
| Tip |
|---|
Recommended component use:
|
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.
Select the Media icon, then Add image.
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).
Select Choose File to add a new image and select the image from your computer.
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:
Complete the Alternative text field (if the image is informative) and the Title field.
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).
How to test your image on different screen sizes
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.