Feb 22, 2024
Madhuri Maram
Filters in Framer CMS
This post covers the next part which is to add Filters in Framer for a Blog.
Filters in Framer's CMS enable you to customize how a collection is presented on your web pages by showing only items that meet certain criteria. This is particularly useful when you have a large amount of content in a single collection but want to display only a subset of that content based on specific conditions, such as category, date, or any other custom field associated with your CMS items.For example, if you're managing a blog with various categories, you can use filters to display only the posts that belong to a selected category on a particular page. Similarly, for a documentation site, you could filter articles to show only those related to a specific topic on the homepage.
How to create a Filter:
Select Your Collection List: Start by selecting the collection list you want to filter. This is the list that displays items from your CMS collection on your page.
Access the Property Panel: With your collection list selected, navigate to the property panel. This is where you will set up your filter.
Add a Filter: In the property panel, you will find an option to add a filter. Click on this to begin setting up your filter criteria.
Choose the Field to Filter By: You will need to select the specific field within your CMS items that you want to filter by. This could be a category, date, or any custom field you've set up in your CMS.
Set the Condition: After selecting the field, you'll need to choose the condition for your filter. Framer allows you to select from various conditions such as "equals," "starts with," and more. Choose the one that best suits your needs.
Specify the Value: Finally, specify the value that the field must match for the items to be displayed in your list. This could be a specific category name, a date, or any other value relevant to your chosen field and condition.
Apply and Review: Once you've set up your filter, apply the changes and review your page to ensure that the collection list now only displays the items that meet your filter criteria.
Usecases:
If you're managing a blog and want to display only posts from a specific category on a page, you would select your blog posts collection list, add a filter in the property panel, choose the "category" field, set the condition to "equals," and specify the category name as the value. This will ensure that only blog posts from the specified category are displayed on that page. Or in the example below where in a job board, you can show only Careers in Amesterdam ↓
Lesson from Framer:
The following video covers various ways of filtering your CMS collection lists. It covers how to create a "recent posts" section by filtering out the current post you are viewing, plus how to use offsets and limits to feature the most recent item from your collection by giving it a unique layout.