Custom blog topic page

[mateomm22]

Hi there!

I'm creating a custom view for each topic in my blog

I'm using this code 

{% if is_listing_view %}
  {% if topic %}
    My custom code
    {{topic}}
    {{topic.name}}
    {{topic.slug}}
  {% endif %}
{% endif %}

According to the documentation this {{topic}} variable has the topic.name and the topic.slug properties, but it seems it doesn't work.

I need this {{topic.name}} for printing the topic name not as a slug but the normal text.

Do you know what is wrong with this code?

[tjoyce · Accepted solution]

@mateomm22 - Try this HUBL loop instead of the one you currently have. This will loop through all of the topics related to the current page's blog posts and match the slug to the current page's slug. Then you can use the name to display on your page.

{% if is_listing_view %}
  {% for t in contents_tags %}
    {% if t.slug == topic %}
        {{t.name}}
    {% endif %}
  {% endfor %}
{% endif %}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[Jsum]

@mateomm22,

I pretty printed the topics variable on my own blog:

 {{ topic|pprint }}

and the result was:

 (STRING: HUBSPOT-DEVELOPMENT)

printed to the screen, 'HUBSPOT-DEVELOPMENT' being the topic slug as a string.

There are three things you can do with this:

1. Format the slug. use the replace filter to remove swap the '-'s for spaces and use the capitalize filter for... capitalization.

{{ topic|replace('-', ' ')|capitalize }}

2. You can use it to check a topics loop:

{% set my_topics = blog_topics('default', 250) %}

{% for item in my_topics %}

     {%  if topic == item.slug %}
          {{ item.slug }}
          {{ item }}
     {% endif %}

     {%  unless topic == item.slug %}
          {{ item.slug }}
          {{ item }}
     {% endunless %}
{% endfor %}

3. Add the topic slug as a body class. I don't know if that's useful, but you can do it.

Need help? Hire Us Here

[JasonRosa]

Hey @mateomm22 it is possible to print the topic name on the topic page but it is a bit of a workaround. To do it, your code would need to be similar to the documentation here. It would look like this: 

{{ page_meta.html_title|replace(' | ', '') }}

If we break down the code, what we're essentially doing is getting the blog topic page HTML title which is the blog listing page HTML <title> followed by a '|' followed by the topic name. Then we're using the replace filter to remove the blog listing <title> and '|' piece of things so that we are just left with the topic name. So all you have to essentially do is add the blog listing title before the '|' part in the code above. If my blog listing <title> was "My Blog 2018" my code would be: 

{{ page_meta.html_title|replace('My Blog 2018 | ', '') }}

[Phil_Vallender]

Hi @mateomm22

I'm not a developer so I could be wrong on this, but when I look at the developer info for one our posts, I'm seeing variables in the format 'topic_names' not 'topic.name'. 

Could it be that simple?

[mateomm22]

Hi @Phil_Vallender

I'm afraid this isn't the solution according to the Hubspot documentation this {{topic}} variable has these two values inside it.

"The topic variable can be used to render markup for a topic listing. It also contains the properties: topic.name and topic.slug."

Anyway thank you for the quick response

[Phil_Vallender]

Hi @mateomm22

Ok - we need an expert! @Jsum can you help?