Pulling featured image into blog post template

[03517]

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 %}

[03517]

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.

[Anton · Accepted solution]

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