Controlling the order of the blog tags on the blog list page

[karen]

Hi,

We recently did a rebuild of our website. The Creative Director wants the order of our tags reordered to reflect our areas of expertise at the beginning of the list from left to right.
See attached what currently exists.

The Creative Director wants it changed to

ALL+ CONSUMER FINANCE+ RETAIL+ MARKETING & DESIGN+ AGENCY & CULTURE+ OTHER+

We asked our dev team if they could do this.

They responded -
"We have checked this and unfortunately, we can't change the order of the Blog Tags Navigation because it's dynamic and displaying through the loop on the template level."

Any ideas? Who else can we go to about this?

[Anton · Accepted solution]

Hi @karen, 

your devs are partially right. 

If you're using the blog_tag function the list is being generated dynamically and one of the few things you can do is apply a sort filter.

BUT an somehow easier way would be a pretty simple custom module. Just one (or two) text field(s) inside of a repeater. Also I recommend to make this module global. 

First add a text field and call it "Tag label", the second one is for the URL. So if you add a second text field, call it "URL". You can also add a Link or URL function if you want. The result will be the same. Also please keep in mind that the namings are up to you. 

Once you've added both fields to the module the HTML+Hubl part is pretty simple

<div class="blogTagWrapper">

<ul class="blogTags">
{% for single_tag in module.blog_tags %}
<li class="singleBlogTag"><a href="{{ single_tag.url }}">{{ single_tag.tag_name }}</a></li>
{% endfor %}
</ul>

</div>

What's left is to add the "plus" icon(either by CSS or you can add it directly to the code) and style it the way you would like to have it. After the styling is done you can place the module in the template and add your tags to it.

best, 

Anton

[benvanlooy]

We should be able to just sort the existing tags, it wouldn't be a heavy workload for Hubspot.

Once again a simple feature that isn't available.

The suggested solutions aren't very praticial

- the first one would require someone to know which tags are available & reduntantly recreate them in the repeater list..

- the second solution would mean someone has to go inside the code to determine the order (not really client-user friendly).

[karen]

@Jaycee_Lewis. @Anton, @piersg Thank you all for the helpful directions with detail! I have passed the information on to my development team.

[Jaycee_Lewis]

Hey, @karen! I'm glad it helped. We're pretty dang lucky to have folks like Anton and Piers to help us 😊

Have a wonderful weekend! — Jaycee

[karen]

I could not agree more!

[piersg · Accepted solution]

@Anton's solution works, but your developers can do this in the template to avoid creating a custom module:

{% set my_tags = blog_tags('default', 250) %}
{% set tagsOrder = [{'name':'Consumer finance', 'order':'2', 'url':''},{'name':'Retail', 'order':'3', 'url':''},{'name':'Marketing & design', 'order':'4', 'url':''},{'name':'Agency & culture', 'order':'5', 'url':''},{'name':'Other', 'order':'6', 'url':''}] %}
{% for item in my_tags %}
  {% for category in tagsOrder %}
    {% if item|lower == category.name|lower %}
      {% do category.update({'url': item.slug}) %}
    {% endif %}
  {% endfor %}
{% endfor %}

{# example implementation #}
<ul>
  <li>1: All, {{ group.absolute_url }}</li>
  {% for item in tagsOrder|sort(False, False, 'order') %}
  <li>{{item.order}}: {{item.name}}, {{ blog_tag_url(group.id, item.url) }}</li>
  {% endfor %}
</ul>

If you're translating your blog, it would have to be something like this:

{% set my_tags = blog_tags('default', 250) %}
{% set tagsOrder = [] %}
{% for item in my_tags %}
  {% if item is in ['Consumer finance','1st translation of Consumer finance','2nd translation of Consumer finance','3rd translation of Consumer finance'] %}
    {% do tagsOrder.append({'name':item, 'order':'2', 'url':item.slug}) %}
  {% elif item is in ['Retail','1st translation of Retail','2nd translation of Retail','3rd translation of Retail'] %}
    {% do tagsOrder.append({'name':item, 'order':'3', 'url':item.slug}) %}
  {% elif etc... %}

  {% endif %}
{% endfor %}

{# example implementation #}
{% set all = 'All' %}
{% if content.language.languageTag == 'de'}
  {% set all = 'Alle'}
{% endif %}
<ul>
  <li>1: {{all}}, {{ group.absolute_url }}</li>
  {% for item in tagsOrder|sort(False, False, 'order') %}
  <li>{{item.order}}: {{item.name}}, {{ blog_tag_url(group.id, item.url) }}</li>
  {% endfor %}
</ul>

[Anton · Accepted solution]

Hi @karen, 

your devs are partially right. 

If you're using the blog_tag function the list is being generated dynamically and one of the few things you can do is apply a sort filter.

BUT an somehow easier way would be a pretty simple custom module. Just one (or two) text field(s) inside of a repeater. Also I recommend to make this module global. 

First add a text field and call it "Tag label", the second one is for the URL. So if you add a second text field, call it "URL". You can also add a Link or URL function if you want. The result will be the same. Also please keep in mind that the namings are up to you. 

Once you've added both fields to the module the HTML+Hubl part is pretty simple

<div class="blogTagWrapper">

<ul class="blogTags">
{% for single_tag in module.blog_tags %}
<li class="singleBlogTag"><a href="{{ single_tag.url }}">{{ single_tag.tag_name }}</a></li>
{% endfor %}
</ul>

</div>

What's left is to add the "plus" icon(either by CSS or you can add it directly to the code) and style it the way you would like to have it. After the styling is done you can place the module in the template and add your tags to it.

best, 

Anton

[Jaycee_Lewis]

Hi, @karen Thanks for your question. Let's see if the community has any experience — hey @Anton @Stephanie-OG, do you have any suggestions for @karen?

Thank you! — Jaycee