Blog - show topics

[AnayaP]

Hi there,

Each blog post has a topic assigned to it. I would like to list the topic (associated with each post) on Blog Listing and Blog Post page as Category. I am a beginner to Hubspot and completely lost as I dont know which functions/variables are avaliable to achieve this. If I understand correctly blog_topics is replaced by blog_tags? Tried to use contents_topics and topic.name variables but that is not showing any topic on the pages.

Thus appreciate your help. Would be really good to get some pointers.

Many Thanks

[DanielSanchez · Accepted solution]

Hi @AnayaP 

For list all tags, try this code:

  {% set my_topics = blog_topics('default', 250) %}
  <ul>
  {% for item in my_topics %}
  {% if item != "Marketplace" and item != "Contract Lifecycle Management Suite" and item != "Aquisition Suite" and item != "Program Management Suite" and item != "Financial Assistance Suite" %}
  <li><a href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</a></li>
    {% endif %}
  {% endfor %}
  </ul>

For show posts in your website page, try this code:

{% set posts = blog_recent_posts('default', 3) %}
    {% for post in posts %}
    <div class="recent-post-blog">
      <a href="{{ post.absolute_url }}" class="recent-header-post" style="background-image: url('{{ post.featured_image }}')"></a>

      <div class="recent-content-post">
      <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
      {# TAGS #}
      </div>
      <div class="recent-content-post-footer">
        {{ post.publish_date|datetimeformat('%B %e, %Y') }}

        <div class="share-posts">
         <i class="fas fa-share-alt share-active"></i>
         <a href="https://api.whatsapp.com/send?l=pt_BR&text={{ post.absolute_url }}" target="_blank"><i class="fab fa-whatsapp"></i></a>
         <a href="https://www.facebook.com/sharer/sharer.php?u={{ post.absolute_url }}" target="_blank"><i class="fab fa-facebook"></i></a>

        </div>
      </div>
    </div>

    {% endfor %} 

I past now my css for code above

.section-blog-post{
  padding:40px 0 60px;
  background-size: 100% auto!important;
  background-repeat: no-repeat!important;
  background-position: center center!important;
  display:block;
  position:relative;
  text-align:center;
}

.recent-post-blog {
    display: inline-block;
    width: 32%;
    vertical-align: top;
    margin: 20px .5%;
    text-align: left;
    background: #fff;
    box-shadow: 2px 2px 7px #0000001a;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    overflow: hidden;
}

.recent-header-post {
    height: 150px;
    width: 100%;
    background-position: center center;
    background-size: 100% auto;
    position: relative;
    display: block;
    transition:0.2s linear all;
}

.recent-header-post:hover{
    background-size:120% auto;
}

.share-posts {
    width: 100px;
    position: absolute;
    bottom: 2px;
    right: -55px;
    padding: 5px;
    transition: .2s linear all;
}

.share-posts:hover {
    right: 0px;
}

.share-posts i {
    font-size: 17px;
    vertical-align: middle;
    padding: 4px;
}

.share-posts i.share-active{
  margin-right:10px;
}

.recent-content-post-footer {
    border-top: 1px solid #f0f0f0;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 700;
    display: block;
    position: relative;
}

.recent-content-post{
    padding:20px;
}

.recent-content-post h3 {
    margin: 0;
    font-size:18px;
}

.section-toggleable-tabs-detail {
    position: absolute;
    width: 100%;
    height: 120%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom center;
    top: 0;
    z-index:1;
}

  

.content-wrapper{
    text-align: center;
    width: 1170px;
    max-width: 100%;
    margin: 0 auto;
    z-index:2;
    position:relative;
}

.section-blog-post h2 {
    font-weight: 300;
}

@media screen and (max-width: 900px) {

  .section-toggleable-tabs-detail {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    top: 0;
    z-index:1;
}
  
  .recent-post-blog {
    display: inline-block;
    width: 80%;
    vertical-align: top;
    margin: 10px .5%;
    text-align: left;
    background: #fff;
    box-shadow: 2px 2px 7px #0000001a;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    overflow: hidden;
}
}

Hope this helps.

Did this post help solve your problem? If so, please mark it as a solution.

Best regards! 🙂

[AnayaP]

Thanks @DanielSanchez  for your help. It works well with Tags, however I wanted to display topics which I have created under SEO section. Are tags referrred as topics when we talk about blogs?

Appreciate your input. Thanks