Skip to main content
Science website guide

Cropping images in components

About the crop module for components

A new crop module is available on the Science website for our editors. Several components have been configured to work with this module.

  • Story Grid
  • Featured Content
  • Two Block Quicklink
  • Extended Quote
  • Three-Column Content Tout
  • Featured Image Field for the Story Content Type

 

The image crop styles

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

  • 16:9 landscape image crop
  • 4:3 landscape taller image crop
  • 4:5 portrait image crop
  • 1:1 square image crop
  • 13:5 Landscape hero

 

The components and their associated crops.

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. 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.

  • Story Grid - 1:1
  • Featured Content - 1:1
  • Two Block Quicklink - 16:9
  • Extended Quote - 4:5
  • Three-Column Content Tout - 1:1
  • Featured Image Field for the Story Content Type - 1:1
  • Story Content Type Hero Banner - 13:5

 

Important

Setting a crop style for an image will change the way the image looks across the website.

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.

 

There are ways around this.

  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.

 

Will I have a problem if I use same image in two different components and set different image crop styles for each component?

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.

 

How do I apply the crops to an image?

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

 

Cropping the images tutorial

 

 

The components

The components using this new crop module are listed below.

Three-Column Content Tout

Two-Block Quicklink Component

Extended Quote Component

Featured Content Component

Story Grid Container Component