...
| Tip |
|---|
Recommended component use
|
...
Profile, timeline and social images
...
| Tip |
|---|
Recommended component use: |
...
Avatar display in the timeline component
Below is an example of how an image is used in the timeline component.
...
Full-width background / hero image (Customised header
...
)
Landscape images work best for header or hero banners in the CMS. Ratios for full width background images are provided below. Call to action banner style customised header images should be ratio 3:2 and 1500 pixels wide by 1000 pixels high.
Step 1: select the best image
...
Width: 512 pixels
Height: 512 pixels
File type: PNG
...
Corner graphics for customised headers
You can add a top and bottom corner graphic to landing pages. It’s recommended that they’re created by a graphic designer, using design elements and colours from your department or agency’s branding guidelines.
Once uploaded to the CMS, the graphics will:
scale to fit different screen sizes
automatically crop to fit the triangular shaped design.
Example of a top and bottom corner graphic added to a landing page:
...
Corner graphic size guide
The top and bottom graphics should be created in PNG format using the following dimensions. The PNG files must be exported at 144 pixels per inch.
Top corner graphic
wide: 760 pixels
high: 464 pixels
...
Bottom corner graphic
wide: 544 pixels
high: 192 pixels
...
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.