Layouts for Photos and Media

Click your site's color palette from the left sidebar to see how each Component will look on your website.

Photos and other media can be added to your site in several different ways, depending on the type of media and how you wish for them to be displayed. 

Jump to: 

Embedding media into a Text Area
Photo Album Grid
Photo Album Slideshow
Maintaining Accessibility when using Images
Resources

Photos and videos can be placed directly into a Text Area. To do this, add a Text Area Component. Choose the "insert from media library" button from the Text Area toolbar. Here are some examples of how they can be formatted: 

Once the media is added to your Text Area, you can click on the item to bring up some options, including orientation (none, left, right, center). Captions can also be added to your image. This example displays a large squared image without alignment or caption. The text that follows will be displayed below the image.

This is an example of right-aligned media, this time with a caption. It functions exactly the same as the above example, with the exception that the image is now aligned on the right, and the text is located on the left. Text that extends beyond the bottom of the image will automatically wrap around it.

The caption is always displayed at the bottom of the image and is shown in a smaller, italicized font. It adds a dark but transparent background behind the caption.

Images can be displayed in a variety of sizes. They can be small, medium, large, or extra large, and they can be scaled or cropped into a square. This example uses a medium squared image.

It is worthwhile to note that all of the text following an embedded image will float to the side, depending on the selected orientation. If you don't have a lot of text next to, for example, an extra large image, then the subsequent component will also be wrapped. 

This is an example of left-aligned media without a caption. It functions exactly the same as the above example, with the exception that the image and text are now flipped. Text that extends beyond the bottom of the image will automatically wrap around it.

Since no caption is used in this example, there is no text overlay on the bottom portion of the image.

Images can be displayed in a variety of sizes. They can be small, medium, large, or extra large, and they can be scaled or cropped into a square. This example uses a medium scaled image.

It is worthwhile to note that all of the text following an embedded image will float to the side, depending on the selected orientation. If you don't have a lot of text next to, for example, an extra large image, then the subsequent component will also be wrapped. 

This is an example of center-aligned media with a caption. It functions exactly the same as the above examples, except that the image is now in the center and text is displayed below. Images can be displayed in a variety of sizes. They can be small, medium, large, or extra large, and they can be scaled or cropped into a square. This example uses a large scaled image.

Here is an example of a small square image with a caption. As you can see, the smaller the image, the more of the space that is covered by the caption. This is particularly true when the caption is long.

Videos can also be embedded using this method. Here is an example of a left-aligned video clip. Unlike images, the size (small, medium, large, extra large) and shape (scaled vs square) cannot be edited when embedding a video into a Text Area.

Photo Albums are great for event photos. They include a headline and description, with up to 60 images. An optional link can be included at the bottom of the Album. When Photo Albums are used for event photos, it can be useful to include a link to the event from your Events page.

There are two layout options for Photo Albums:

• A Photo Grid displays all of the album's images on the page. 
• A Slideshow displays one image at a time and users can click to advance to the next. 

Unlike individual images that are embedded into a Text Area, images within a Photo Album cannot include captions or credit. To include this information, add a Text Area below the Photo Album. Select the caption or credit style for this text. 

Example of caption style.

Example of credit style.

Maintaining Accessibility when using Images

Maintaining accessibility standards is always critical, and can sometimes be overlooked when adding media. To avoid an inadvertent accessibility misstep, be mindful of all of the the data fields within the "edit media" panel.

In particular, pay attention to the "Decorative Image" checkbox. This defaults to being checked, so be sure that your image is truly decorative before moving on. When the image is not merely for decoration or ambiance, always provide short but descriptive alternate text (also called "alt text"). Including alt text with your images ensures all individuals, regardless of visual ability, can engage with your content. Alt text should be a concise summary that presents the same content or function of the image, for example, "Photo of Jane Stanford accepting the Amy Blue award."

Tips for Writing Effective Alt Text

• Describe the image as specifically as possible. 
• Keep it short (around 125 characters or less).
• Don't include "image of," "picture of," "graphic of" etc. Screen readers will inform their users that the text is from an image, making your additional text redundant.
• Don't include the file extension, .jpg or .png, .gif, etc. 
• If the image medium is important (such as a photograph or oil painting), then include the medium in your alt text.
• Image buttons should have an alt attribute that describes the function of the button like, "search," "donate," “sign up,” "apply now," etc.

Learn more about alternative text

Captions and Photo Credit

Additional information, such as the credit owner or additional context, can be provided in the Caption and Credit area. Captions or credits are limited to 160 characters. The size, placement, and formatting will vary based on your theme and color palette, as well as to which type of Component the image is added.