It's Summer Camp Time!
Register now for Summer at Camp Regis, serving both boys and girls in Pre-K through eighth grade.
The ‘Posts Filtered Grid (Light)’ Best Practice Asset displays a visually-engaging grid of posts from the Posts module with supporting tools to filter the posts on show. It includes the following key features and is available in three different layouts:
The Posts Filtered Grid is designed for showing large sets of information on a single page in a format that’s very easy for visitors to explore. Some common applications include:
Important: This Best Practice Asset can be added to multiple pages on the website, but must always be added to a full-width page layout without left or right banners.
When adding a new Posts Filtered Grid to your website, you can choose from one of the following three layout options:
Please refer to the instructions on how to ‘Add a New Filtered Posts Grid to a Page’ for full guidance on how to add the desired layout to a page.
Important: The Posts Filtered Grid is only compatible with the specific elements on show in these layouts. Please follow the instructions in this section closely when updating this Best Practice Asset to ensure the content displays correctly.
The following pixel dimensions are recommended for the images in the Posts Filtered Grid. These will help you to achieve an ideal balance of visual quality and loading speed:
Image Area | Width (pixels) | Height (pixels) |
---|---|---|
Post background image | 800 | 557 |
There are two ways of preparing an image to match this size:
Each post in the Posts Filtered Grid supports a single image in the background. The following best practices are recommended when preparing these images to ensure they display effectively:
The following section explains how to add a new Filtered Posts Grid to a page. To ensure the new feature displays correctly, please follow each set of steps in the order presented:
As part of the setup process for this Best Practice Asset, Finalsite has added examples of the three different Filtered Posts Grid layouts to your website. Begin by copying and pasting one of these example layouts onto the desired page in your website:
With your new Filtered Posts Grid in place, link up the three Post Tools elements to cloned Post Grid so that they filter the content showing on this specific page.
First, link the Post Tools element displaying the keyword search:
Next, link the Post Tools element displaying the tag filter:
Finally, link the Post Tools element displaying the category filter:
Once all Post Tools elements have been linked up, the options in the tag and category filters will display automatically based on the tags and categories applied to the posts in the selected Posts Grid.
Tip: If you don’t wish to include all three filters in the Posts Filtered Grid you can optionally delete the Post Tools elements that are not required. Please note that this may result in extra white space within the layout of the feature.
By default, the Posts Grid is set to display all posts from the ‘Posts Filter’ board. This contains a set of example posts to demonstrate the functionality of this Best Practice Asset.
You can optionally update the posts in this board to show the desired content, or change the settings of the Post Grid to display posts from a different board.
To update the Posts Grid to display posts from a different board:
Important: All posts set to display in the Post Grid must follow the content requirements for this Best Practice Asset. Please refer to the ‘Add a New Post to the Post Grid’ section in these instructions for further guidance on this.
The following section explains how to add a new post to a Filtered Post Grid. To ensure the new post displays correctly, please follow each set of steps in the order presented:
Begin by opening the Posts module and creating a new Post:
Note: If the summary text is too long to fit within the available space on the page, it will be shortened automatically and an ellipsis will display after the final word to indicate that some of the text has been omitted.
For the filtering functionality to work correctly in the Posts Filtered Grid, every post must have at least one category and one tag assigned to it. These determine if the post should display in Post Grid when the visitor selects an option in the category or tag filters.
With the ‘New Post’ interface still open in Composer, assign your categories and tags:
Note: You can apply multiple categories and tags to an individual post.
With the ‘New Post’ interface still open in Composer, add an icon from the Finalsite Icon Library above the post title:
Note: To display correctly, the updated custom class field should include the word ‘icon’ followed by a space and then the icon name (for example, ‘icon bar-graph’).
To insert a background image you will first need to upload it to the Resources module.
This requires leaving the Post module, so it is important to save your new post before proceeding. Please refer to the section on how to ‘Save and Publish the Post’ in these instructions for further guidance on this.
Once your post has been saved, navigate to the Resources module and upload the image:
Image Size: The recommended size for the post background image is 800px (wide) by 557px (high).
With the file uploaded, return to the Post module and add the image as the post thumbnail:
The final step with all of the post content configured is to save and publish the new post:
Note: New posts in the Filtered Posts Grid display in alphabetical order by default. This can optionally be changed so that they display in date order by accessing the element settings of the main Post element. The order settings are located in the ‘Formatting’ section of the ‘Edit Post Element Settings’ window.
Register now for Summer at Camp Regis, serving both boys and girls in Pre-K through eighth grade.