Images and Files

You can add images and files to your website.

When adding an image or file, give the file a name. This is helpful when searching and selecting Image/Files later on. This can be the same as the filename, but is independent.

Next, select a file from you computer. Below each upload field there is help text that points out any restrictions regarding file size, type.

We highly recommend compressing images for the web using desktop software like Adobe Photoshop, GIMP or online tools like https://compressor.io/. Page loads are directly affected by image file sizes.

Images

Pro Tip: For images, try to upload high-resolution, small file size images. This will ensure fast loading and great viewing experiences.

After upload, more settings will appear.

Alternative Text: It is important to provide alternative text for images to aid visually-impaired users.

Image Thumbnail: A rendered thumbnail of your uploaded image should appear. There are areas of the site that will use this image and crop it to fit the space. Click on the focus area of the image. This helps to make sure that an important part of the image isn't removed during cropping. There will also be a preview link under the thumbnail image with different image styles used on the site to make sure the focus you selected will work for the image.

Image Specifications

Section Background Image: The largest is 2000x2000px scaled and cropped. Upscaling can occur. We recommend a center focal point or no focus as the image is scaled down and positioned differently based on device size and content. Square aspect ratio images (1:1) work best for most devices sizes/content combinations.

Featured Image: We recommend a 16:9 aspect ratio for featured images (e.g. page, article). The largest dimensions for a featured image is 2592×1458 scaled and cropped. Focal Point is supported.

Person Photo: We recommend a 1:1 aspect ratio for person photo. The largest dimensions for a featured image is 2592×2592 scaled and cropped. Focal Point is supported.

Carousel Image: We recommend a 16:9 aspect ratio for carousel images. The largest dimensions for a carousel image is 2592×1458 scaled and cropped. Focal Point is supported.

Card/Teaser Images: We recommend a 16:9 aspect ratio for card/teaser images. The largest dimensions display for a card/teaser image is 2592×1458 scaled and cropped. Focal Point is supported.

Image Gallery Thumbnail (Default): 768px x Auto - Maintains original aspect ratio but scales to a horizontal width of 768px.

Image Gallery Thumbnail (Masonry): 768px x 768px - Image is cropped into a 1:1 square image with a center pixel focus. Focal Point is not currently supported.

Image Gallery Modal (Lightbox): The image maintains original aspect ratio but is scaled down to fit within the browser viewport if it is too large.

Large, Medium, Small: 480px, 220px, 100px (WYSIWYG areas) - Maintains original aspect ratio and scales the largest side (horizontal, vertical) to the pixel length.

Original (WYSIWYG areas): Displays the image as uploaded to the site but will have a max width of the container element it resides in. This is also the only way to display animated .gif files.

Deprecated

These image styles may still be used in some areas but have been deprecated.

Square: 768 x 768px. Focal Point is supported. - Will be replaced by a 1:1 2592×2592 image style.

SiteNow Card: 1200 x 600px. Focal Point is supported. Will be replaced by a 16:9 2592×1458 image style.

Wrapping an Image with a Link

  1. Add the image to WYSIWYG
  2. Add a link above the image you just added to your WYSIWYG
  3. Select 'Source' on your WYSIWYG
  4. Find the <drupal-entity> code of the image you want to wrap in a link
  5. In the line above <drupal-entity>, add <a href=“https://URL” title=“Title”>
  6. At the end of the drupal entity code (</drupal-entity>), close the link bracket by adding: </a>
  7. You should see: <a href="https://URL" title="Title"><drupal-entity></drupal-entity></a>