Photo Box

Best Practices

Overview

When you insert an image as a stand-alone page component (i.e., not as part of a navigation button, list module, etc.), you must select how the image is to be used:

This topic covers the “photo box” use.  A photo box is essentially an image container with optional title, caption, and action button.  The title and the image itself can be links.  All of these options are available in the card, text-box module, and image with caption, which are all much more flexible content elements. If you are creating new content, consider using one of those content elements instead.

Image Title
Example image: pink building

Caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example image: pink building

Caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Usage

  • Use the photo box to highlight a link or key message. For greater flexibility, consider using the card or the card-enabled text-box module.
  • To group a set of photo boxes, you can place the photo boxes in the same Visual Composer row and apply a template background color to the row.  (See examples on this page.) A better solution is a multi-section card.
  • Do not use with large detailed images in small spaces (such as an infographic).  Consider inserting the image as an “image-only” type and enabling the large-image viewer.

General Guidelines

  • Use image styles consistently.
  • Keep the mixing of image styles to a minimum.
  • Remember that an effective caption is not simply “alt text” that displays on the page:  while alt text describes the content of an image, a caption should explain how the image relates to the page topic.

Accessibility

How to Write Effective Alt Text

Alt text descriptions seem simple, but they can be a bit challenging to write. Here are a few tips:

  • Make certain content owners are involved in the writing.
  • Describe the content of the image, keeping in mind context and target audiences.  Are scientific terms relevant to the topic and audiences?  Which visual details are relevant?
  • Remember that alt text represents an image in any situation where it cannot be seen or displayed (search engines, screen readers, etc.), so be as accurate as possible but brief — no more than 125 characters.
  • Do not use the phrase “image of” or “graphic of.”

  • photo icon

    Go to ExamplesSee examples on this page that illustrate key options.

Examples

Image Title
Example image: pink building

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image Title
Example image: pink building

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image Title
Example image: pink building

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Above are three photo boxes with a gray background applied to the Visual Composer row. For each photo box the bottom container margin has been suppressed and margin/padding has been added (Advanced tab in photo box settings). For a more flexible solution, see the multi-section card.

Page last reviewed: May 10, 2018
Content source: WCMS / Template Team