topic Re: Controlling the order of the blog tags on the blog list page in CMS Development

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

karen — Thu, 09 Mar 2023 18:00:16 GMT

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?

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

Jaycee_Lewis — Thu, 09 Mar 2023 18:40:14 GMT

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

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

Anton — Fri, 10 Mar 2023 09:59:05 GMT

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

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

piersg — Fri, 10 Mar 2023 11:30:44 GMT

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

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

karen — Fri, 10 Mar 2023 19:51:11 GMT

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

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

Jaycee_Lewis — Fri, 10 Mar 2023 19:55:43 GMT

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

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

karen — Fri, 10 Mar 2023 19:56:34 GMT

I could not agree more!

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

benvanlooy — Wed, 19 Jun 2024 12:48:40 GMT

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