CMS Development

APermissions
Member | Gold Partner
Member | Gold Partner

Want to be able to add post tag using related_blog_posts HubL tag

SOLVE

I'm using the related_blog_posts HubL tag to create a related posts section, as outlined here:
https://developers.hubspot.com/docs/cms/guides/creating-a-related-post-listingIt's working well, however I would like to make a customization. How can I add the blog tag to the div for each blog item?For example, I would like to be:

<div class="related-blog-item article">
<div class="related-blog-item podcast">

etc.

 

Here's the code I have in place now:

 

{% related_blog_posts limit=3, callback="blog_post_formatter" %}

<script>
  var blog_post_formatter = function(blogposts) {

    var formatted = "<div class='related-posts'>";
    for (var i = 0; i < blogposts.length; i++) {
      var blogpost = blogposts[i];
      formatted += '<div class="related-blog-item">';
      
      formatted += '<div class="related-blog-icon">';
      if (blogpost.featuredImage) {
      formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
      }
      formatted += '</div>';
                                     
      formatted += '<div class="related-blog-tag">';
      if (blogpost.tagList.length > 0) {
        formatted += `${blogpost.tagList.map(tag => tag.label).join(", ")}`;
      }
      formatted += '</div>';
      formatted += `<a class="related-blog-title" href="${blogpost.url}"><h2>${blogpost.name}</h2></a>`;
      formatted += `<a class="more-link" href="${blogpost.url}">Read more</a>`;
      
      formatted += '</div>';
    }
    formatted += '</div>';
    return formatted;
  }
</script>

 

0 Upvotes
1 Accepted solution
APermissions
Solution
Member | Gold Partner
Member | Gold Partner

Want to be able to add post tag using related_blog_posts HubL tag

SOLVE

Here's the solution:

Change...

 

formatted += '<div class="related-blog-item">';

 

to

formatted += `<div class="related-blog-item ${blogpost.tagList.map(tag => tag.slug).join(" ")}">`;

 

View solution in original post

0 Upvotes
1 Reply 1
APermissions
Solution
Member | Gold Partner
Member | Gold Partner

Want to be able to add post tag using related_blog_posts HubL tag

SOLVE

Here's the solution:

Change...

 

formatted += '<div class="related-blog-item">';

 

to

formatted += `<div class="related-blog-item ${blogpost.tagList.map(tag => tag.slug).join(" ")}">`;

 

0 Upvotes