Return 3 Recommended Posts using HubSpot Hubl

hubspot_recommended_posts.html

/**
 * Return 3 Recommended Posts using HubSpot Hubl
 * Developer: Archie Makuwa
 * Date: 12 October 2015 
 * 
 * paste this snipped inside the a blog module
 */
 
<!-- Applies to respective template --> by this I mean : blog_post / blog_internal templates -->
<div class="widget-module">
    <h3>Recommended Blog Posts</h3>
    {% set topic_posts = blog_recent_topic_posts('default', 'recommended', 3) %}    // NB - set this in your Blog topics
    {% for topic_post in topic_posts %}
    <ul class="recom-post">
        <li>
            <a href="{{ topic_post.absolute_url }}" class="related-image" style="background: url('{{topic_post.featured_image }}');" ></a>
            <p><a class="post-title" href="{{ topic_post.absolute_url }}">{{ topic_post.name }}</a></p> 
        </li>
    </ul>
    {% endfor %}      
</div>


/** 
 * You will have to add some CSS to display the featured image as a background. 
 * You can manipulate the CSS as you desire - this is not for me to say...
 * Here is my example: 
 */
ul li a.related-image {
    display: block;
    min-height: 200px;
    margin-bottom: 10px;
    width: 100%;
}