CMS Development

rossatgrowth
Contributeur | Partenaire solutions Diamond
Contributeur | Partenaire solutions Diamond

Custom Blog Listing

Résolue

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 Votes
1 Solution acceptée
Sjardo
Solution
Contributeur de premier rang | Partenaire solutions Elite
Contributeur de premier rang | Partenaire solutions Elite

Custom Blog Listing

Résolue

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>



 

Voir la solution dans l'envoi d'origine

10 Réponses
Sjardo
Contributeur de premier rang | Partenaire solutions Elite
Contributeur de premier rang | Partenaire solutions Elite

Custom Blog Listing

Résolue

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

Custom Blog Listing

Résolue
Is it possible to paginate this solution?
0 Votes
Sjardo
Solution
Contributeur de premier rang | Partenaire solutions Elite
Contributeur de premier rang | Partenaire solutions Elite

Custom Blog Listing

Résolue

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
Contributeur

Custom Blog Listing

Résolue

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 Votes
mgoswick
Contributeur

Custom Blog Listing

Résolue

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 Votes
rossatgrowth
Contributeur | Partenaire solutions Diamond
Contributeur | Partenaire solutions Diamond

Custom Blog Listing

Résolue

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

0 Votes
rossatgrowth
Contributeur | Partenaire solutions Diamond
Contributeur | Partenaire solutions Diamond

Custom Blog Listing

Résolue

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

Sjardo
Contributeur de premier rang | Partenaire solutions Elite
Contributeur de premier rang | Partenaire solutions Elite

Custom Blog Listing

Résolue

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
Membre | Partenaire solutions Platinum
Membre | Partenaire solutions Platinum

Custom Blog Listing

Résolue

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 Votes
piersg
Conseiller clé

Custom Blog Listing

Résolue

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>