CMS Development

rossatgrowth
Contributor | Diamond Partner
Contributor | Diamond Partner

Custom Blog Listing

SOLVE

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!

0 Upvotes
1 Accepted solution
Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Custom Blog Listing

SOLVE

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>



 

View solution in original post

10 Replies 10
Sjardo
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Custom Blog Listing

SOLVE

@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
Member

Custom Blog Listing

SOLVE
Is it possible to paginate this solution?
0 Upvotes
Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Custom Blog Listing

SOLVE

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
Contributor

Custom Blog Listing

SOLVE

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

0 Upvotes
mgoswick
Contributor

Custom Blog Listing

SOLVE

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?

0 Upvotes
rossatgrowth
Contributor | Diamond Partner
Contributor | Diamond Partner

Custom Blog Listing

SOLVE

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

0 Upvotes
rossatgrowth
Contributor | Diamond Partner
Contributor | Diamond Partner

Custom Blog Listing

SOLVE

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

Sjardo
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Custom Blog Listing

SOLVE

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.

Blog.png

PavithraAshok
Member | Platinum Partner
Member | Platinum Partner

Custom Blog Listing

SOLVE

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

0 Upvotes
piersg
Key Advisor

Custom Blog Listing

SOLVE

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>