CMS Development

Fabinol
Participant

Ordering topics in a list

SOLVE

Hello all,

 

Is there a way to order the topics in list on a blog post so that they match the order in which they were entered inside the settings panel? The output of the following codes lists the topics in alphabetical order (or sometimes even just randomly):

{% if content.topic_list %}
  {% for topic in content.topic_list %}
    <a class="topics-list__link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a> 
  {% endfor %}
{% endif %}

Basically I'm trying to distinguish the first topic entered, which acts like a primary topic, from all the subsequent ones entered.

 

Cheers

0 Upvotes
1 Accepted solution
Jsum
Solution
Key Advisor

Ordering topics in a list

SOLVE

@Fabinol,

 

I tried to answer this the other day but I was out of town and my wifi was pretty aweful. Sorry for making you wait. 

 

This question has been asked a few times and I believe that we always land on the conclusion that this is random-ish. Topics are stored in a database of sorts. Notice how you only have to create a topic once. If you use it again on a different blog it will be in the dropdown. 

 

What I think is happening is that instead of the topics being stored per blog post, they are stored globally and when the list is called up per blog the global list is ran through and any topics tied to a specific blog are served up in the order that they exist in the global list of topics. This order could be completely random, based on creation order, etc. I'm not really sure. I feel like this could be updated by the Hubspot team to be more controlled.

 

There is a solution you could use to make the first topic your "main topic".

 

It's going to involve making a drop down for your blog editor that contains your main topics. 

{% choice "maintopics" label="Choose Main Topic for This Blog...", value="Marketing", choices="Marketing, Design, Development, SEO", export_to_template_context=True %}

Notice that I am using export_to_template_context=True.

 

This code will add a drop down in your blog editor with the listed choices. The choice you choose will be set as the value. The default value above is currently set to "Marketing".

 

Now you just need to include it as the first topic in your list while blocking from the actual list. 

<p id="hubspot-topic_data"> Topics:
    <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ widget_data.maintopic.value|lower|replace(' ', '-') }}">{{ widget_data.maintopic.value }}</a>,
    {% for topic in content.topic_list %}
       {% unless topic.name|lower == widget_data.maintopic.value|lower %}
          <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
       {% endunless %}
    {% endfor %}
</p>

There are a couple of advanced concepts here. First we want to build the main topic's link using your group.absolute_url token, /topic, then the choice value. We want to lower case it and replace spaces with slugs because this is how hubspots topic slugs are formatted. Note, if the topic doesn't exist in the system then you will get a 404. The topic has to exist and your link has to be correct.

 

Next we are comparing the lower case version of the topic.name with the choice value. If they aren't equal than the topic is shown, if they are then it is not. 

 

This isn't perfect, and it could definitely be tightened up, but it is a good concept I think. 

View solution in original post

4 Replies 4
Jsum
Solution
Key Advisor

Ordering topics in a list

SOLVE

@Fabinol,

 

I tried to answer this the other day but I was out of town and my wifi was pretty aweful. Sorry for making you wait. 

 

This question has been asked a few times and I believe that we always land on the conclusion that this is random-ish. Topics are stored in a database of sorts. Notice how you only have to create a topic once. If you use it again on a different blog it will be in the dropdown. 

 

What I think is happening is that instead of the topics being stored per blog post, they are stored globally and when the list is called up per blog the global list is ran through and any topics tied to a specific blog are served up in the order that they exist in the global list of topics. This order could be completely random, based on creation order, etc. I'm not really sure. I feel like this could be updated by the Hubspot team to be more controlled.

 

There is a solution you could use to make the first topic your "main topic".

 

It's going to involve making a drop down for your blog editor that contains your main topics. 

{% choice "maintopics" label="Choose Main Topic for This Blog...", value="Marketing", choices="Marketing, Design, Development, SEO", export_to_template_context=True %}

Notice that I am using export_to_template_context=True.

 

This code will add a drop down in your blog editor with the listed choices. The choice you choose will be set as the value. The default value above is currently set to "Marketing".

 

Now you just need to include it as the first topic in your list while blocking from the actual list. 

<p id="hubspot-topic_data"> Topics:
    <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ widget_data.maintopic.value|lower|replace(' ', '-') }}">{{ widget_data.maintopic.value }}</a>,
    {% for topic in content.topic_list %}
       {% unless topic.name|lower == widget_data.maintopic.value|lower %}
          <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
       {% endunless %}
    {% endfor %}
</p>

There are a couple of advanced concepts here. First we want to build the main topic's link using your group.absolute_url token, /topic, then the choice value. We want to lower case it and replace spaces with slugs because this is how hubspots topic slugs are formatted. Note, if the topic doesn't exist in the system then you will get a 404. The topic has to exist and your link has to be correct.

 

Next we are comparing the lower case version of the topic.name with the choice value. If they aren't equal than the topic is shown, if they are then it is not. 

 

This isn't perfect, and it could definitely be tightened up, but it is a good concept I think. 

Fabinol
Participant

Ordering topics in a list

SOLVE

Thank you so much @Jsum That is a fantastic work around! It does feel strange that Hubspot doesn't have the ability to order topics (not even alphabetically!) or have some kind of differentiation between Categories and Tags for blog posts. Oh well, can't have it all I guess.

 

Thank you again for your help.

 

Cheers,

Fabian

0 Upvotes
Jsum
Key Advisor

Ordering topics in a list

SOLVE

@Fabinol,

 

No problem, glad I could help. 

 

Hubspot blogs only have topics, not categories which we should really start requesting in the idea forum. Most content management systems have the ability to create custom post types which would be really nice. 

Fabinol
Participant

Ordering topics in a list

SOLVE

Exactly my thoughts. "Topics" in Hubspot are analogous to "Tags", however having an additional system for categorization is something important, and sadly missing.