Overview
In this guide, we review the options available for adding images to your website in WordPress. For the most part, these components can only be used in the Default and Content Detail templates, but we note when a component can be used in the Chaptered Page template or in WordPress posts.
Image resizing and editing guidance
Our focus here is on components. For image editing guidance or best practices (such as adding alt text for accessibility), refer to the following guide:
Rich Text component
For a simple, no-fuss layout, you can add images using the Rich Text component. Some details about this component:
- Rich Text is available in the Default, Content Detail, and Chaptered Page templates, and in WordPress posts
- Images do not have to follow specific dimensions or a set aspect ratio
- Images can be aligned to the left, right, or center
A note about the resizing feature
We recommend performing your image resizing and edits prior to uploading the image to WordPress. Rich Text does have a resizing feature but may crop the image in unexpected ways to fit. If you do not mind this automatic cropping, you can use the resizing feature:
Quick guide
- Place your cursor in the Rich Text component where you want to add the image.
- Click Add Media. Upload or select an image, and insert it into the component.
- Click the image, and select the Edit
icon.
- Make sure that you fill out the Alternative Text for accessibility.
- You can edit the following fields:
- Align: Note that if you select Left or Right, the text will wrap around the image
- Size: Select a preset size or select Custom Size
Detailed guide (with screenshots)
- Place your cursor in the Rich Text component where you want to add the image.
- Click Add Media. Upload or select an image, and insert it into the component.
- Click the image, and select the Edit icon.
- Make sure that you fill out the Alternative Text for accessibility.
- You can edit the following options:
- Align: Note that if you select Left or Right, the text will wrap around the image
- Size: Select a preset size or select Custom Size
Rich Text demonstration
Refer to the following guide for a demonstration of the Rich Text component:
Components that showcase individual images
These components help display an image with more visual emphasis than Rich Text. Most of these components intend for you to add text to accompany the image:
- Featured Block
- Full Width Image + Text
- Hero Program
- Scrolling Text + Image
- Signup Form
A note about image size: It's okay if your image doesn't perfectly match the recommended dimensions, but try to ensure that it meets the listed aspect ratio. Otherwise, WordPress may automatically crop the image to fit.
Featured Block
Featured Block requirements
- Aspect ratio: 1:1
- Recommended dimensions: 1800 x 1800 px
- Availability: Default, Content Detail
Featured Block guidelines
- How to use: Featured Block guide
- Image can be positioned to the left or right side
- If the text exceeds the height of the image, the image will be cropped to portrait to fit
- Text fields: (required) title; (optional) description, link, eyebrow
- Alternatives: If your text is very lengthy, consider using Scrolling Text + Image
Full Width Image + Text
Full Width Image + Text requirements
- Aspect ratio: 16:9
- Recommended dimensions: 2000 x 1150 px
- Availability: Default, Content Detail
Full Width Image + Text guidelines
- How to use: Full Width Image + Text guide
- Text block appearance: Black text on a white rectangular block
- Larger screens: Text block covers part of the left or right side of the image
- Smaller screens: Text block covers the lower portion of the image
- Text fields: (required) title; (optional) description, links, eyebrow
- Alternatives: If you want to display the image without the white text block, consider using:
- Hero Program: For images at the top of the page
- Rich Text with the image at full width: For images lower on the page (however, the image will not extend fully to the edges of the page)
Hero Program
Hero Program requirements
- Aspect ratio: 16:9
- Recommended dimensions: 2000 x 1150 px
- Availability: Default, Content Detail, Chaptered Page
Hero Program guidelines
- How to use:
- Image appears in a page-wide banner below the menu and above the page content
- Avoid putting critical information along the lower portion and upper edge. These areas may get covered by the menu bar, page title, and link if used. Longer page titles may cover a larger portion of the image than the pictured example above.
- Text fields: (required) title; (optional) description, link
Scrolling Text + Image
Scrolling Text + Image requirements
- Aspect ratio: 3:4
- Recommended dimensions: 1800 x 2400 px
- Availability: Default, Content Detail
Scrolling Text + Image guidelines
- How to use: Scrolling Text + Image guide
- Image can be positioned to the left or right side
- This component works best for large amounts of text
- Text fields: (required) title, chapter titles, chapter descriptions; (optional) description, link, eyebrow
- Alternatives: If your text is short, consider using Featured Block
Signup Form
Signup Form requirements
- Aspect ratio: 3:2
- Recommended dimensions: 1350 x 900 px
- Availability: Default, Content Detail, WordPress posts
Signup Form guidelines
- How to use: Signup Form guide
- Image can be positioned to the left or right side of the text block
- Text block appearance:
- Light (gold background) or dark (black background) options available
- Text fields: (optional) title, description, link
- Alternatives: If you prefer to not have a background color for the text, consider using Featured Block or Rich Text
Components that showcase a series or set of images
These components work well for image galleries and for information series. With the exception of Photo Wall, the set of images that you use within each component must be the same size:
- Editorial Cards
- Image Gallery
- Modal Image Gallery
- Photo Wall
- Stacking Cards
A note about image size: It's okay if your images don't perfectly match the recommended dimensions, but try to ensure that the images used within your selected component are the same size, and that they meet the listed aspect ratio. Otherwise, WordPress may automatically crop the images to fit.
Editorial Cards
Landscape option
Portrait option
Editorial Cards requirements
- Landscape:
- Aspect ratio: 16:9
- Recommended dimensions: 1050 x 591 px
- Portrait:
- Aspect ratio: 5:7
- Recommended dimensions: 975 x 1365 px
- Availability: Default, Content Detail
Editorial Cards guidelines
- How to use: Editorial Cards guide
- Appearance:
- Larger screens: Three images appear per row
- Smaller screens: One image appears per row
- Text fields:
- At the top: (optional) title, description
- For each image: (optional) title, description, link, eyebrow
Image Gallery
Image Gallery requirements
- Aspect ratio: 16:9
- Recommended dimensions: 1950 x 1097 px
- Availability: Default, Content Detail, WordPress posts
Image Gallery gudielines
- How to use: Image Gallery guide
- Arrows appear underneath the image for navigation
- Text fields:
- At the top: (optional) title
- For each image: (optional) caption
Modal Image Gallery
Appearance on website
Lightbox appearance once the gallery title is clicked
Modal Image Gallery requirements
- Aspect ratio: 16:9
- Recommended dimensions: 1950 x 1097 px
- Availability: Default, Content Detail
Modal Image Gallery guidelines
- How to use: Modal Image Gallery guide
- Main image appearance:
- Can be positioned on the left or right side against a gray background
- Does not appear in the image gallery unless you add it to the gallery
- Behavior: When the gallery title is clicked, the image gallery expands into a full-screen lightbox, and arrows appear underneath the image for navigation
- Text fields:
- Main image: (required) description, gallery title; (optional) title
- For each image in the gallery: (required) caption
Photo Wall
Appearance on website
Lightbox appearance once an image is clicked
Photo Wall requirements
- Aspect ratio: Flexible
- Recommended dimensions: Flexible
- Availability: Default, Content Detail
Photo Wall guidelines
- How to use: Photo Wall guide
- You can use differently sized images, and WordPress will automatically arrange them and assign them the same width
- Behavior: If any of the additional fields are filled out for an image, the image can be expanded into a full-screen lightbox
- Text fields:
- At the top: (optional) title, description
- For each image: (optional) title, description, link, Instagram link
Stacking Cards
Landscape option
Portrait option
Stacking Cards requirements
- Landscape:
- Aspect ratio: 16:9
- Recommended dimensions: 900 x 506 px
- Portrait:
- Aspect ratio: 3:4
- Recommended dimensions: 900 x 1125 px
- Availability: Default, Content Detail, Chaptered Page
Stacking Cards guidelines
- How to use: Stacking Cards guide
- Each image appears to the right of the accompanying description
- Text fields:
- At the top: (optional) title, description
- For each image: (required) title; (optional) description, link