# Pulling featured image into blog post template

**URL:** <https://community.hubspot.com/t/pulling-featured-image-into-blog-post-template/128591>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [March 25, 2025, 11:12am UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post-template/128591 "2025-03-25T11:12:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![03517](https://avatars.discourse-cdn.com/v4/letter/0/a4c791/32.png) [@03517](https://community.hubspot.com/u/03517)\
**Post date:** [March 25, 2025, 11:12am UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post-template/128591/1 "2025-03-25T11:12:34Z")

</div>

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:

\<!--  
templateType: blog\_post  
isAvailableForNewContent: true  
label: Growth - blog post  
screenshotPath: ../images/template-previews/blog-post.png  
--\>  
{% set template\_css = “../../css/templates/blog-post.css” %}  
{% extends “./layouts/base.html” %}

{% block body %}

{# Blog post wrapper #}

\<div class=“content-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 %}

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [March 25, 2025, 12:33pm UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post-template/128591/2 "2025-03-25T12:33:55Z")

</div>

Hey @03517,

`<img src="{{content.featured_image}}" alt="{{content.featured_image_alt_text}}" class="featured-image">`

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

`<div class="hero-bg-image" style="background-image:url({{content.featured_image}}); background-size:cover;background-position:center center; width:100%; min-height:200px;height:100%;"></div>`

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

---

<div class="post-metadata">

**Author:** ![03517](https://avatars.discourse-cdn.com/v4/letter/0/a4c791/32.png) [@03517](https://community.hubspot.com/u/03517)\
**Post date:** [March 25, 2025, 1:01pm UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post-template/128591/3 "2025-03-25T13:01:08Z")

</div>

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.