Filtering Blog articles and other pages

Developer Support CMS Development
1

hi there

I am looking to create a summary page that will contain links to blog articles and also links to other website pages.

I know how to filter blog articles by tag and I would like to apply the same principle to other (non blog) website pages. Is it possible to tag other pages in some way?

Essentially I want to be able to select a tag and display filtered content for both blog articles and other pages. Perhaps I could apply a notional ‘tag’ to the website pages via a custom module and access that variable in the summary page?

Would be very grateful for any steer here!:grinning_face:

2

Hello @DM2!

I believe a custom module would be the best solution in this case. We did a similar thing and basically using a custom module with a dropdown with different options allowed us to filter posts/pages according to what we needed/wanted.

All you will need to do is access the module property of your page/blog and use that variable while filtering your content.

Hope it helps!

3

Thank you, yes you’re right. I have started to achieve this by using a custom module that adds in the non blog content - and through a choice field for each item - applies a class / or classes that are in line with the blog tags. divs with classes applied can then be filtered accordingly.

I think the concept of ‘page tagging’ though could be a really useful development.

4

Is there a link to your “similar thing” or a thread about this solution?

5

@Graham_USMC in the following article you can see how to access a blog post module (and its variables) from another template (a listing page for example). While the article talks about something else, this implementation is used so you can get the idea and how to implement it: How to have multiple Blog post templates in Hubspot - DEV Community

6

Thank you very much - I appreciate the help greatly!

7

Hi @DM2 ,
Try teh below code. It will work for blogs only:

{% set my_tags = blog_tags(blogid) %}
<div class=“filters filter-button-group”>
<ul>
<li class=“active” data-filter=“*”>All</li>
{% for item in my_tags %}
<li data-filter=“.{{ item.slug }}” class=“{{ item.slug }}”>{{ item }}</li>
{% endfor %}
</ul>
</div>
<div class=“grid blog-content”>
{% for content in contents %}
{% if content.tag_list %}
<div class=“{% for tag in content.tag_list %} {{tag.slug}}{% endfor %} grid-item block”>
<div class=“blog_column_box”>
{% if content.featured_image and group.use_featured_image_in_summary %}
<a href=“{{ content.absolute_url }}” aria-label=“{% if content.featured_image_alt_text %}Featured image: {{ content.featured_image_alt_text }} - {% endif %}Read full post: {{ content.name }}”>
<img class=“blog-index__post-image” src=“{{ content.featured_image }}” width=“365” loading=“lazy” alt=“{{ content.featured_image_alt_text }}”>
</a>
{% endif %}
<div class=“blog-index__post-content blog-index__post-content–small”>
<h2><a href=“{{ content.absolute_url }}”>{{ content.name }}</a></h2>
{% if content_group.show_summary_in_listing %}
{{ content.post_list_content|truncatehtml(100) }}
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div><script src=“https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js”></script>
<script type=“text/javascript”>$(document).ready( function() {
$(‘.grid’).isotope({
itemSelector: ‘.grid-item’,
});
$(‘.filter-button-group’).on( ‘click’, ‘li’, function() {
var filterValue = $(this).attr(‘data-filter’);
$(‘.grid’).isotope({ filter: filterValue });
$(‘.filter-button-group li’).removeClass(‘active’);
$(this).addClass(‘active’);
});})
</script>

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.