Teaser Cover
What is teaser cover?
In Lively Blogs, teaser cover refers to the visual or multimedia component used as a preview for blog posts. It adds an engaging touch by supporting both images and video files, giving users more flexibility to showcase their content in dynamic and visually appealing ways.
How is teaser cover chosen?
Lively Blogs follows a specific logic to select teaser cover for blog posts. Here’s how it works, in order of priority:
Priority Level | Teaser cover | Details |
---|---|---|
1 | Attachment with the 'teaser' label | Assign the label 'teaser' to a specific image or video to ensure it is always prioritized. |
2 | Header image | If no 'teaser'-labeled attachment exists, the blog post’s header image is used as teaser cover. |
3 | Media from blog post content | If neither a 'teaser'-labeled attachment nor a header image is available, the first supported image or video embedded in the blog content is used. |
4 | No media found | If no images or videos are available, no teaser cover will be displayed. |
Supported video formats
HTML specifications don’t enforce a standard for video/audio formats, so support may vary between browsers and devices. The most commonly supported formats are MP4, WebM, and OGG.
Tips for using teaser cover effectively
To make the most of teaser cover, follow these best practices:
Choose a relevant visual or video: Teaser cover should align with the blog post content to set the right expectations for readers.
Optimize media for performance: Compress images and use videos with a reasonable file size to prevent slow loading times.
Consider accessibility: When uploading images, use descriptive file names. Lively Blogs uses the file name as the alt text for images. Alt text provides essential context for screen readers and improves the user experience for visually impaired readers (for example, instead of using IMG1234.png, use team-meeting-in-progress.png).
By understanding how teaser cover works and selecting the right visuals, you can make your blog posts more engaging and professional.