Filter Blogs by topic / category?

[randylough]

I'm trying to filter my blog listing page by topic when desired. I know I'm probably over thinking this, but for whatever reason I cant figure out how to get the listing page to show only the desired topic chosen. I just added the {% if topic %} statement to see if that would fix my propblem, but it wont show the topic posts - it's left blank as seen in the screenshot below.

Default listing

http://imgur.com/slgaOcJ

When a topic is selected

http://imgur.com/H4dBBpa

Here is my HTML markup

{% set posts = blog_recent_posts('XXXX', 10) %}
 {% set topic_posts = blog_recent_topic_posts('XXXX', topic.slug, 10) %}
 {% set topics = blog_topics('XXXX', 10) %}
 <section class="section-basic post-listing{% if simple_list_page %}-simple{% endif %}">
 
 <div class="container">
 <div class="row">
 <div class="col left-content" data-settings="size-8">
 {% if topic %}
 <h2 class="section-title">Posts about {{ page_meta.html_title|replace(' | ', '') }}</h2>
 {% else %}
 <h2 class="section-title">Our latest stories</h2>
 {% endif %}
 <div class="divider horizontal stubby"></div>
 <div class="row vertical">
 {% if topic %}
 {% for content in topic_posts %}
 <article class="blog-list-wrapper">
 <div class="blog-thumbnail-image"><a class="no-styling" href="{{ content.absolute_url }}"><img src="{{ content.featured_image }}" alt="{{ content.featured_image_alt_text }}" width="245"></a>
 </div>
 <div class="blog-post-summary">
 <h2 class="blog-listing-title"><a class="no-styling" href="{{ content.absolute_url }}">{{ content.name }}</a></h2>
 <p>{{ content.post_list_content|safe }}</p>
 <a href="{{ content.absolute_url }}">Continue reading</a>
 <div>
 {% if content.topic_list %}
 {% for topic in content.topic_list %}
 <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}"><div class="category">{{ topic.name }}</div></a>{% if not loop.last %}{% endif %}
 {% endfor %}
 {% endif %}
 </div>
 </div>
 </article>
 {% endfor %}
 {% else %}
 {% for content in posts %}
 {% if not simple_list_page %}
 <article class="blog-list-wrapper">
 <div class="blog-thumbnail-image"><a class="no-styling" href="{{ content.absolute_url }}"><img src="{{ content.featured_image }}" alt="{{ content.featured_image_alt_text }}" width="245"></a>
 </div>
 <div class="blog-post-summary">
 <h2 class="blog-listing-title"><a class="no-styling" href="{{ content.absolute_url }}">{{ content.name }}</a></h2>
 <p>{{ content.post_list_content|safe }}</p>
 <a href="{{ content.absolute_url }}">Continue reading</a>
 <div>
 {% if content.topic_list %}
 {% for topic in content.topic_list %}
 <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}"><div class="category">{{ topic.name }}</div></a>{% if not loop.last %}{% endif %}
 {% endfor %}
 {% endif %}
 </div>
 </div>
 </article>
 {% else %}
 
 {% endif %}
 
 {% endfor %}
 {% endif %}
 
 </div>
 </div>

Note: if it matters I'm using a different HTML listing page then the post page.

Thanks!

[Jsum]

@randylough,

I had a look through your code and I believe I have found the issue:

 {% if not simple_list_page %}
 <article class="blog-list-wrapper">
 <div class="blog-thumbnail-image"><a class="no-styling" href="{{ content.absolute_url }}"><img src="{{ content.featured_image }}" alt="{{ content.featured_image_alt_text }}" width="245"></a>
 </div>
 <div class="blog-post-summary">
 <h2 class="blog-listing-title"><a class="no-styling" href="{{ content.absolute_url }}">{{ content.name }}</a></h2>
 <p>{{ content.post_list_content|safe }}</p>
 <a href="{{ content.absolute_url }}">Continue reading</a>
 <div>
 {% if content.topic_list %}
 {% for topic in content.topic_list %}
 <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}"><div class="category">{{ topic.name }}</div></a>{% if not loop.last %}{% endif %}
 {% endfor %}
 {% endif %}
 </div>
 </div>
 </article>
 {% else %}
 Nothing is here!
 {% endif %}

Archive and topic filtered listings default to a "simple listing page". You can negate this by simply removing the red if statement. The statement is saying "if not a simple list page" (i.e. normal listing) then use this markup, else (i.e. posts by date or topic) use this markup but there is no markup there so your listing is blank. 

[randylough]

So I tried three things:

1) I removed removed the {if not_simple_listing} declaration since I really only care about showing all posts and then filtering by topic when requested - that didnt work for me. The result: shows all blog posts no matter the topic chosen.

2) Next I duplicated the <article> element into the blank else statement to see if I could at least get something to appear - again nothing showed. Result: still blank page topic page. 

3) I removed the {if topic} statement and the {if not_simple_listing} statement to see if that would work - no luck. Result: shows all blog posts no matter the topic chosen.

All I'm trying to do is show only the topic chosen from the all posts listings page. No formating changes will happen only the filtering of topics is desired. 

Thanks so much for your help!

[randylough]

I also just ripped the blog markup example from: http://designers.hubspot.com/docs/hubl/blog-content-markup (everything within the listing statement) to see if Hubspots example would even work and it still shows all posts. 

Screenshot and URL to page if helpful

all posts Could the {% set posts = blog_recent_posts('[BLOG ID NUMBER]', 10) %} be the issue? I tried recent_topic_posts and that didnt work either.

[randylough]

Okay - so I got it to work but only by using hubspots template builder, which isnt my preferred method, but I could make due if that's my only option. 

My preffered method is using hard coded html files. Is this doable??

Thanks so much!

[Jsum]

@randylough,

I have built tons of blogs using coded files so there shouldn't be a problem.

You have this at the top of your code:

{% set posts = blog_recent_posts('XXXX', 10) %}
 {% set topic_posts = blog_recent_topic_posts('XXXX', topic.slug, 10) %}
 {% set topics = blog_topics('XXXX', 10) %}

but I'm not seeing where you are referencing these variables in your code so that shouldn't be a problem either. actually you don't even need these since it doesn't seam you are using them. To use them you would need to loop through them like:

{% set posts = blog_recent_posts('XXXX', 10) %}
 {% set topic_posts = blog_recent_topic_posts('XXXX', topic.slug, 10) %}
 {% set topics = blog_topics('XXXX', 10) %}

{% for post in posts %}

{% endfor %}

{% for topic in topics %}

{% endfor %}

etc.

Your not looping through these, your looping through your normal contents loop:

{% for content in contents %}

{% endfor %}

the "topic" variable is automatically assigned based on the topic at the end of the url ".../topic/amazon" so is blank or undefined if not filtering by topic. You don't need to use this in your loop. You can use this to change the title of your blog or something:

{% if topic is defined %}
  posts about {{ topic.name }}
{% else %}
  All Posts
{% endif %}

But all you need for your listing page is:

{% for content in contents %}

  {# markup for your list items #}

{% endfor %}

and no matter how you filter your listing page, or don't, it will always use the markup within this contents loop. There is no need check for a topic or etc. unless you are wanting to change the markup of your list item when filtering. 

just to reiterate, the:

{% if not simple_list_page %}

    {# Markup to use for original listing page, no filtering #}

{% else %}

    {# Markup to use if filtering by topic, i.e. simple list page #}

{% endif %}

condition inside of the default for contents loop will trip you up if you don't remove it or adjust it to your needs. 

[ahein624]

I was actually able to get this to work with a filtered tag field in a module.

<div class="row">
              	{% set topic_posts = blog_recent_topic_posts('default', module.tag_field, 4) %}
								{% for topic_post in topic_posts %}
                <div class="col-sm-3">
                    <div class="single_blog">
                        <figure class="blog_item" style="background: url({{ topic_post.post_list_summary_featured_image }}); background-repeat: no-repeat; background-size: cover; background-position: center center;">
                            <div class="blog_text">
                                <h4>
                                    <a href="{{ topic_post.absolute_url }}">{{ topic_post.name }}</a>
                                </h4>
                                <p>{{ content.post_summary }}</p>
                                <a href="{{ topic_post.absolute_url }}">Read More</a>
                            </div>
                        </figure>
                    </div>
                </div>
                {% endfor %}
            </div>