Display a photo in the Related Content Container (plus title, text, and related links).
This component must be placed within a Related Content Container.
Last reviewed: October 24, 2022
Add the component to an existing Related Content Container.
There are two associated pieces, a special Photo component includes a title setting and a small text area and a separate standard List Builder component.
Click the wrench to configure the upper Related Photo details.
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: Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
Alt text: Add a description of the image for users who may have difficulty seeing it.
The UBCMS optimizes images for best display on the user's device, but we recommend:
Only JPG, GIF and PNG formats are allowed. JPGs are recommended for best results and faster load times.
Add an image onto the component.
The image allows for use of the Adaptive Crop tool.
The tool approximates how your original image will be cropped for desktop, mobile and teaser (thumbnail) views, allowing adjustments to better represent your desired focus in these contexts.
The interface responds to the main Image Size setting. Set the Image Size, then drag the Adaptive Crop cross-hairs to the center of your desired focus, and adjust the three sliders as desired to highlight the three zones.
The interface approximates the final displays. After you make your adjustments, we suggest you preview the results (e.g. using the mobile device emulator). And if you realize the List thumbnail is not working out as desired, consider also loading an image into page Properties that is cropped exactly as desired, where it will be used preferentially for teasers.
Use this tab to add additional text, such as a caption or description for the video.
Enter your desired text. Apply any formatting or links using the Rich Text Editor.
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.)
To add links, click the wrench 'configure' tool for the lower component area.
This is a standard List Builder component.
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:
Do not link to DAM assets using a relative path (/content/dam/...). For these you must use a File Download component. > read more about this Known Issue: Having Trouble Linking Downloadable Files in the DAM
New window: Select so each clicked page is displayed in a new browser tab. When selected, an additional icon will follow the linked text on your published page, to alert visitors they are about to be taken to a new browser tab, and possibly leave the current website.
Note: For accessibility reasons, be careful about sending your visitor to a new tab. This behavior may be unexpected and disortienting. (> Learn more about link accessibility.)
'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: Here are some of the ways in which you can order your list. Not all appear in the dropdown. Others may be available on request -- contact the DCT Help Team for details.
Note: Generally it is best to provide a value for this setting. When left blank, the results will obey the natural arrangement of the pages in their parent folder(s), but if the list is set up as a search or advanced search query, results will display by search relevance, and if the list is built by tags, the display order will be unpredictable.
Note to developers: some additional attributes are available on Author but not your live pages, so cannot be used, e.g. lastReplicated.
Reverse order - Check the box to select whether you would like to inverse the order selected in the Order by field.
Using server caching, 'random' content is shuffled to appear fresh for each visitor, but the entire original content collection is not redrawn each time it is presented. Instead, the server randomly pulls a sample of the original content after each cache refresh, and then shuffles that sample for your visitors. If you need to show the entire collection, take advantage of the 'show all' feature when it is available, and if your business needs require a truly random reassortment, please contact the DCT Help Team.
Alternative text ('alt text') is a short, written description that describes the appearance, content and/or function of an image on a webpage. Adding alt text is a best practice for all your UBCMS images and is required for accessibility so users will understand what they are not seeing.
Purely decorative images (that do not convey content or have a function on the page) can instead be set as "This image does not require Alt text" in some components, which also nullifies alt text that was previously entered.
Alt text is required in these contexts:
* When the image is a link, starts an animation or video, or is a navigational element, alt text should indicate its function, not the image's content (i.e., "watch video ABC" and not "screenshot from video ABC"). Screen readers will treat this image as a standard link.
Alt text can be added to images in Assets. This is required for images that are then used in the Photo Gallery component, while it can also be used as an alternate source for Alt text in some components (e.g. the Photo setting 'Get Alt text from Assets').
Best practice:
Text Over Photo provides an accessible alternative to using images that have embedded text.
> Learn more about the Text Over Photo component.
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions: