Hubspot | {% related_blog_posts %} callback and resize_image_url() in JS

related-blog-posts-callback.html

{% related_blog_posts limit=5, callback="related_post_card" %}

<script>
  var related_post_card = function(blogposts) {
    var formatted = "";

    function resize_image_url(imgUrl, portalId, width) {
      // https://dev.to/th0rgall/hubspot-s-undocumented-image-optimization-api-25b2
      // image will return an array where [0] = name of image
      var image = /https:\/\/[^\/]+\/hubfs\/(.+)/.exec(imgUrl);
      if (!image) {
        console.warn('something changed');
        return imgUrl;
      } 

      return `https://f.hubspotusercontent40.net/hub/${portalId}/hubfs/${image[1]}?width=${width}&name=${image[1]}`;
    }

    for (var i = 0; i < blogposts.length; i++) {
      var blogpost = blogposts[i];

      const imageSrcset = [
        `${resize_image_url(blogpost.featuredImage, blogpost.portalId, 200)} 200w`,
        `${resize_image_url(blogpost.featuredImage, blogpost.portalId, 300)} 300w`,
        `${resize_image_url(blogpost.featuredImage, blogpost.portalId, 400)} 400w`,
        `${resize_image_url(blogpost.featuredImage, blogpost.portalId, 600)} 600w`,
      ];

      formatted += '<div class="swiper-slide">';
      formatted += `<a href="${blogpost.url}" class="c-card-blog  c-card-blog--updated">`;
      formatted += '<div class="o-ratio o-ratio--16:9 c-card-blog__figure">';
      formatted += '<figure class="o-ratio__content  image">';
      formatted += `<img src="${blogpost.featuredImage}" srcset="${imageSrcset.join(',')}" alt="${blogpost.featuredImageAltText}"/>`;
      formatted += '</figure>';
      formatted += '</div>';
      formatted += '<div class="c-card-blog__body">';
      formatted += `<p class="c-card-blog__subheading"><small>Episode ${blogpost.widgets.podcast.body.episode_no}:</small></p>`;
      formatted += `<h6 class="c-card-blog__title">${blogpost.name}</h6>`;
      formatted += `<p class="c-card-blog__excerpt  u-body-sm">${blogpost.metaDescription}</p>`;
      formatted += '</div>';
      formatted += '</a>';
      formatted += '</div>';
    }

    return formatted;
  }
  
  var related_post_pagination = function(blogposts) {
    var formatted = "";
    
    for (var i = 0; i < blogposts.length; i++) {
      formatted += '<span class="c-carousel__pagination-item" data-carousel-pagination-item></span>';
    }
    
    return formatted;
  }
</script>