Tutorials

How to create a portfolio with an animated filter from scratch?

1. Create the categories or topics for your portfolio.

In Concrete 5.7, there is a new feature called "Topics" that allows you to organize your pages into categories.

You simply need to go to Dashboard -> System & Settings -> Attributes -> Topics.

If you installed the sample content, there should be two topic trees: "Blog Entries" and "Projects".

You can use the "Projects" topic tree for your portfolio or create a new topic tree. 

Then add a new topic to the tree for each category you want to have.

2. Create a Page Attribute for your portfolio.

If you are using the "Projects" topic tree from the sample content, you should already have a page attribute called "Portfolio Topics". Otherwise, go to Dashboard -> Pages & Themes -> Attributes, and create a new Topics Attribute. You can call it "Project Topics" (with the handle "project_topics"). Make sure you select the appropriate topic tree.

3. Create your projects.

Create a new page for each project and make sure to assign a topic to each page. You'll simply need to go to Page Settings -> Attributes -> Project Topics.

4. Add a Page List block to your portfolio page.

Add a Page List block to the page. Make sure your Page List block has the "Enable Other Blocks to Filter This Page List" option checked. You also need to use one of the following custom templates: Long Way Home Grid, Long Way Home Grid Labels, Long Way Home Grid Polaroids or Long Way Home Grid Polaroids 2.

5. Add a Topic List block.

Add a Topic List block to the page. Make sure you choose the appropriate Topic Tree and select the "Long Way Home Animated Filter" custom template.