BPA - Post Filtered Grid

The ‘Posts Filtered Grid (Dark)’ 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: 

• Post Grid: A Post element set to display as a grid of styled posts; each showing a title and a supporting text description on hover. Each post can optionally also include an icon from Finalsite Icon Library and/or a background image of your choosing. When the visitor clicks on a post, a popup displays showing the full post content.

• Keyword Search: A Post Tools element set to display as a search field. This is used by visitors to filter the posts showing in the Post grid by matching keywords.

• Tag Filter: A Post Tools element set to display as a tag filter. This is used by visitors to filter the posts showing in the Post grid by matching tags. On the ‘Post Filtered Grid’ example page this is represented by the ‘Grade Level’ filter.

• Category Filter: A Post Tools element set to display as a category filter. This is used by visitors to filter the posts showing in the Post grid by matching categories. On the ‘Post Filtered Grid’ example page this is represented by the ‘Subject’ filter.

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:

• An overview of the school curriculum
• An breakdown of extra-curricular opportunities
• A directory of activities in a summer program
• A collection of resources for students or parents

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:

• Filters above the Posts Grid: All filters display above the Post Grid, with the category filter formatted as an accordion panel that can be opened on click.

• Filters to the left of the Posts Grid: The category and tag filters display in a sidebar to the left of the Post Grid with the search filter at the top.

• Filters to the right of the Posts Grid: The category and tag filters display in a sidebar to the right of the Post Grid with the search filter at the top.

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:

• Use photo editing software such as Adobe Photoshop to scale and/or crop the file before uploading it to Composer.
• If you only need to crop the image, upload it to the Resources module, select it and click on the ‘Crop’ icon button towards the top of the Resource details panel. This will open Composer’s inbuilt image editor where you can crop the file.

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: 

• Choose images that are decorative. They should be visually engaging, but not essential to understanding the content on the post.
• Make sure the content of the image is clear to visitors, even when partially obscured by the text or optional icon in the foreground of the post. Avoid images of text and faces for example, which rely on being fully visible for their meaning to be clear.
• Keep the focal point of each image in the center. This safeguards against automatic cropping that will occur at certain screen widths to fit within the responsive layout.
• Save images at 72ppi (pixels per inch) in .jpeg format with an RGB color profile.
• Add descriptive alt text when uploading images to make them accessibility-compliant.

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:

Make a Copy of the Example Filtered Posts Grid Layout

Begin by copying and pasting one of the three example Filtered Posts Grid layouts onto the desired page in your website: 

1. Go to the ’Pages’ panel.
2. Select the branch containing the example pages for this Best Practice Asset.
3. Locate the ‘Posts Filtered Grid’ subsection and select the page displaying the layout option you would like to use.
4. Hover over the Layout element containing the Filtered Post Grid features and click on the ‘Copy’ icon in the top-right corner.
5. Create or navigate to the page in the ’Pages’ panel that you want to add the Filtered Posts Grid to. This should have a full-width page layout without left or right banners.
6. Scroll down to the main content area:
• If the page doesn’t have any existing content, hover over the bottom of the main content area and click on the ‘Add Element’ button
• If the page has existing content, hover over the element that should directly precede the Filtered Posts Grid and click on the ‘Add Element’ button.
7. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window. 

Link up the Post Tools Elements

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:

1. Hover over the Post Tools element displaying the keyword search and click on the ‘gear’ icon in the top-right corner.
2. Click on ‘+ Link To’ in the ‘Edit Post Tools Element Settings’ window.
3. Select the element with the title ‘custom class: bpa-post-filter-1’ from the dropdown. 
4. Click on the ‘Save’ button at the bottom of the ‘Edit Post Tools Settings’ window.

Next, link the Post Tools element displaying the tag filter:

1. Hover over the Post Tools element displaying the tag filter and click on the ‘gear’ icon in the top-right corner. This is the element with the title ‘Filter by Grade Level’.
2. Click on ‘+ Link To’ in the ‘Edit Post Tools Element Settings’ window.
3. Select the element with the title ‘custom class: bpa-post-filter-1’ from the dropdown. 
4. Click on the ‘Save’ button at the bottom of the ‘Edit Post Tools Settings’ window.

Finally, link the Post Tools element displaying the category filter:

1. Hover over the Post Tools element displaying the category filter and click on the ‘gear’ icon in the top-right corner. This is the element with the title ‘Filter by Subject’.
2. Click on ‘+ Link To’ in the ‘Edit Post Tools Element Settings’ window.
3. Select the element with the title ‘custom class: bpa-post-filter’ from the dropdown. 
4. Click on the ‘Save’ button at the bottom of the ‘Edit Post Tools Settings’ window.

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. 

Configure the Posts on Display in the Post Grid

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:

1. Hover over the Post element showing the Post Grid and click on the ‘gear’ icon in the top-right corner.
2. Click on ‘+ Content Filters’ within the ‘Grid’ tab at the top of the ‘Edit Post Element Settings’ window.
3. Click on the ‘Select Board’ button and choose one or more boards that you want to feed into the Posts Grid.

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.

Optionally update the Title of the Tag Filter

1. Hover over the Post Tools element displaying the tag filter and click on the ‘gear’ icon in the top-right corner. This is the element with the title ‘Filter by Grade Level’ in the example layout.
2. Click into the ‘Title’ field in the ‘Edit Post Tools Element Settings’ window and update the title text.
3. Click the ‘Save’ button at the bottom of the ‘Edit Post Tools Element Settings’ window.

Optionally update the Title of the Category Filter

1. Hover over the Post Tools element displaying the Category Filter and click on the ‘gear’ icon in the top-right corner. This is the element with the title ‘Filter by Subject’ in the example layout.
2. Click into the ‘Title’ field in the ‘Edit Post Tools Element Settings’ window and update the title text.
3. Click the ‘Save’ button at the bottom of the ‘Edit Post Tools Element Settings’ window.

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:

Create a new Post and Populate the Required Content 

Begin by opening the Posts module and creating a new Post:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select ‘Posts’.
2. Click on the ‘Boards’ tab.
3. Select the board you want to update. By default, the board set to display in the Posts Filtered Grid has the title ‘Posts Filter’.
4. Click on the ‘Create Post’ button at the top right of the Board interface.
5. Click into the ‘Title’ field and add a short title for your post.
6. Click into the ‘Body Content’ content editor and add the content for your post. This will display in a pop-up when the visitor clicks on the post. Alternatively, you can click on the ‘External Redirect URL’ tab and link the post to a different webpage.
7. Click on the ‘Summary’ panel and type a short sentence describing the post into the content editor (this should have a maximum of 10 words).

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. 

Assign at least one Category and one Tag

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:

1. Select the ‘Category & Tags’ panel in the ‘New Post’ interface.
2. Choose one or more categories from the choices on display. If you want to add a new category, click on the ‘Manage Categories’ button and create one in the ‘Manage Categories’ window.
3. Click into the ‘Tags’ field and start typing the title of the tag. If the tag already exists on the website, it will display in a drop-down below the field as you type. Click on this in the dropdown to auto-populate the tag name.

Note: You can apply multiple categories and tags to an individual post.

Optionally Add an Icon Above the Post Title

With the ‘New Post’ interface still open in Composer, add an icon from the Finalsite Icon Library above the post title:

1. Select the ‘Additional Settings’ panel in the post editing interface.
2. Click into the ‘Custom Class’ field and type in the word ‘icon’.
3. Press the space key.
4. Find an icon from the Finalsite Icon Library and type in its name. This should be entered in lowercase letters (for example, ‘Bar-Graph’ should be entered as ‘bar-graph’).

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’).

Optionally insert a Background Image

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:

1. Click on Resources in Composer’s left navigation.
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your image in the ‘Public’ directory.
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the upload options available to upload the new image.
6. Once the upload is complete, click into the ‘Title’ field in the ‘Edit Resource Details’ window and add a title for your image (this title is for internal use and will not display in the post).
7. Click into the ‘Alt Text’ field and add a short description explaining the contents of the image for visitors who are unable to see it.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

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:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Open the board containing the post you want to update and select the post.
4. Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button.
5. Select the image you have previously uploaded.
6. Click on the ‘Update’ button at the bottom right of the Post interface.

Save and Publish the Post

The final step with all of the post content configured is to save and publish the new post:

1. Click on the ‘Save’ button at the bottom right of the Post interface.
2. Click on ‘Yes’ in the ‘Publish Now’ window if the post is ready and you want to put it live immediately. Click on ‘No’ if you want to save the post as a draft and manually publish it at a later time.

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.