topic Re: Add blog tag URL's and limit post summary characters in JS callback for recent blog posts in CMS Development

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

jwill377 — Thu, 27 Apr 2023 17:51:54 GMT

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" %}

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

tomasgaitan1 — Thu, 27 Apr 2023 20:17:57 GMT

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,

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

jwill377 — Mon, 01 May 2023 18:16:31 GMT

Thank you so much!!

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

GFW-MillerM — Thu, 15 Feb 2024 03:41:23 GMT

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>';
}