Skip to main content
Science website guide

Cropping images in components

About the image crop module for components

A new crop module is available on the Science website for our editors. This module is available for the majority of the components and for certain image fields in the Story content type and the User Profile Content type.

Images fields in the content types where you can set a crop

User Profile content type

  • Profile Picture Field

Story content type

  • Featured Image Media field.
  • Hero Image Media field.

 

The image crop styles

There are six crops configured on the website. Each of these crops is associated with a specific component.

  • 13:5 Landscape hero.
  • 16:9 landscape image crop.
  • 4:3 landscape taller image crop.
  • 4:5 portrait image crop.
  • Hero Crop No Ratio.
  • 1:1 square image crop (this is a required part for the Featured Image field in the User Profiles).

Cropping dos and don'ts. Cropping FAQs

If I modify an image to work with 16:9 image crop style in the Two-Block Quicklink component on one page of the website, then these modifications will be applied to that same image in the Two-Block Quicklink components across the website.

  • Changing an image crop for a image in the Two-Block Quicklink component will change the way that same image looks in all of the Two-Block Quicklink components on the website.

The different crop styles are associated with each component. While a crop style can be associated with more than one component. The components can only have one crop style associated with them.

If a component has an image crop associated with it, you will see help text near the image field showing you what image crop style to select for an image in that image field.

Selecting the wrong crop for the image in a component image field will have no affect on the image. It will appear like the crop is not working for that comopnent.

For example, the Three-Column Content Tout only works with the 1:1 square image crop style. If you try to use the 16:9 landscape image crop style, nothing with happen.

Remember to look at the help text near the image field to determine what crop you want to set for that image.

  1. You don't have to set the image crop style for that component.
  2. You can upload a new version of the image to use for the same type of component on a different page.

No. As long as the image crop styles are different you will not change how the image looks. For example, the Two-Block Quicklink component uses the 16:9 landscape image crop style and the Story Grid Container component uses 1:1 square image crop style. If I use the same image in the Two-Block Quicklink component and modify the image crop style for this component, these changes will not affect the way the image looks in the Story Grid Container component.

However, if I add an image to the Featured Content Component and add that same image to the Three-Column Content Tout, any changes will affect both of these components. The Featured Content component and to the Three-Column Content Tout component use the same 1:1 square image crop style. When I modify this crop style for the Three-Column Content Tout component I will also change the way that the image looks in the Featured Content component.

There are ways around this.

  1. Don't set up the image crop style for one component.
  2. Upload a new version of the image to use for different components that use the same image crop style.

Follow the tutorial below to learn how to apply the image crop styles to the component images.

Cropping the images tutorial

Examples

Listed below are some select components with an examples of how images will look with the image crop styles applied.

Three-Column Content Tout

Two-Block Quicklink Component

Extended Quote Component

Featured Content Component

Story Grid Container Component