Picking one of your Post tags as the most important tag

[BGoosen]

Is there a way to edit blog post tags that determines which one of the tags would be picked by this code?

 {% if post.topic_list[0].name %}
<a href="{{ blog_tag_url(my_blog, post.topic_list[0].slug) }}" class="post__cat">{{ post.topic_list[0].name }}</a>

At first I thought it was just putting the last tag added in that first spot, but then I tried deleted and re-adding a tag I wanted to be the main tag and it didn't go to the front of the list.

Any ideas?

[BGoosen]

Yes, you're close. The theme we just switched to uses a bit of HubL to grab the first tag to display under the post thumb on the blog index page (https://blog.superstock.com/blog). All of the tags show up on any individual post, but one is used more prominently.

The trouble is, I don't see any way to change the order of the tags on a blog post. At first it seemed like the last tag you entered would be first in the list, but deleting and re-adding a tag doesn't seem to always move it to the front of the topic_list array (post.topic_list[0]).

I was hoping someone might have an idea if there is a way to control which tag goes into that spot.

[KOrdener · Accepted solution]

Thank you for clarifying. As far as I'm aware, there is not a way to inately change the sort order of the tags. You can change them on the template level with hubl but that wouldn't fix the problem on an individual post level. The only solution that I can think of would be to add a field to the template (post page not listing) and use some hubl to grab the matching tag:

{% module "featured_tag" path="@hubspot/text", label="Type the name of the Featured Tag", value="default", export_to_template_context=True %}

This will give you a text field on the post page editor. You can type the name of the tag you want featured. Then, where you want to put the tag on the page you would add this:

{% set featured_tag = widget_data.featured_tag.body.value %}
{% for tag in post.topic_list %}
  {% if tag|lower|replace(' ', '') === featured_tag|lower|replace(' ', '') %}
     <a href="{{ blog_tag_url(my_blog, tag.slug) }}" class="post__cat">{{ tag.name }}</a>
  {% endif %}
{% endfor %}

This will check each tag for a match with what you typed for the featured tag and only generate the anchor for the match. (the lower and replace are to make sure the format is correct. All lower case and replace removes the spaces). 

The code above will work on the blog post page. If you want to do this on the listing page instead you would need to change the path to pull the widget_data (just change the first line to):

{% set featured_tag = content.widgets.featured_tag.body.value %}

ref: export to template context

[BGoosen]

Well, darn. Just now got around to trying this, and adding the module seems to work, but the output part doesn't seem to be returning anything.

I added the tag "test" in the new field on the blog post and to the tags in settings, so it should be finding a match.

Live site: https://blog.superstock.com/blog/the-hottest-trend-in-online-video-captioned-copy

Test site: https://blog.superstock.com/nelly_test/the-hottest-trend-in-online-video-captioned-copy-0

Seems to do the same thing on the index page, too.

Any idea why it would break?

[KOrdener]

Can you send a snippet or screenshot of the code in the template? Both the module and where you called the data for the tag.

[BGoosen]

Thank you so much for continuing to help me with this!

This is the code for blog-post.html after editing it.

!--
  templateType: blog_post
  isAvailableForNewContent: true
  label: Nelly - blog post with hero tag
  screenshotPath: ../images/template-previews/blog-post.png
-->
{% set template_css = '../../css/templates/blog.css' %} 

{% extends './layouts/base.html' %}

{% block body %} 

{% module "featured_tag" path="@hubspot/text", label="Type the name of the Featured Tag", value="default", export_to_template_context=True %}

{# The main-content ID is used for the
navigation skipper in the header.html file. More information on the navigation
skipper can be found here:
https://github.com/HubSpot/cms-theme-boilerplate/wiki/Accessibility #}

<main id="main-content" class="body-container-wrapper home single single-1">
        <div class="site-content">
            <!-- header-top -->
            <div class=" mnmd-block mnmd-block--fullwidth single-block-top ">
                <div class="container">
                    <div class="single-block-top__inner">
                        {# Blog Post Featured Image #}
                        {% if content.post_list_summary_featured_image %}
                        <div class=" single-entry-thumb post__thumb">
                            <div class="background-img" style="background: url('{{ content.post_list_summary_featured_image }}');"></div>
                        </div>
                        {% endif %} 
                        {# End Blog Post Featured Image #}
                        <header class="single-head post__head text-left">

                          
{% set featured_tag = widget_data.featured_tag.body.value %}
{% for tag in post.topic_list %}
  {% if tag|lower|replace(' ', '') === featured_tag|lower|replace(' ', '') %}
     <a href="{{ blog_tag_url(my_blog, tag.slug) }}" class="post__cat">{{ tag.name }}</a>
  {% endif %}
{% endfor %}                          
                          
                            <h1 class="post-title post__title ">

 This is what it used to be

<!--
  templateType: blog_post
  isAvailableForNewContent: true
  label: Nelly - blog post
  screenshotPath: ../images/template-previews/blog-post.png
-->
{% set template_css = '../../css/templates/blog.css' %} 

{% extends './layouts/base.html' %}

{% block body %} 

{# The main-content ID is used for the
navigation skipper in the header.html file. More information on the navigation
skipper can be found here:
https://github.com/HubSpot/cms-theme-boilerplate/wiki/Accessibility #}

<main id="main-content" class="body-container-wrapper home single single-1">
        <div class="site-content">
            <!-- header-top -->
            <div class=" mnmd-block mnmd-block--fullwidth single-block-top ">
                <div class="container">
                    <div class="single-block-top__inner">
                        {# Blog Post Featured Image #}
                        {% if content.post_list_summary_featured_image %}
                        <div class=" single-entry-thumb post__thumb">
                            <div class="background-img" style="background: url('{{ content.post_list_summary_featured_image }}');"></div>
                        </div>
                        {% endif %} 
                        {# End Blog Post Featured Image #}
                        <header class="single-head post__head text-left">
                            {% if content.tag_list %}
                            {% for tag in content.tag_list %}
                            {% if loop.index0 == 0 %}
                                <a class="post__cat cat-style-2" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
                              {% endif %}
                            {% endfor %}
                            {% endif %}
                            <h1 class="post-title post__title ">

[KOrdener]

Great, I did some testing on my own and there are two things

I would like for you to try. 

1: I had an error in the code I gave you. Remove one of the = signs on this line.

Old: 

{% if tag|lower|replace(' ', '') === featured_tag|lower|replace(' ', '') %}

 New:

{% if tag|lower|replace(' ', '') == featured_tag|lower|replace(' ', '') %}

2: There probably won't be any value showing from the field until you change it from the default on the page editor. For some reason it doesn't like the defaults. When you type it in it doesn't have to be case sensitive or space sensitive. Other than that it needs to be identical.

[BGoosen]

Ok, I deleted the extra equal sign. Still didn't work, so I compared to the original theme code, and changed

{% for tag in post.topic_list %}

to 

{% for tag in post.tag_list %}

and now the individual pages are working perfectly! Thank you!

But the listing page does not appear to work with the same code.

{% if post.topic_list[0].name %}
<a href="{{ blog_tag_url(my_blog, post.topic_list[0].slug) }}" class="post__cat">{{ post.topic_list[0].name }}</a>
{% endif %}

would become

{% set featured_tag = content.widgets.featured_tag.body.value %}
{% for tag in content.tag_list %}
  {% if tag|lower|replace(' ', '') == featured_tag|lower|replace(' ', '') %}
     <a href="{{ blog_tag_url(my_blog, tag.slug) }}" class="post__cat"> {{ tag.name }}</a>
  {% endif %}
{% endfor %}       

right? 

[KOrdener]

Sorry for the delayed response on this. It looks correct to me from the limited view I have. Without being able to dive fully into your project I'm not sure what else try. Since you did get the post pages working, I would imagine the listing page just needs small changes to work as well but I don't have any way of testing that on your system. What I would recommend is to look through the documentation at this link and see if you can compare to your code and figure out the discrepancy. A tip that might help you: If you run 

{% for content in contents %}
{{content.widgets}}
{% endfor %}

somewhere on your listing page. That will print out on the page all the data stored under widgets for that post. That way you can search and try to find the right pathing to the module we created.

[BGoosen]

No worries, I haven't worked on it for a bit, but I did make a little headway. I think with this latest advice I should be able to sort it out. 

You've been so helpful, thank you!

[KOrdener]

You're Welcome.! For future assistance, I would recommend downloading Slack and join HubSpots Slack Channel. There are hundreds of active hubspot users and devs at any given time and it is a great place to get advice and find people to help solve issues like this! Good luck in the future!

[BGoosen]

Wow! This sounds perfect!

Thank you so much!

[KOrdener]

Can you clarify a bit more what exactly you are trying to accomplish? It sounds like you are trying to have a specific tag show on your post instead of all of them.