Add blog tag URL's and limit post summary characters in JS callback for recent blog posts

[jwill377]

Hello! I am trying to get the url's for the blog tags added into the JS callback for recent blog posts. I would also like to truncate the summary post characters and am having issues getting both of these to work. I am using this code

<div class="blog-recent-posts__list">
{% related_blog_posts limit=3, callback="blog_post_formatter" %}

<script>
var blog_post_formatter = function(blogposts) {

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

[tomasgaitan1 · Accepted solution]

Hi jwill377!

Nice to meet you, Tomas Gaitan, Technical Implementation Specialist at HAL Company, HubSpot Diamond Partner.

To add the blog tag URLs, you can modify the formatting variable inside the loop to include an anchor tag for each tag. Here is an example of how you can modify the code:

var formatted = "<div>";
for (var i = 0; i < blogposts.length; i++) {
var blogpost = blogposts[i];
formatted += '<div class="related-blog-item">';
if (blogpost.featuredImage) {
formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
}
formatted += '<div class="related-blog-tags">';
if (blogpost.tagList.length > 0) {
formatted += `${blogpost.tagList.map(tag => `<a href="${tag.url}" class="blog-tag">${tag.label}</a>`).join(", ")}`;
}
formatted += '</div>';
formatted += `<a class="related-blog-title" href="${blogpost.url}"><span>${blogpost.name}</span></a>`;
formatted += `<p class="related-blog-post-summary">${blogpost.postSummary.substring(0, 100)}...</p>`;
formatted += '</div>';
}
formatted += "</div>";
return formatted;

In this modified code, we are using map() to create an anchor tag for each tag in the tagList, and using the url property of each tag to create the href attribute of the anchor tag. We are also adding a class="blog-tag" to the anchor tag so you can style it as needed.

To truncate the characters in the post summary, we will use the substring() method to get the first 100 characters of the postSummary property and add an ellipsis at the end. You can adjust the number of characters as needed.

I remain attentive to any questions or queries you may have.

Regards,

[GFW-MillerM]

Hello! 
Thank you for your response, it was very helpful. The code is returning all the correct tags associated with the post, however, it seems that the URL for the tags (links to the tag detail pages) is returning "undefined". 

Any suggestions?

if (blogpost.tagList.length > 0) {
formatted += '<div class="blog-listing__post-tags">';
formatted += blogpost.tagList.map(tag => `<a href="${tag.url}" class="blog-tag">${tag.label}</a>`).join(" ");
formatted += '</div>';
}

[jwill377]

Thank you so much!!