HUBL to populate posts on custom blog home page

[mkarsten]

I'm working on creating some custom modules for our blog home page, so it will populate automatically when we publish a blog. I started the design with placeholder and am going back and changing out for automations, so hope this preview isn't too confusing, https://blog.pitsco.com/?hs_preview=asaqvYuq-23970970238.

The first image, blog name, and ... linked arrow are working correctly. The placeholder module directly following is the summary format I'm shooting for.

I've tried several variations using content, summary (ie. {{ rec_post.summary }}, and body with no luck. Here's what I have so far:

{% set rec_posts = blog_recent_posts('default', 1) %}
{% for rec_post in rec_posts %}
<div style="padding: 30px 0px 0px 0px;">
<h1><span style="color: #00539f;"><a href="{{ rec_post.url }}" target="_blank">
<span id="hs_cos_wrapper_name" class="hs_cos_wrapper hs_cos_wrapper_meta_field hs_cos_wrapper_type_text" data-hs-cos-general-type="meta_field" data-hs-cos-type="text">{{ rec_post.name }}</span>
</a></span>
</h1>
<p style="line-height: 1.75; text-align: left;"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;">
<span style="background-color: transparent;">{{ rec_post.content }} . . . <a href="{{ rec_post.url }}" rel="noopener" target="_blank">
<img src="https://cdn2.hubspot.net/hubfs/2781691/Blog%20Images/Arrow-with-circle.png" width="22" style="width: 22px;"></a></span><br></span></p>
</div>
{% endfor %}

I'm open to a better approach for this, considering that next I'll work on pulling the 2nd most recent post and 3rd most recent post for the smaller blocks under the most recent post.

Any suggestions appreciated!

[mkarsten]

Update... Pretty close to what is needed for the first blog summary, just looking for a way to move the linked arrow image directly behind the truncation instead of on the next line. Here's the latest I'm using, and copy and pasting this to the other 2 summaries, so work can begin on populating the 2nd and 3rd most recent blogs:

{% set rec_posts = blog_recent_posts('default', 1) %}
{% for rec_post in rec_posts %}
{% set html_text = "rec_post.post_body" %}
<div style="padding: 30px 0px 0px 0px;">
<h1><span style="color: #00539f;"><a href="{{ rec_post.url }}" target="_blank">
<span id="hs_cos_wrapper_name" class="hs_cos_wrapper hs_cos_wrapper_meta_field hs_cos_wrapper_type_text" data-hs-cos-general-type="meta_field" data-hs-cos-type="text">{{ rec_post.name }}</span>
</a></span>
</h1>
<div style="line-height: 1.75; text-align: left;"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;">
{{ rec_post.post_body|truncatehtml(200, end=' . . .') }}<a href="{{ rec_post.url }}" rel="noopener" target="_blank">
<img src="https://cdn2.hubspot.net/hubfs/2781691/Blog%20Images/Arrow-with-circle.png" width="22" style="width: 22px;"></a></span></div>
</div>
{% endfor %}