"All" tag for a blog

[tette_engage]

Hi!

I have a slight problem with my blog template. By default it shows every blog post, with the option of filtering by tags. But once you filter by any tag, there is no way of getting the page to display all posts again without reloading the page. Of course, one solution could be to use an 'all' tag in every post, but then this tag is shown in every topic-wrapper, which doesn't look good.

The best solution would be to use the 'all' tag, but to have the topic-wrappers not to display it. An if/else would work perfectly here if it was possible.

you can view the page here:

www.prometheusone.io/modules

[Kevin-C]

@tette_engage

Might you have any code we can take a look at and determine the best implementation needed?

[tette_engage]

Hi @Kevin-C

Sure, here's the code for the listing page (don't know if copy-paste is the best option here, let me know if this looks messy):

{% if request.query_dict.ajax=="true" || content.absolute_url|replace('http:','')|replace('https:','')==group.absolute_url|replace('http:','')|replace('https:','') %}
{% if request.query_dict.ajax=="true" %}
<div id="json">
{% else %}
<script>
{% endif %}
json=[
{% for content in contents %}

{
"post_type": "{{ content.widgets.type_of_page.body.value }}",
"quote_author": "{{ content.widgets.quote_listing_author.body.value }}",
"quote":"{{ content.widgets.quote_listing.body.html|striptags }}",
"title":"{{content.name|trim|safe|replace('\"','\\"')}}",
"body":"{{content.post_body|striptags|safe|replace('\"','\\"')|truncate(120, True, '...')|trim}}",
"post_url":"{{content.absolute_url|trim}}",
"author":"{{content.blog_post_author.display_name|trim}}",
"publish_date":"{{ content.publish_date|datetimeformat('%d %b, %Y')|trim}}",
"publish_date_day":"{{ content.publish_date|datetimeformat('%d')|trim}}",
"featured_image":"{{ content.featured_image|trim }}",
"topics":{ {% for topic in content.topic_list %}"{{ topic.slug|trim }}":"{{ topic.name|trim }}"{% if !loop.last %},{% endif %}{% endfor %} },
"search":"{% for widget in content.widgets %}{% if widget.name|string|split('ight_text_',2)|length>1 %}{{widget.body.html|striptags|safe|trim|lower|replace('\"','\\"')}}{% endif %} {% endfor %} {{content.updated|datetimeformat('%d &lt;span&gt;%b&lt;/span&gt;, %Y')|trim|lower}}{{content.name|trim|lower}} {% for topic in content.topic_list %}{{ topic.name|lower }}{% if !loop.last %},{% endif %}{% endfor %} {{content.blog_post_author.display_name|trim|lower}} {{content.post_body|striptags|safe|trim|lower|replace('\"','\\"')}} {{ content.widgets.subheader_section.body.value|striptags|safe|trim|lower|replace('\"','\\"') }} {{ content.widgets.right_column.body.html|striptags|safe|trim|lower|replace('\"','\\"')}} {{ content.widgets.text_section.body.html|striptags|safe|trim|lower|replace('\"','\\"')}} "
}{% if !loop.last %},{% endif %}
{% endfor %}
];
{% if request.query_dict.ajax=="true" %}
</div>
{% else %}
$(document).ready(function(){
search();
});

</script>
{% endif %}
{% endif %}

<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
{# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
<div class="post-listing{% if simple_list_page %}-simple{% endif %} search-results">
{% for content in contents %}
<a href="{{content.absolute_url}}">
<div class="post-item">
<div class="image-wrapper" style="background-image: url({{ content.post_list_summary_featured_image }})"></div>
<div class="content-wrapper">
<!--<p class="post-date--fixed">{{ content.publish_date|datetimeformat('%d')}}</p>-->
<ul class="topics-wrapper">
{% for topic in content.topic_list %}
<li>{{ topic.name }}</li>
{% endfor %}
</ul>
<h2>{{ content.name }}</h2>
<p class="post-body">{{ content.post_body|striptags|truncate(120, False, '...')}}</p>
<p class="post-date">{{ content.publish_date|datetimeformat('%d %b, %Y')}}</p>
</div>
</div>
</a>
{% endfor %}
</div>
<nav class="blog clearfix">
{% set total_pages = contents.total_page_count %} <!-- sets variable for total pages -->
{% set more_pages = total_pages - current_page_num %} <!-- sets variable for how many more pages are past the current pages -->
{% if total_pages > 1 %}

<ul class="pagination clearfix">
{% if current_page_num != 1 %}
<li class="{% if current_page_num == 1 %}disabled{% endif %}"><a href="{% if last_page_num=="1" %}{{ group.absolute_url }}{% else %}{{blog_page_link(last_page_num)}}{% endif %}"><i class="fa fa-angle-left"></i></a></li>
{% endif %}

{% if more_pages == 0 %}
{% if current_page_num - 4 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 4 }}</a></li>{% endif %}
{% if current_page_num - 4 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 4) }}">{{ current_page_num - 4 }}</a></li>{% endif %}
{% endif %}
{% if more_pages <= 1 %}
{% if current_page_num - 3 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 3 }}</a></li>{% endif %}
{% if current_page_num - 3 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 3) }}">{{ current_page_num - 3 }}</a></li>{% endif %}
{% endif %}
{% if current_page_num - 2 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 2 }}</a></li>{% endif %}
{% if current_page_num - 2 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 2) }}">{{ current_page_num - 2 }}</a></li>{% endif %}
{% if current_page_num - 1 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 1 }}</a></li>{% endif %}
{% if current_page_num - 1 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 1) }}">{{ current_page_num - 1 }}</a></li>{% endif %}
<li class="active"><a href="{% if current_page_num==1 %}{{ group.absolute_url }}{% else %}{{ blog_page_link(current_page_num) }}{% endif %}">{{ current_page_num }}</a></li>
{% if current_page_num + 1 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 1) }}">{{ current_page_num + 1 }}</a></li>{% endif %}
{% if current_page_num + 2 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 2) }}">{{ current_page_num + 2 }}</a></li>{% endif %}
{% if current_page_num <= 2 %}
{% if current_page_num + 3 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 3) }}">{{ current_page_num + 3 }}</a></li>{% endif %}
{% endif %}
{% if current_page_num == 1 %}
{% if current_page_num + 4 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 4) }}">{{ current_page_num + 4 }}</a></li>{% endif %}
{% endif %}
<li class="{% if current_page_num == total_pages %}disabled{% endif %}"><a href="{{blog_page_link(next_page_num)}}"><i class="fa fa-angle-right"></i></a></li>
</ul>

{% endif %}
</nav>
</div>
</div>

[tette_engage]

@Kevin-C

And here's the code for a post:

{% choice "type_of_page" label='Choose type of post displaying for listing', value='Standard', choices='Standard, Quote' , export_to_template_context=True %}
{% image "mail_image" label='Select image for mail template (only if you are using Mercury mailing templates) - suggested sizes 215x215px', src='https://cdn2.hubspot.net/hubfs/685080/HubSpot_Template_Marketplace/Turbo%20Mercuric/Emails/Woman%20t...', width='215', export_to_template_context=True %}
{% image "hero_blog_image" label='Select Image for hero banner on top of the page', src='https://cdn2.hubspot.net/hubfs/685080/HubSpot_Template_Marketplace/Turbo%20Mercuric/Blog-301/Lovely%...', export_to_template_context=True %}
{% widget_block rich_text "quote_listing" label="Quote text (for option: Display post as Quote) - More than 65 characters might doesnt look good on module, try to shorten quote below this number", no_wrapper=True , export_to_template_context=True %}
{% widget_attribute "html" %}
<p>I should be incapable of drawing a single stroke present moment</p>
{% end_widget_attribute %}
{% end_widget_block %}
{% text "quote_listing_author" label="Quote author (for option: Display post as Quote)", value="John Fry", no_wrapper=True, export_to_template_context=True %}

<div class="blog-section single">
<div class="blog-post-wrapper cell-wrapper">
<div class="post-upper">
<div class="section post-header">
<p class="publish-date">{{ content.publish_date|datetimeformat('%B %d, %Y')|trim}}</p>
<h1>{{ content.name|striptags|safe }}</h1>
{% if content.tag_list %}
<ul class="hubspot-topics" >
{% for tag in content.tag_list %}
<li><a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}{% if not loop.last %}, {% endif %}</a></li>
{% endfor %}
</ul>
{% endif %}
<div class="post-body">
{{ content.post_body }}
</div>
</div>
</div>
<!-- <div class="post-bottom">
<div class="hs-author-avatar"> <img src="{{ content.blog_post_author.avatar }}" alt="{{ content.blog_post_author.display_name }}"> </div>
<div class="author-info">
{% if content.blog_post_author %}
<h5>{{ content.blog_post_author.display_name }}</h5>
<p>{{ content.blog_post_author.bio }}</p>
{% endif %}
</div>
</div>-->
</div>
</div>

On the list page, the tags are shown in categories (with the class categories--wrapper) and then each post's tags are shown in topics-wrapper

[Kevin-C]

@tette_engagepardon my delay. This seems to be working on the site now. How did you rearch your solution?

[tette_engage]

@Kevin-C no problem. Well, I (for the time being) just made a button that reverts to 'starting' page and made it to not display in individual posts.  Now I have a little styling left to do, but it works ok. Originally I was looking for adding a tag to every post, because it would have all the correct styling etc, but I couldn't get it to not display in the posts' topic-wrapper

[Ilkkamarkus]

I had same kind of problem and I think I've found a solution for this. I don't have my tags wrapped in a list like you do, but this should work.

In your post template, add the following:

{% for tag in content.tag_list %}

{% if tag.name != "All" %}
<li><a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}{% if not loop.last %}, {% endif %}</a></li>

{% endif %}
{% endfor %}

And in your listing page template:

{% for topic in content.topic_list %}

{% if tag.name != "All" %}
<li>{{ topic.name }}</li>

{% endif %}
{% endfor %}

Basically, you should be able to achieve the same with {% unless tag.name == "All" %} allso. I didn't use this, because i'd want to hide multiple tags and add an elif statement to my code. I havent been able to hide multiple tags yet.