Help Creating Blog Topic Filter / Category Filter

[phishin]

I am creating a blog page with a listing / landing page, a post page and a filter in a sidebar that will filter the blogs displayed on the listing page. 

However, I don't know the proper way to set this up nor the syntax that is supposed to be used to filter. I have set up the filter to display the tags, but when i click on the tag, it changes the URL slug but nothing changes on the page. Here is my code.

{% if is_listing_view %}
<div class="blog-landing-section">
    <div class="container">
        <div class="blog-landing-top">
            <div class="row row-eq-height d-flex">
                {% set rec_posts = blog_recent_posts('5525285', 1) %}
                {% for rec_post in rec_posts %}
                <div class="col-md-8 col-sm-12 featured-blog-post-col">

                    <div class="featured-blog-post">
                        <div class="featured-blog-post-img">
                            <img class="img-responsive w-100 object-fit" src="{{ rec_post.post_list_summary_featured_image }}" alt="{{ rec_post.featured_image_alt_text }}"/>

                        </div>
                        <div class="featured-blog-post-content">
                            <h1>{{ rec_post.name }}</h1>
                            <p class="blog-ptext"> {{ rec_post.post_list_content|striptags|truncatehtml(200, '..' , false) }}</p>

                            <div class="section-cta-button">
                                <a class="cta-btn-border-light" href="{{ rec_post.absolute_url }}"> Read More </a>
                            </div>
                        </div>
                    </div>

                </div>

                {% endfor %}
                <div class="col-md-4 col-sm-12 blog-sidebar">
                    <div class="blog-search">
                        <form action="https://hs.ruralandremote.org/blog/search" class="search-container">
                            <input name="query" type="text" class="search-bar"/>
                            <button class="search-cta" type="submit">
                                <img src="https://cdn2.hubspot.net/hubfs/5525285/Blog%20Template%20Files/search-icon.svg" alt="search icon"> </button>
                        </form>
                    </div>


                    <hr class="divider-line"/>

                    <div class="blog-filter-categories">
                        <div class="blog-filter-categories-inner">
                            <h3> Filter By Category </h3>
                            <ul class="blog-filter-category-list">
                                {% set my_tags = blog_tags('default', 250) %}
                                {% for item in my_tags %}
                                <li><a href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>


                        <button class="see-more-cta" role="button"> See More <i class="icon-down-arrow"> </i></button>

                    </div>
                </div>
            </div>
        </div>


        <div class="recent-blog-posts-section">
            <h2 class="title-text-thin"> Recent Blogs </h2>
            <div class="recent-blog-posts-items">
                <div class="row d-flex row-eq-height blog-posts-row">

                    {% set rec_posts = blog_recent_posts('5525285', 15) %}
                    {% for rec_post in rec_posts %}
                    {% if loop.index > 1 %}
                    <div class="col-md-4 col-sm-6 col-xs-6 blog-card-col">
                        <div class="recent-blog-card">
                            <div class="card-image-top">
                                <img src="{{ rec_post.post_list_summary_featured_image }}" alt="{{ rec_post.featured_image_alt_text }}"/>
                            </div>

                            <div class="card-bottom">

                                <h3 class="card-post-title">{{ rec_post.name }}</h3>

                                <p>{{ rec_post.post_list_content|striptags|truncatehtml(150, '..' , false) }}</p>
                                <a class="blog-card-link" href="{{ rec_post.absolute_url }}"> Read More </a>

                            </div>
                        </div>
                    </div>
                    {%endif%}
                    {% endfor %}



                    {% set topic_posts = blog_recent_topic_posts('5525285', 15) %}
                    {% for topic_post in topic_posts %}


                    <div class="col-md-4 col-sm-6 col-xs-6 blog-card-col">
                        <div class="recent-blog-card">
                            <div class="card-image-top">
                                <img src="{{ rec_post.post_list_summary_featured_image }}" alt="{{ rec_post.featured_image_alt_text }}"/>
                            </div>

                            <div class="card-bottom">

                                <h3 class="card-post-title">{{ rec_post.name }}</h3>

                                <p>{{ rec_post.post_list_content|striptags|truncatehtml(150, '..' , false) }}</p>
                                <a class="blog-card-link" href="{{ rec_post.absolute_url }}"> Read More </a>

                            </div>
                        </div>
                    </div>

                    {% endfor %}


                </div>

                <div class="page-controls">
                    <div class="load-more sm-only">
                        <a class="cta-btn-border-light" href="#"> Load More </a>
                    </div>

                </div>

            </div>
        </div>


    </div>
</div>

{% else %}

<!-- Blog Post Page view-->
<div class="blog-post-wrapper">
    <div class="blog-post-header">
        {% if content.post_list_summary_featured_image %}
        <img class="img-top" src="{{ content.post_list_summary_featured_image }}" alt="{{ content.featured_image_alt_text }}" />
        {% endif %}
    </div>

    <div class="blog-post-content">
        <div class="container">
            <div class="col-md-12">

                <a class="cta-back-btn d-inline-block" href="/blog">Return to Blog</a>

                <div class="post-title-info">
                    <h1 class="text-center blog-post-title">{{ content.name }}</h1>
                    <b class="blog-post-author text-center"> By: <span class="author">{{ content.blog_post_author.display_name }}</span> </b>


                </div>

                <div class="blog-post-content-inner">
                    {{ content.post_body }}
                </div>
            </div>
        </div>
    </div>
</div>

{% endif %}

[alyssamwilie]

Hi @phishin ,

The blog_recent_posts() function will always return the most recent posts for the entire blog so the tag/topic pages would not be able to filter it to show just one particular topic which is why it seems like nothing is changing on the page when you click to go to a topic link. What you want to use is the 'contents' variable. 

Feature Section:

{% for content in contents %}
    {% if loop.first %}
        <div class="col-md-8 col-sm-12 featured-blog-post-col">

            <div class="featured-blog-post">
                <div class="featured-blog-post-img">
                    <img class="img-responsive w-100 object-fit" src="{{ content.post_list_summary_featured_image }}" alt="{{ content.featured_image_alt_text }}"/>

                </div>
                <div class="featured-blog-post-content">
                    <h1>{{ content.name }}</h1>
                    <p class="blog-ptext"> {{ content.post_list_content|striptags|truncatehtml(200, '..' , false) }}</p>

                    <div class="section-cta-button">
                        <a class="cta-btn-border-light" href="{{ content.absolute_url }}"> Read More </a>
                    </div>
                </div>
            </div>

        </div>
    {% endif %}
{% endfor %}

Blog Listing:

{% for content in contents %}
    {% if not loop.first %}
        <div class="col-md-4 col-sm-6 col-xs-6 blog-card-col">
            <div class="recent-blog-card">
                <div class="card-image-top">
                    <img src="{{ content.post_list_summary_featured_image }}" alt="{{ content.featured_image_alt_text }}"/>
                </div>

                <div class="card-bottom">

                    <h3 class="card-post-title">{{ content.name }}</h3>

                    <p>{{ content.post_list_content|striptags|truncatehtml(150, '..' , false) }}</p>
                    <a class="blog-card-link" href="{{ content.absolute_url }}"> Read More </a>

                </div>
            </div>
        </div>
    {% endif %}
{% endfor %}

And then set how many posts you want to show per page in the blog settings.

You can learn more about blog content markup here - https://designers.hubspot.com/docs/hubl/blog-content-markup

Alyssa Wilie
Web Developer
LytonWeb

[DanielSanchez]

Hi Pishin, i use this core to show my list topics with link:

{% set my_topics = blog_topics('default', 250) %}
<ul>
{% for item in my_topics %}
<li><a href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</a></li>
{% endfor %}
</ul>

Look the result without CSS:

Hope this helps.

Daniel Sanchez - NA5