Submitted by sws139 on Sat, 03/26/2022 - 17:01
Science website guide

Cropping the images
in components tutorial

Example 1

For this example we will use Two-Block Quicklink component.

Screen shot of the left tout image for the two-block quicklink component.

 

First I add an image to this component without applying any crop.

 

 

Two-Block Quick Link component image cropping tutorial.

 

The left tout image in the component with no crop applied.

 

 

The two-block quick link component with help text.

In the screen shot above you can see the help text telling editors to use the 16:9 landscape image crop style for this component. The other image crop styles will not work. I select the pencil icon to set the image crop style.

 

 

Cropping the two-block quicklink component image ratio screen shot.

 

First, remove the original image.

I want to select a specific part of the image with the selection box. When I am happy with the results I select "Save". I will not see my final selection in the image preview. I need to "Save" the page or select "Preview" to see the results of the crop.

I also recommend that you move the box around just to make sure the image crop style is applied.

 

 

Tutorial with the two-block quick link component with the 16:9 crop applied.

 

The image in the component after I selected a portion of the photo.

 

 

Removing the crop

Reset the crop for the two-block quicklink component image screen shot.

To remove the crop I select the "Reset" button. This will remove the crop on all the Two-Block Quicklink components across the website.

 

 

Example 2

Now I will add the same image to a the Featured Content component.

 

Cropping the Featured Content component tutorial.

First I remove the original image.

 

 

Cropping the Featured Content component tutorial, add the new image to the component.

 

Now I will add the image that I used in the Two-Block Quicklink component above to see how it will work in a component with a different image crop style. 

 

 

Cropping the Featured Content component tutorial, a view of the image without a crop.

I don't have to set the crop for an images. By default the mages should work without requiring a crop. The screen shot above is an example of this image without any image crop style being applied.

 

 

Cropping the Featured Content component tutorial, add the new image.

When I edit the component I select the pencil icon to get access to the menu where I will set the image crop style. The 16:9 Landscape image crop style loads by default. I need to select the 1:1 Square to set the proper crop for this component.

 

 

Cropping the Featured Content component tutorial, set the crop and remember to save.

 

For the Featured Content Component I need to select the 1:1 square image crop style. I save the image crop style selection after I make my adjustments. Notice the 16:9 landscape image crop selection is also applied to this image from when I added it to the Two-Block Quicklink component above.

 

 

Cropping the Featured Content component tutorial, view the saved image.

 

Here is the Featured Content component after I set the 1:1 square image crop style.