glasses on book

image with caption or credit content

Spotlight - Slider

This is a Tall Spotlight, right aligned, in the default color. 

glasses on book

image with caption or credit content

Spotlight - Slider Image 2

This is a Tall Spotlight, left aligned, in gray. 

Switch color palette

Click on your color palette below to match this page's appearance to your site

Canyon color palette: various shades of turquoise, gray, and red

 

 

 

 

Canyon

 

Cardinal colors

 

 

 

 

Cardinal

 

Cliff color palette colors: various shades of red and gray with a splash of turquoise

 

 

 

 

Cliff

 

Lake color palette on colorful theme

 

 

 

 

Lake

 

Mountain color palette on colorful theme

 

 

 

 

Mountain

 

Ocean color palette on colorful theme

 

 

 

 

Ocean

 


Confused?

If things look different on your site, you must be on the Traditional theme. Visit the Traditional reference site.

Main content start

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

Embedding Media into a Text Area

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: 

glasses on book

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.


 

Example with added caption.

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. 

 


 

glasses on book
Another example using a caption.

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.


 

glasses on book
Here is an example of a small square image with a long caption. Since the caption is long and the image is small, more of the image is covered by text.

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

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:

  • 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.

Photo Considerations

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.

Resources

Additional information, including step by step instructions for laying out media as shown above can be found in our Drupal 9 Wiki Guide:
 

Accessibility concepts can be found on the SODA website: