Filterable Blog Posts

[chmm9002]

Hello,

We have a main blog page. Client reached out and wanted to list the blogs out by category. There are three categories.

we wanted to add 3 buttons to a page with each category with one of the two options:

Option A) Have them filterable. If they click “Category 1” then just show “Category 1” posts, etc.
Option B) Have 3 of 4 of the recent posts for each category. when the button is clicked at the top, it will move the page to that category section.

Is this something that can be done? Is the looper an option for this to display certain categories? Sending a secure note with a link to the blog

[tristup]

Hi Randall,

What you are expecting is the required customization for the first option. But you can acheive the second one, I have tried in my local environment and achieved what you are trying to do. I would suggest you follow the below steps which I have done.

Step 1: Category Menu

1. Implement the All Terms type of Looper Provider to the Column named Category Loop to create the Category links.

2. Add a div element with a base tag and link with #term{{dc:term:name}}, so it linked to below section with id {{dc:term:name}}

Step 2: Category based Posts

1. Implement the All Terms type of Looper Provider to the Column named Category Loop.

2. Added a div with a ID with term{{dc:term:id}}

3. Added the Text element to show the Category Title using {{dc:term:name}}

4. Added a div element and implemented the nested loop of Query String with the following Query

category_name={{dc:term:name}}&post_type=post&posts_per_page=3&offset=0&ignore_sticky_posts=1&post__not_in%5B0%5D={{dc:post:id}}

5. Added a Text element to show the Post Title inside the Div element.

Hope it helps.
Thanks

[chmm9002]

Thank you. This will take some time for me to figure out. As the end goal, we can have each category listed on a page with the most recent posts for each category correct? We will need TITLE and EXCERPT for each.

[tristup]

Hi Randall,

You can have the categories with the link to the Category Section with the Category title and Posts related to that category as shown in the video.

The Post title is already there using the {{dc:post:title}} for the excerpt you need to add the {{dc:post:excerpt}} or {{dc:post:excerpt length=“20”}} within the inner looper.

Hope it helps.
Thanks

[chmm9002]

Ok, i figured this out. I want to share a secure note with a link becaues I have a question…

How can I link the title to the blog post?

[tristup]

Hi @chmm9002,

Glad that you are able to figure this out. You can add the {{dc:post:permalink}} to the Title by using the following code

<a href="{{dc:post:permalink}}">{{dc:post:title}}</a>

Hope it helps.
Thanks

[chmm9002]

Great! thank you so much. I have a question that may not be able to be executed.

The blog page I have created with the looper, I’d like the tiles to resize automatically like on tthe native blog page. Is this possible? sending a secure note with both links…

[prakash_s]

Hello @chmm9002,

It seems that you are using the Headline element to display the post title, you can go to the Cornerstone page builder —>Select Headline element —>Text Format —>You can set the font size, font color, font family from here.

Hope it helps
Thanks

[chmm9002]

Sorry if I was not direct. Do you see on the live blog page how the white box size is dependent on the post length? That is what I want to achieve. On the page with the looper the white box extends the size of the row when I don’t want that.

Does that make sense?

[friech]

Hi Randall,

Sorry about the confusion, that is called a masonry layout, regretfully, the Row/Column structure will not able to create that.

If you’re familiar with the CSS Grid Spec, you can achieve that with the Grid element.

Thanks,