What's inside this article:
- Basic information
- Check the Website teaser images
- Use the Main image as the Website teaser
- Use custom Website teaser images
- Add alt text
- Use a loop video as the Website teaser
Basic information
The Website teaser images for a content page are displayed in the preview when the content page is promoted on the public site.
This article describes the most important options for managing Website teaser images.
Check the Website teaser images
Select Website teaser on the edit screen for the content page to check the current Website teaser images.
Each content page has two Website teaser images:
Horizontal image
The Horizontal image is used in almost all website previews. This means:
- On horizontal widget layouts
- In Related content
- In See Also links
- In search results on the public site
- On Category archive pages that use the List with thumbnails layout
- On Multimedia archive pages
Vertical image
The Vertical image is only used on vertical widget layouts. This means the following layouts that can be applied for a Content widget:
- Top story package with vertical carousel on mobile
- Vertical image
- Media slider vertical
If the content page might be promoted on a vertical widget layout, we recommend optimizing the vertical image. Otherwise, it is not necessary to optimize this version of the image.
Use the Main image as the Website teaser
When you add the Main image for a content page, the Main image is added automatically in the Website teaser settings as both the horizontal and vertical image. If you update the Main image, the Website teaser images will automatically update to match your changes.
If you are happy to use the Main image in the website preview, no further action is required. However, you might want to optimize the default cropping for the vertical image. Just click the Crop the image button.
Use custom Website teaser images
Optionally click Select content to choose a custom Website teaser image. Your custom image will replace the Main image in the website preview.
The custom Website teaser image will not update automatically to match changes to the Main image. While a custom Website teaser image is selected, you see the Restore to default button in the preview. If you click this button, the image will revert back to the Main image and will update to match further changes to the Main image.
Add alt text
You can optionally add custom alt text for a Website teaser image using the relevant field below:
- Horizontal image alt text
- Vertical image alt text
If the Website teaser image matches the Main image, it is not necessary to add custom alt text. This is because the alt text for the Main image will be applied automatically as the alt text for the Website teaser image (as long as no custom alt text is provided for the Website teaser image).
If you select a custom Website teaser image that does not match the Main image, it is important to manually add the alt text in the Website teaser settings.
Alt text is important for SEO and site accessibility. For details, see the following article:
Use a loop video as the Website teaser
If you add a loop video as the Main image for a content page, the static thumbnail of the loop video is added automatically in the Website teaser settings as both the horizontal and vertical image.
If you want the dynamic (moving) version of the loop video to play on widgets, it is essential to manually add the loop video via Website teaser > Loop video. If you do not perform this extra step, only the static version of the loop video will be displayed on widgets.
