Related Posts Element
The Related Posts Element shows a carousel of posts that are related to the one being viewed. It is a Layout Builder element: you place it in a Layout Builder section for single posts, portfolio projects or FAQs (Tirenoa > Layouts), and it finds and displays the related items automatically.
Related items are found by shared categories: blog posts by their post categories, portfolio projects by their portfolio categories and FAQs by their FAQ categories. It keeps visitors reading and gives search engines more internal links between pages on the same topic.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Related Posts Element
Add the Related Posts Element to a column in a single post, project or FAQ layout section. Choose a Layout: Title on rollover shows the title over the image on hover, Title below image prints the title, date and comment count under each image. Set Number of Related Posts, Maximum Columns and Column Spacing for the carousel, and choose Image Size: Fixed crops all images to the same size, Auto keeps each image’s own proportions.
Autoplay moves the carousel on its own, Show Navigation adds arrows, and Scroll Items sets how many items move at a time (0 moves one full view). The starting values of these options come from the related posts settings in Global Options. On the Design tab, Enable Heading shows or hides the heading, which reads “Related Posts”, “Related Projects” or “Related Faqs” depending on the post type, and HTML Heading Tag sets its tag.
When no related items are found, the element outputs nothing at all, so no empty heading is left on the page. Other post types usually have no matching categories and show no related items. If featured image placeholders are turned off in Global Options, only items with a featured image are listed.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Layout | Controls the layout style for related posts and related projects. |
| Number of Related Posts | Controls the number of related posts and projects that display on a single post. |
| Maximum Columns | Controls the number of columns for the related posts and projects layout. |
| Column Spacing | Controls the amount of spacing between columns for the related posts. |
| Image Size | Controls if the featured image size is fixed (cropped) or auto (full image ratio) for related posts. IMPORTANT: Fixed works best with a standard 940px site width. Auto works best with larger site widths. |
| Autoplay | Turn on to autoplay the related posts carousel. |
| Show Navigation | Turn on to display navigation arrows on the carousel. |
| Mouse Scroll | Turn on to enable mouse drag control on the carousel. |
| Scroll Items | Controls the number of items that scroll at one time. Set to 0 to scroll the number of visible items. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Enable Heading | Turn on if you want to display default heading. |
| HTML Heading Tag | Choose HTML tag of the heading, either div, p or the heading tag, h1-h6. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Assign categories carefully: an item that shares no category with others never has related items.
- Setting Number of Related Posts to 0 lists every related item. Keep the number modest, since every item loads an image.
- Fixed image size works best with a standard site width; Auto suits wider layouts.
- Use an H2 or H3 for the heading so it fits below the main content in the page’s heading order.