Display a photo in your Related Content Container. The component suports a title, additional text, and related links.
State and federal rules require most images to be ADA compliant,
with meaningful 'alt text.' > read
more on accessible images
Add the component to the Related Content Container. There are two associated pieces, a special photo component, and a standard List component. There are two associated sections, an upper title area (with a special photo component), and a lower list (with a standard List Builder component).
Only JPG, GIF and PNG formats are allowed. JPGs are recommended for best results and faster load times.
To change the 'Photo' text, double-click inside the upper component area.
Headline: Add an optional descriptive title. By default,
'Photo' is displayed. This title will be in bold on the published
page and appear above the image.
Subheading: Add an optional secondary heading that will appear below the image.
Primary link: Provide an optional hyperlink.
Alt text: Add a description of the image for users who may have difficulty seeing it.
Alt Text is generally required under state and federal accessibility laws. Read more about Alternative Text.
Add an image by dragging one from the Content Finder onto the component.
Another way to add an image is to click within the empty Image
tab and then upload an image from your computer. (Your image will
not be stored in the Digital Assets Manager if you choose this
After adding your photo, crop and/or rotate your image by using the buttons that appear toward the bottom of the dialogue box.
If you already have an image in the Image tab but want to replace it with a different one, click the Clear button adjacent to the crop/rotate tools.
Verify that the image is large enough for the space on the page you are filling; if an image is too small it will be stretched and thus appear pixelated or blurry on the page.
While basic image crop and rotation tools are available within the component, for best results use an external image editor such as Adobe Photoshop prior to upload.
Additional text, such as a caption, can be added in this
tab. Enter your desired text. Apply any formatting or links
using the Rich
Text Editor. This text will appear immediately following the
Subheading, below the image.
For hyperlinks, the option is provided to open in new
page. When that is selected, an additional icon will follow the
linked text, to alert visitors that they will be taken to a new
browser window, or even leave the current website. If the hyperlink
goes to a downloadable file, an document icon will instead be shown
as well as the file size if the file is on the same server. (Read
more about link labels.)
Here you will choose the type of list, as well as additional advanced settings.
Build list using: This drop-down menu asks how you want to build your list. You have the option to build it using:
Be careful not to list the parent page here by mistake--it
can create a loop.
> Read more
New window: Select so each clicked page is displayed in a new browser window.
'Open links in new window' and 'Display as: Full content' are incompatible and will disable each other when selected.
When New Window is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website.
And if the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)
Display as: This drop-down menu asks how you would like your list to be displayed. Lists fall into the general categories of Links, Teasers and Content:
'Display as: Full content' and 'Open links in new window' are incompatible and will disable each other when selected.
Order by: There are several ways in which you can order your list:
Reverse order - Check the box to select whether you would like to inverse the order selected in the Order by field.
Was this page helpful?
We recommend at least 800px x 536px for landscape or 536px x 800px for portraits (aspect ratio 1.5:1). Larger images are encouraged up a maximum of 2500px.
September 22, 2017