Add featured image for related blog posts

Highlighted
Regular Contributor

How do I add a featured image for related blog posts found on the post template page? So far, I've seen a lot of answers for adding a featured image to recent posts, but nothing for related posts. 

 

How can I do this in Hubl? 

 

My related section looks like this:

<div class="related-post-wrap">
          <h3>RELATED</h3>
            {% set max_posts = 3 %}{# Set the max number of related posts to be output to the page here #}
            {% set post_list = [] %}
            {% for topic in content.topic_list %}
            {% set post_list = post_list + blog_recent_topic_posts('group.id', topic.slug, max_posts + 1 ) %}
            {% if loop.last %}
            {% set post_list = post_list|sort(true, false, 'publish_date')|unique('name') %}
            {% set i = 0 %}
            {% for post in post_list %}
            {% if content.absolute_url != post.absolute_url and i < max_posts %}
              <div class="hs-postlisting-item">
                <a href="{{post.absolute_url}}">{{ post.name}}</a>
              </div>
            {% if post.topic_list %}
            {% for topic in post.topic_list %}
            {% endfor %}
            </span>
            {% endif %}
            {% set i = i + 1 %}
            {% endif %}
            {% endfor %}
            {% endif %}
            {% endfor %}
        </div> 
Reply
0 Upvotes
1 Reply 1
Highlighted
Regular Contributor

I figured it out with some additional CSS for the HubL code. Here's what I did: 

 

CSS for main container:

{

display: grid;

grid-template-columns: repeat(3,1fr);

grid-gap: 20px;

}

 

CSS for each item (related content):

{

position: relative;

display: block;

z-index: 1;

}

 

CSS for main container at tablet breakpoint:

{

grid-template-columns: repeat(2,1fr);

}

 

CSS for main container at mobile breakpoint:

{

grid-template-columns: 1fr;

}

 

Reply
0 Upvotes