Custom Blog Listing

[rossatgrowth]

Hello all, we're looking to create a custom blog post listing page for a client. In addition to control over the look and feel (we'll be using CSS/JavaScript for layout no problem), we hope to have sortable, filterable posts much like any standard listing page.

Are there any existing templates available to build off of/modify? I attempted copying the listing template file from CMS Boilerplate template but without any luck (the feature seems disabled/limited).

Worst case, if no basic system is available to build off, what is a solid resource for a first-time developing custom blog listing/postings for HubSpot's CMS? I'd pretty much be looking for a "from the beginning" resource, haven't stumbled across any yet.

Thanks a ton, everyone!

[Sjardo]

@JimWib Yes, it is posible! Yet, it does get rather complex and way to long for a comment on here. If you are interested, give me or @Indra an message on what your looking for!

[JimWib]

Is it possible to paginate this solution?

[Sjardo · Accepted solution]

As our template is a bunch of includes, here is the standalone filter with checkboxes 🙂

This should create the filters with the correct URL .

Have a go!

{# Get current countries for list and filter #}
{% if request.query_dict != '' %} {# if there is a paramater/filter selected #}
  {% set categories = [] %} {# create array to collect category #}

  {% for item in request.query|split('&') %} {# split paramaters together with values #}

    {% set currect_categories = item|split('=') %} {# split value from paramater #}
    {% if currect_categories[0] == 'category' %} {# check if it's a country #}
      {% do categories.append(currect_categories[1]) %} {# add to selected countries array #} 
    {% endif %}

  {% endfor %}
{% endif %}


{% set cat_label = module.cat_label || 'Categories' %}
{% set show_all = module.show_all || 'Show all' %}

<div class="blog-listing__sidebar">
  {% set blog_topics = blog_topics(group.id, 250)|sort(False, False, 'name') %}
  <form class="filters" id="categories" method="get" action="{{ group.absolute_url|replace('http', 'https') }}/all">
    <div class="filter">
      <div class="filter__label">
        <label>{{ cat_label }}</label>
      </div>
      <div class="filter__list-wrapper">
        <div class="filter__list">
          {% for blog_topic in blog_topics %}
          <div class="filter-item {% if topic == blog_topic.slug || blog_topic.slug in categories %}filter-item--active{% endif %}">
            <input class="filter-item__input" type="checkbox" {% if topic == blog_topic.slug || blog_topic.slug in categories %}checked{% endif %}{# {% if request.query_dict.cat == blog_topic.slug %}checked{% endif %} #} name="category" value="{{ blog_topic.slug }}" id="checkbox-{{ blog_topic.slug }}" form="categories" onclick="this.form.submit()">
            <label class="filter-item__label" for="checkbox-{{ blog_topic.slug }}">{{ blog_topic }}</label>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </form>
</div>

[Albusis]

Hello,

I have tried this way and it works as a starting point in a way that it really displays blog tags, and that it really adds them as UTMs to the URL. Where it fails tho, is the point of this exercise, and that is to get an actual filtering. I know this answer is one and half year old, so I wonder if anything has changed? 

I'm testing it on this dummy blog that I imported some random posts from elsewhere

https://22130692.hs-sites.com/dado-blog/

and sadly it doesn't really do much.

Thank you for your reply,

Dalibor

[mgoswick]

This is great, but how does the filtering apply to the listing itself? What gets added to the {% for content in contents %} that actually does the filtering? Or does this use the "blog_recent_posts" workaround?

[rossatgrowth]

Thanks, Sjardo, that was really helpful. I'm sure others will find that snippet useful for a starting point as well.

[rossatgrowth]

Thanks, @Sjardo that'd be extremely helpful to have a starting point for reference! 

[Sjardo]

Are you looking for something like this? I can share the code if you want.

This is a screenshot from our starting point when building a custom blog overview. Please ignore the wacky images and content.

[PavithraAshok]

Hi Sjardo,

I am trying the same way as above image you added, but i want to do it in custom module for multiple tags filter.

Can u share the ideas or solution for this.

Thanks,

Pavithra Ashok

[piersg]

What sort of filtering and sorting do you want? 

If you want links to your tags/categories, you can do something like this:

<ul class="blog-categories">
  <li><a class="tag-link{% if request.full_url == group.absolute_url %} active{% endif %}" data-value="Home" href="{{ group.absolute_url }}">All</a></li>
  {% for item in my_tags|sort(False, False, 'name') %}
  <li><a class="tag-link{% if tag and page_meta.html_title|split(' | ')|last == item %} active{% endif %}" data-value="{{ item }}" href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</a></li>
  {% endfor %}
</ul>