Image Component

What is the Image Component?

The Image Component displays an image within the layout that automatically scales to fit the width of its column.

Image example

Step-by-Step Instructions

1. Click the edit link at the top of the page
2. Move your cursor where you want to place the component.
3. Click the plus icon.
4. Select Image from the menu

Content 

1. Click Add media.
2. Select the appropriate image or upload the image to the Image Library.
   Recommended Image Dimensions: 3:2 - Maximum image size is 4MB
3. Once the image is added, select the Edit icon to adjust the image cropping, alternative text, or caption.

Alt Text

Alt text must be concise, descriptive, and meaningful, without phrases like "image of". Make sure alt text meets our Web Accessibility Policy

1. Add or update current Alt Text of the image

Crop Image

Note: Crops apply to all existing usages of the image.

1. Expand the Crop Image accordion
2. Review the image preview for each aspect ratio
3. Adjust the blue lines on the image to include the main focal point
4. Scroll to the bottom of the page and click Save.
5. You can select the aspect ratio and image size in Styles (see instructions below)

Caption 

Note: Captions will display on all existing usages of the image.

1. Add a caption to display important information about the image and photo credit

Styles

1. Toggle to the Styles tab.
2. In the Aspect section, you can change the aspect ratio of the image (see examples below)

Save

1. Click Save.
2. Scroll to the top of the page and click Save.
3. Click the Done button beside the save button.
   Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.

Style options

1. Example of a Default image 
    

   

   
    

    

2. Small portrait (160x284)
    

   

3. Small rectangle (512x341)

   

4. Small rectangle tall (512x384)

   

5. Small square (250px)

   

6. Medium portrait (250x375)

   

7. Medium rectangle (720x480)

   

8. Medium rectangle tall (720x540)
    

   

9. Medium rectangle wide (720x405)
    

   

10. Medium square (500px)

    

11. Large rectangle (960x640)

    

12. Large rectangle tall (960x720)
     

    

13. Large rectangle wide (960x540)

    

14. Large square (720px)
     

    

13. Full width (1900x650)