CMS Development

rossatgrowth
投稿者 | Diamond Partner
投稿者 | Diamond Partner

Custom Blog Listing

解決

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 いいね!
1件の承認済みベストアンサー
Sjardo
解決策
トップ投稿者 | Elite Partner
トップ投稿者 | Elite Partner

Custom Blog Listing

解決

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>



 

元の投稿で解決策を見る

10件の返信
Sjardo
トップ投稿者 | Elite Partner
トップ投稿者 | Elite Partner

Custom Blog Listing

解決

@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
メンバー

Custom Blog Listing

解決
Is it possible to paginate this solution?
0 いいね!
Sjardo
解決策
トップ投稿者 | Elite Partner
トップ投稿者 | Elite Partner

Custom Blog Listing

解決

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
投稿者

Custom Blog Listing

解決

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 いいね!
mgoswick
投稿者

Custom Blog Listing

解決

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 いいね!
rossatgrowth
投稿者 | Diamond Partner
投稿者 | Diamond Partner

Custom Blog Listing

解決

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

0 いいね!
rossatgrowth
投稿者 | Diamond Partner
投稿者 | Diamond Partner

Custom Blog Listing

解決

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

Sjardo
トップ投稿者 | Elite Partner
トップ投稿者 | Elite Partner

Custom Blog Listing

解決

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
メンバー | Platinum Partner
メンバー | Platinum Partner

Custom Blog Listing

解決

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 いいね!
piersg
キーアドバイザー

Custom Blog Listing

解決

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>