Post Cards Element
The Post Cards Element lists posts, pages, portfolio items, products or taxonomy terms, each one shown with a Post Card design you build yourself in the Tirenoa Library. Because the card is your own design, the same element can show a news grid, a team overview, a product carousel or a list of categories.
You choose which items appear with detailed query options (post type, categories, tags, IDs, custom fields, order) and how they appear: as a grid, masonry, carousel, slider, coverflow, marquee or stacking cards, with filters and pagination where the layout allows it.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Post Cards Element
First create a Post Card in the Tirenoa Library, then add the Post Cards Element to a page or layout and select it in Post Card. Choose the Content Source: Posts for a normal query, Related for items that share terms of the chosen Taxonomy with the post the element is placed on, or Terms to list the terms of a taxonomy instead of posts. For Posts, set the Post Type, narrow the result with Posts By and the include and exclude options, Post IDs or a custom field, and set Number of Posts, Posts Offset, Order By and Order. Pick a Pagination Type and write a Nothing Found Message for empty results.
On the Design tab choose the Layout. Grid and masonry use Number of Columns, Column Spacing and Row Spacing, and with Show Filters they add filter links above the cards, built from the terms of the taxonomy chosen in Posts By. Carousel, slider, coverflow and marquee add their own options: autoplay, loop, scroll items, navigation arrows and dots, masked edges and a custom drag cursor. Stacking cards stick on top of each other while the page scrolls, starting at the Stacking CardsOffset.
Apply Alternate Post Cards lets you mix designs: each alternate card is used at a position you set, either once or repeating, and can span several columns, for example a wide featured card after every few regular ones. Link Off Canvas connects an Off Canvas to the cards, so its dynamic content is filled with the data of the card that opened it. For shop listings, Post Card List View selects a second card design used when visitors switch to the list view.
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.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Post Card | Select a saved Post Card. Create new or edit existing ones in the Tirenoa Library. |
| Apply Alternate Post Cards | Set to “yes” to enable alternating Post Cards. |
| Alternate Post Cards | Add alternate Post Cards. |
| Post Card List View | This post card will be used in the list view which can be triggered with the sorting element. Post cards can be created in the Tirenoa Library. |
| Link Off Canvas | Select an Off Canvas you want to link to your Post Cards element. This allows you to fill the Off Canvas dynamic data endpoints with the data of the single Post Cards. |
| Content Source | Select the type of content you would like to show. NOTE: The related option will fetch items related to the post that it is placed on based on taxonomy selection. |
| Repeater Field | Enter field name you want to use. |
| Relationship Field | Enter field name you want to use. |
| Post Type | Select the post type to display. |
| Taxonomy | Select which taxonomy to use. |
| Posts By | Select which taxonomy to pull posts from or select all to pull all. |
| Post Status | Select the status(es) of the posts that should be included or leave blank for published only posts. |
| Password Protected Posts | Choose if results should include, exclude or be limited to password protected posts. |
| Ignore Sticky Posts | Select if sticky posts should be displayed first (“No”) or as part of the selected ordering (“Yes”). |
| Include Categories | Select a categories or leave blank for all. |
| Exclude Categories | Select a categories or leave blank for all. |
| Include Tags | Select a tags or leave blank for all. |
| Exclude Tags | Select a tags or leave blank for all. |
| Include | Select a or leave blank for all. |
| Exclude | Select a or leave blank for all. |
| Include Manufacturers | Select a manufacturers or leave blank for all. |
| Exclude Manufacturers | Select a manufacturers or leave blank for all. |
| Include Series | Select a series or leave blank for all. |
| Exclude Series | Select a series or leave blank for all. |
| Include Applications | Select a applications or leave blank for all. |
| Exclude Applications | Select a applications or leave blank for all. |
| Include Technology Types | Select a technology types or leave blank for all. |
| Exclude Technology Types | Select a technology types or leave blank for all. |
| Include Cooling Methods | Select a cooling methods or leave blank for all. |
| Exclude Cooling Methods | Select a cooling methods or leave blank for all. |
| Include Oil Types | Select a oil types or leave blank for all. |
| Exclude Oil Types | Select a oil types or leave blank for all. |
| Include Portfolio Categories | Select a portfolio categories or leave blank for all. |
| Exclude Portfolio Categories | Select a portfolio categories or leave blank for all. |
| Include Portfolio Skills | Select a portfolio skills or leave blank for all. |
| Exclude Portfolio Skills | Select a portfolio skills or leave blank for all. |
| Include Portfolio Tags | Select a portfolio tags or leave blank for all. |
| Exclude Portfolio Tags | Select a portfolio tags or leave blank for all. |
| Include FAQ Categories | Select a faq categories or leave blank for all. |
| Exclude FAQ Categories | Select a faq categories or leave blank for all. |
| Include Groups | Select a groups or leave blank for all. |
| Exclude Groups | Select a groups or leave blank for all. |
| Post IDs | Enter a comma separated list of post IDs. |
| Custom Field – Name | Enter the custom field (or meta) name. |
| Custom Field – Value Comparison | Select the custom field (or meta) comparison type. The “like” comparison is needed when you want to check serialized data for equality. |
| Custom Field – Value | Enter the custom field (or meta) value. |
| Display Products By Price Type | Include products depending on the price type. |
| Out Of Stock Products | Include or exclude out of stock products. |
| Show Hidden Products | Display hidden products that are excluded from search or catalogs. |
| Show Filters | Choose to show or hide the filters. |
| Number of Posts | Select number of posts per page. Set to -1 to display all. Set to 0 to use the post type default number of posts. For portfolio and products this comes from the global options. For all others Settings > Reading. |
| Posts Offset | The number of posts to skip. for example 1. |
| Order By | Defines how posts should be ordered. NOTE: (Price|Popularity|Rating) options only work for product-related queries. |
| Custom Field Name | Insert custom field name. |
| Custom Field Type | Select custom field value type. |
| Order | Defines the sorting order of posts. |
| Condense Events In Series | Turn on to show only the next event in each series. |
| Show Only Upcoming Events | Whether or not the events displayed will be only from the current date. |
| Show Only Featured Events | Whether or not to display only events that are featured. |
| Pagination Type | Select the type of pagination. |
| Nothing Found Message | Replacement text when no results are found. |
| 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 |
|---|---|
| Layout | Select how you want Post Cards to display. |
| Marquee Direction | Select the marquee direction. |
| Stacking CardsOffset | Set the offset at which stacking cards should become sticky. |
| Post Card Rotation Angle | Set the rotation angle for the Post Cards in coverflow layout. |
| Slide Depth | Set the z-axis translation offset of the slides in coverflow layout. |
| Transition Style | Choose the transition style for the slider layout. |
| Filters Typography | Controls the typography of the filters content. Leave empty for the global font family. |
| Filters Container Height | Controls the filters container height. In pixels. |
| Filters Container Border Size | Controls the border size of the filters container. In pixels or percentage, for example 10px or 10%. |
| Filters Container Border Color | Controls the border color of the filters container. |
| Filters Alignment | Select the filters content alignment. |
| Filters Link Hover Color | Controls the hover color of the filters link. |
| Filters Link Active Color | Controls the active color of the filters link. |
| Active Filter Link Border Size | Controls the filters link border size. In pixels. |
| Active Filter Link Border Color | Controls the color of the active filter link. |
| Post Card Alignment | Select the Post Cards alignment within rows. |
| Number of Columns | Set the number of columns per row. When using the coverflow layout, the total number of columns will also depend on other settings and available space. |
| Column Spacing | Insert the amount of horizontal spacing between items without ‘px’. for example 40. |
| Row Spacing | Insert the amount of vertical spacing between items without ‘px’. for example 40. |
| Separator | Choose the horizontal separator line style. This will only be used on single column grids or list view. |
| Separator Color | Controls the separator color. |
| Separator Width | In pixels (px or %), for example 1px, for example 50%. Leave blank for full width. |
| Separator Alignment | Select the separator alignment; only works when a width is specified. |
| Separator Border Size | In pixels. |
| Transition Speed | Set the duration of the transition between Post Cards. In milliseconds. |
| Scroll Items | Insert the amount of items to scroll. Leave at 0 to scroll number of visible items. NOTE: Please make sure that the number of total items is an even multiple of the number of scrolled items (2x, 3x, etc.). For larger numbers of scrolled items, or when using centered slides it is best to have an even larger multiple to ensure smooth looping. |
| Center Active Post Cards | Choose to always have the active Post Card centered. Otherwise it will be left on LTR and right on RTL sites. |
| Mask Edges | Choose if the edges should be masked with a fade out effect. Navigation arrows will not be displayed, if masked edges are active. |
| Display Shadow | Choose to show a shadow on the individual slides on coverflow layout or during transitions. |
| Autoplay | Choose to autoplay the items. |
| Autoplay Speed | Set the autoplay speed, the duration between transitions. In milliseconds. |
| Autoplay Pause On Hover | Choose to pause autoplay on hover. |
| Loop | Choose to enable continuous loop mode. |
| Mouse Control | Choose to enable mouse drag and/or wheel control on the carousel, coverflow and slider layouts. |
| Free Mode | Choose to enable free mode for dragging and scrolling the Post Cards arbitrary amounts. |
| Mouse Pointer | Choose to enable mouse drag custom cursor. |
| Cursor Color Mode | Choose cursor color mode. |
| Cursor Color | Controls the color of cursor. |
| Show Navigation | Choose to show navigation buttons on the carousel / slider. Note: You can also set the CSS ID (e.g. my-id) for this Post Cards element and use #my-id-next, #my-id-prev as links on a Button element to navigate through the slides. |
| Arrow Box Dimensions | Controls the width and height of the arrow box. Enter values including any valid CSS unit. |
| Arrow Icon Size | Set the arrow icon size. Enter value including any valid CSS unit, for example 14px. |
| Previous Icon | Click an icon to select, click again to deselect. |
| Next Icon | Click an icon to select, click again to deselect. |
| Arrow Position | Controls the position of the arrow. Enter value including any valid CSS unit, for example 14px. |
| Arrow Border Radius | Enter values including any valid CSS unit, for example 10px. |
| Arrows Styling | Use filters to see specific type of content. |
| Arrow Background Color | Controls the background color of arrow. |
| Arrow Color | Controls the color of arrow. |
| Dots Position | Controls the position of the dots. Enter value including any valid CSS unit, for example 14px. |
| Dots Spacing | In pixels. |
| Dots Margin | In pixels or percentage, for example 10px or 10%. |
| Dots Alignment | Controls the border style of the arrow. |
| Dots Styling | Use filters to see specific type of content. |
| Dots Size | In pixels. |
| Dots Color | Controls the color of the dots. |
| Margin | In pixels or percentage, for example 10px or 10%. |
| Load More – Button Styling | Customize “Load More” button colors. |
| Text Color | Select the button text color. |
| Background Color | Select the button background color. |
| Hover Text Color | Select the button hover text color. |
| Hover Background Color | Select the button hover background color. |
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). |
| Offset of Animation | Controls when the animation should start. |
| Animation Delay | Controls the delay of animation between each element in a set. In seconds. |
Tips
- Build and test the Post Card design first. The element shows nothing useful until a card is selected in Post Card.
- Set Number of Posts to a fixed number for carousels and sliders. Loading every item with -1 makes the page heavier without adding much for visitors.
- Show Filters is only available for the grid and masonry layouts with the Posts source, and pagination is not available for carousel, slider, coverflow and marquee.
- For a smooth loop in a carousel, keep the total number of items a multiple of Scroll Items, as the option description explains.
- Related reads the terms of the post the element is placed on, so it belongs on single posts or products, for example in a post layout. The current post itself is never listed.
- With Mask Edges turned on, the navigation arrows are hidden. Use dots, autoplay or dragging so visitors can still move through the items.