Images are an important way to add visual interest or information to your website.
- After selecting Image, you will be redirected to the Add Image page:
- Enter the name of your image in the corresponding text field.
- Select Choose File under the Image title. A popup will appear and you can select the image you would like to upload.
- After you upload the image, you have the option to add alternative text.
If this is an image of text or conveys important information, add that as Alternative text. However, if this is simply a decorative image, leave the Alternative text blank. That's the equivalent of alt="".
- Select the focal point of the image by moving the plus symbol around on the image:
- Next, you can enter the Caption or Credits of the image.
- When you’re ready, hit Save at the bottom left of the page.
Example of setting the focal point
When the focal point is set to the bottom and the image is used within a Card:
When the focal point is set to the top and the image is used within a Card:
Crop Image to Exact Dimension
Content elements that include an image, like the Banner and the Card come pre-populated with image sizes. You want to crop to the exact dimensions of images, here are some common sizes you will need to crop.
When you upload an image without cropping beforehand, Drupal will fit it into the space defined for the image. To get an optimal effect (and avoid unintended cropping) you’ll want to upload an image with dimensions that are close to the space defined for it. The resolution will be better if your image meets the recommended resolutions and sizes.
In order to optimize site storage:
- The resolution of the images should be set at 72 DPI
- The maximum size should be no larger than ~1920px wide
- The color mode should be RGB
Note: All image dimensions are width by height.
Top Banner and Banner
Aspect ratio: 30:11
3000px x 1100px recommended source size (72 DPI)
Card Images (including Media with Caption)
Aspect Ratio — 2:1
2000px x1000px recommended source size (72 DPI)
Image Resizing Resources
- Photo Editor
- Preview (available on Mac)
- Photo Compression