Image

Creating Components

On this page:

Image example

EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

What is an image?

The image component allows you to place an image that extends to the full width of the column in which it is placed.

How to add an image

  1. Click the edit link at the top of the page

    Example of selecting the edit button on a page
  2. Move your cursor where you want to place the component. (Add a section if needed). 

  3. Click the plus icon.

    Example of the plus icon with a red square around the icon

  4. Select Image from the menu

    Choose an image component from the menu

     

Content 

  1. Click Add media.

    Add media for image component

  2. Select the appropriate image or upload the image to the Image Library.
    Recommended Image Dimensions: 3:2 - Maximum image size is 4MB

     


 

Styles

  1. Toggle to the Styles tab. 

    Image styles

  2. In the Aspect section, you can change the aspect ratio of the image (see below for examples).

    Select an image size from the dropdown
  3. Select the amount of additional space you would like above the component. 
  4. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.
Image top and bottom margin

Save

  1. Click Save.

  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.

  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.
     

    Example: of the Done button outlined

Style options

  1. Example of a Default image 
     

    EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

  1. Small portrait (250x375)
     

    EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

  1. Small rectangular (240x160)

    EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

  1. Small square (250px)

    EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

  1. Medium portrait (360x540) 

    EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

  1. Medium rectangular (480x320) 

    EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

  1. Medium rectangular tall (720x540) 

    EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

  1. Medium rectangular wide (720x405) 

    EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

  1. Medium square (500px) 

    EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

  1. Large rectangular (720x480) 

    EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

  1. Large rectangular tall (960x720) 

  1. Large square (720px) 

  1. Extra large rectangular (960x640) 

  1. Extra large rectangular wide (960x540) 

  1. Extra large square (960px)

      

  1. Super large full width (1376px)