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:
- Image only (basic image with no caption or title)
- Image with caption
- Photo box
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.
- Building in the WCMSSee key tips and guidelines for working with images in the WCMS.
- TP4 UX Best Practices [PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
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
- Always provide meaningful alt text. (See the topic on basic images for guidance on writing alt text.)
- Avoid low-contrast images. For more information, see the Color Contrast Analyzer.
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.”
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.