Page Comparison

...

Images

Files and images Images should be limited to 2MB (2,000KB). In general, there is no reason for an image to be larger than 1MB (1,000KB). You can While the site will allow you to upload larger files, however once you reach a certain file size the file/image will upload but not function. This limit is in place to ensure all your files will work as intended, while still giving enough room to upload a high quality image or file. 

...

Choosing an image

...

Additionally, do not use photo editing software to create image collages or add text to an image.

Your pages will display differently depending on your visitor’s screen size (mobile, tablet, desktop)

...

.

...

As such,

...

Additionally, do not use photo editing software to create image collages or add text to an image. As the image ratio changes, sections of the image will not display, which means the full photo collage or text will not always be visible. Additionally, using photo editing to add text to an image creates accessibility concerns.

Image dimensions

Hero images and the CTA: Full Width Image block are broken out since they require much larger images than other blocks. These are approximate sizes, you can go larger but we do not recommend choosing smaller dimensions. Also, keep in mind the file size limitation (2MB). 

• Large Hero and CTA: Full Width Image: 2000x700 (WxH)

• Other Blocks: 650x650 (WxH)

• Text Blocks: There are not pre-set sizes for images in text blocks. As such, you will need to upload an image that is already customized to the size you want. However, you will need to test your page on different screen sizes to ensure the image and text combination looks good on all screen sizes. 

Uploading images

In the admin menu, “Content ￫ Add Media ￫ Image” will take you to the image upload form. In the form, you have the following selections: 

• Name: Keep this descriptive but short. 

• Image: Click “Choose File” to upload an image. Once the image is selected, you'll have additional options, such as Focal Point and Alternative Text, which are discussed in the next sections 

• Revision Information, URL Alias, Authoring Information: Leave these to the defaults.

• Published: Make sure the checkbox is checked. Otherwise you can’t embed the image.

• Click “Save” when done.

Alt text (Alternative Text)

Alt text is an important component of accessibility. It presents the content and function of an image when the image itself can not be displayed, due to visual impairment or technical difficulties. 

When writing alt text, think of it like an original Twitter tweet: 140 characters or less. It should be short, sweet, and simple. Additionally, you want to think about the purpose and content of the image so you can add equivalent alt text. That’s true for all purpose-based images.

Generally, decorative images use null alt text. However, our system doesn’t allow for null alt text. So for a decorative image, include a very brief description of the image. 

Note: If an image is a link, the alt text must describe the link's function or intended direction. Where's the user being sent?

Adding alt text to an already uploaded image

There are two methods to edit an image to add alt text.

Method 1: Using the Media Folder

In the admin menu, “Content ￫ Media” will take you to the full listing of everything you uploaded to your site.

1. Use the search/filter section or click through pages to find the image you need to edit.

2. Click on the file name to open the Edit window for the image.

3. In the "Alternative Text" box, enter the alt text you want to use.

4. Save your changes.

Method 2: From the page where the image is embedded

Navigate tot he page where the image is embedded. 

Click Edit for that page (to see the Editing view for the page), then click Edit for the block where the image is used.

1. If the image is in a text block:

   1. Right-click on the image and choose "Edit Entity Image Embed"

   2. In the "Alternative Text" box, enter the alt text you want to use.

   3. Save your changes.

2. If the image is not in a text block:

   1. Click on the file name to open the Edit window for the image.

      1. If you are currently editing this page, you'll want to either open the link in a new window or save your changes to the page before following the link.

   2. In the "Alternative Text" box, enter the alt text you want to use.

   3. Save your changes.

Focal Point

Since images can be used in a variety of shapes and sizes, you don’t want to customize your image to a specific size. Instead, you want to upload a high quality image and use Focal Point to set a focus for the image that’s always visible, no matter where it’s used. 

The crosshairs on the image thumbnail is the Focal Point. Click and drag the crosshairs to change the focus. Each image has only one Focal Point, so the set focus will impact every location on the site where the image is used. 

When you’ve selected a new focus, click “Preview” beneath the thumbnail to see how the image will look in different block types. 

...

your images will adapt to different screen sizes which means you cannot guarantee the full photo collage or text will always be visible.  

Videos

...