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>

[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.

[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>