Pulling featured image into blog post template

03517 — Tue, 25 Mar 2025 11:12:34 GMT

Hi;
I'm using the growth theme and I'd like to add the featured image into the blog post template. (The template file is inside of a child theme) Right now the image only appears on the listing page and not on the blog post page.

I'd like the featured image to appear at the very top, above the timestamp and title.

Can anyone help:

{% set template_css = "../../css/templates/blog-post.css" %}
{% extends "./layouts/base.html" %}

{% block body %}

{# Blog post wrapper #}

{# Blog post #}

<div class="blog-post-section">
<article class="blog-post">
<time datetime="{{ content.publish_date }}" class="blog-post__timestamp">
{{ content.publish_date_localized }}
</time>
<h1>{{ content.name }}</h1>
<div class="blog-post__meta">
<div class="blog-post__author">
{% if content.blog_author.avatar %}
<img class="blog-post__author-image" src="{{ content.blog_author.avatar }}" width="50" loading="eager" alt="Picture of {{ content.blog_author.display_name }}">
{% endif %}
<a class="blog-post__author-name" href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}" rel="author">
{{ content.blog_post_author.display_name }}
</a>
</div>
{% module "social_sharing"
path="../modules/social-sharing",
styles={
"spacing": {
"spacing": {
"margin": {
"bottom": {
"value": 22,
"units": "px"
}
}
}
}
}
%}
{% module "narration"
path="@hubspot/blog_audio",
overrideable=False
%}
</div>
<div class="blog-post__body">
{{ content.post_body }}
</div>
{% if content.tag_list %}
<div class="blog-post__tags">
<span class="icon--light">
{% icon
extra_classes="icon blog-post__tags-icon"
name="tag",
purpose="decorative",
style="SOLID"
%}
</span>
{% for tag in content.tag_list %}
<a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}" rel="tag">{{ tag.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</div>
{% endif %}
</article>
</div>

{# Blog comments #}

{% if group.allow_comments %}
<div class="blog-post-section">
<div class="blog-comments">
{% module "blog_comments_heading"
path="@hubspot/rich_text",
html="<h2>" ~ template_translations.blog_post_heading.message ~ "</h2>"
%}
{% module "blog_comments"
path="@hubspot/blog_comments"
%}
</div>
</div>
{% endif %}

{# Related posts #}

<div class="blog-post-section">
{% module "related_posts"
path="../modules/related-posts"
%}
</div>

</div>
{% endblock body %}

Re: Pulling featured image into blog post template

Anton — Tue, 25 Mar 2025 12:33:55 GMT

Hey @03517,

will display the image, but I'd recommend to use it as a background-image like

as this will allow you to place content above the image like the title, time... Simply place the desired content inside the div-tag and modify your CSS to your needs.

best,

Anton

Re: Pulling featured image into blog post template

03517 — Tue, 25 Mar 2025 13:01:08 GMT

Hi Anton,

Thanks for the reply and your help. I've tried both options but I'm getting the Error: Cannot resolve property for both of them, so it won't let me publish the template.

topic Re: Pulling featured image into blog post template in CMS Development

Pulling featured image into blog post template

Re: Pulling featured image into blog post template

Re: Pulling featured image into blog post template