Skip to main content

Image cropping tool

Perfectly tailor your images for every screen size

Written by Support

The Image Cropping Tool gives you full control over how banner images appear across your website and CMS pages. You can crop and optimise images for different screen sizes, ensuring your content always looks sharp and well-positioned - no matter the device.

What does the Image Cropping Tool do?

The tool allows you to:

  • Custom crop banner images on programme pages

  • Edit banner images on CMS-created pages

  • Optimise images for different screen sizes (breakpoints)

  • Improve visual consistency across devices

Where to access the Image Cropping Tool

For Programme Pages

  1. Navigate to ONE Admin > Catalogue > Programmes

  2. Select your programme

  3. Click Actions > Manage Images

  4. Next to the banner image, click 'Manage Banner'

For CMS Pages

  1. Navigate to ONE Admin > Content > Pages

  2. Select your page

  3. Click Actions > Manage Images

  4. Open the banner image editor

How image cropping works

Once inside the tool, you can upload and customise your image.

You’ll see 4 size breakpoints, each designed for different screen widths:

  • X-Large → 1600px and above

  • Large → 1599px to 769px

  • (and additional smaller breakpoints depending on setup)

Each breakpoint can have:

  • A different image, or

  • The same image adjusted per size

How to crop your image

For each size:

  1. Upload your image

  2. Use the slider tool to zoom

  3. Drag the image to position it correctly

  4. Save your crop

Repeat for each breakpoint to ensure your image looks perfect on all devices.

Using 'Default' images

If you prefer a simpler setup:

  • Click “Use as default”

  • Upload one image

  • The same image will be used across all screen sizes

This is ideal for quick updates or consistent designs.

Important notes

  • The Image Cropping Tool does not apply to banner carousel custom slide images

  • Always preview your page on different screen sizes after uploading

  • Ensure key visual elements stay within safe cropping areas

Tips

  • Keep focal points (logos, faces, text) centred

  • Use X-Large crops for high-impact hero banners

  • Avoid placing important content near edges

  • Test crops across all breakpoints for consistency

The Image Cropping Tool helps you deliver perfectly optimised visuals across every device. With flexible breakpoints and custom cropping options, you can ensure your banners always look professional, consistent, and visually engaging.

Did this answer your question?