# Pulling featured image into blog post

**URL:** <https://community.hubspot.com/t/pulling-featured-image-into-blog-post/3121>\
**Category:** CMS Development\
**Tags:** html\
**Created:** [August 23, 2017, 1:04pm UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post/3121 "2017-08-23T13:04:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![MariS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/maris/32/43030_2.png) [@MariS](https://community.hubspot.com/u/MariS)\
**Post date:** [August 23, 2017, 1:04pm UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post/3121/1 "2017-08-23T13:04:38Z")

</div>

Hi team

I am having difficulty editing my template for a single blog post to include the featured image.

Here is the page example, and further down is the code for the template. Please can someone help me to add a line that the featured image pulls below the read more tag (if I have one): [http://ace.altdigital.co.za/blog/women-digital-lana-strydom](http://ace.altdigital.co.za/blog/women-digital-lana-strydom)

\<div class=“blog-section”\>  
\<div class=“blog-post-wrapper cell-wrapper”\>  
\<div class=“blog-section”\>  
\<div class=“blog-post-wrapper cell-wrapper”\>  
\<div class=“section post-header”\>  
\<h1\>{{ content.name }}\</h1\>  
\<div id=“hubspot-author\_data” class=“hubspot-editable” data-hubspot-form-id=“author\_data” data-hubspot-name=“Blog Author” \>  
\<div class=“post-meta”\>\<span class=“hs-author-label”\>Posted by\</span\>  
{% if content.blog\_post\_author %}  
\<a class=“author-link” href=“{{ group.absolute\_url }}/author/{{ content.blog\_post\_author.slug }}”\>{{ content.blog\_post\_author.display\_name }}\</a\> on {{ content.publish\_date\_localized }}\</div\>  
{% if content.blog\_post\_author.avatar %} \<div class=“hs-author-avatar”\> \<img src=“{{ content.blog\_post\_author.avatar }}” alt=“{{ content.blog\_post\_author.display\_name }}”\> \</div\> {% endif %}  
{% endif %}  
\</div\>  
\</div\>  
\<div class=“section post-body”\>  
{{ content.post\_body }}  
{% blog\_social\_sharing “blog\_social\_sharing” overrideable=False, label=‘Blog Social Sharing’ %}  
\</div\>  
\<div class=“about-author-sec row-fluid”\>  
\<div class=“span2”\>  
\<img alt=“{{ content.blog\_post\_author.display\_name }}” src=“{{ content.blog\_post\_author.avatar }}”\>  
\</div\>  
\<div class=“span10”\>  
\<h3\>Written by \<a class=“author-link” href=“{{ group.absolute\_url }}/author/{{ content.blog\_post\_author.slug }}”\>{{ content.blog\_post\_author.display\_name }}\</a\>\</h3\>  
\<p\>{{ content.blog\_post\_author.bio }}\</p\>  
{% if content.blog\_post\_author.has\_social\_profiles %}  
\<div class=“hs-author-social-section”\>  
\<div class=“hs-author-social-links”\>  
{% if content.blog\_post\_author.facebook %}  
\<a href=“{{ content.blog\_post\_author.facebook }}” target=“\_blank” class=“hs-author-social-link hs-social-facebook”\>Facebook\</a\>  
{% endif %}  
{% if content.blog\_post\_author.linkedin %}  
\<a href=“{{ content.blog\_post\_author.linkedin }}” target=“\_blank” class=“hs-author-social-link hs-social-linkedin”\>LinkedIn\</a\>  
{% endif %}  
{% if content.blog\_post\_author.twitter %}  
\<a href=“{{ content.blog\_post\_author.twitter }}” target=“\_blank” class=“hs-author-social-link hs-social-twitter”\>Twitter\</a\>  
{% endif %}  
{% if content.blog\_post\_author.google\_plus %}  
\<a href=“{{ content.blog\_post\_author.google\_plus }}?rel=author” target=“\_blank” class=“hs-author-social-link hs-social-google-plus”\>Google+\</a\>  
{% endif %}  
\</div\>  
\</div\>  
{% endif %}  
\</div\>  
\</div\>  
{% if content.topic\_list %}  
\<p id=“hubspot-topic\_data” \> Topics:  
{% for topic in content.topic\_list %}  
\<a class=“topic-link” href=“{{ blog\_tag\_url(group.id, topic.slug) }}”\>{{ topic.name }}\</a\>{% if not loop.last %},{% endif %}  
{% endfor %}  
\</p\>  
{% endif %}  
\</div\>  
\</div\>  
\<!-- Optional: Blog Author Bio Box --\>  
{##}  
\</div\>  
\</div\>

---

<div class="post-metadata">

**Author:** ![dessery](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dessery/32/92851_2.png) [@dessery](https://community.hubspot.com/u/dessery)\
**Post date:** [August 23, 2017, 1:15pm UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post/3121/2 "2017-08-23T13:15:15Z")

</div>

Hi MariS

If I am honest, I am not completely sure where it is in your template that you want the image to appear. In order to add the image itself though, the following code should work for you:

```auto
{% if content.featured_image %}
 <img src="{{content.featured_image}}" alt="{{ content.name }}" />
{% endif %}

```

You can adjust it there for your needs. Since you are unable to specify an alt tag in the editor for the featured image, i just include the name of the Blog post as the alt tag.

I hope that helps but if you have more questions, feel free to post them.

All the best

David

---

<div class="post-metadata">

**Author:** ![MariS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/maris/32/43030_2.png) [@MariS](https://community.hubspot.com/u/MariS)\
**Post date:** [August 23, 2017, 1:27pm UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post/3121/3 "2017-08-23T13:27:15Z")

</div>

Thanks David. What I’d like to do is add a read more tag" to the bog content and then add the featured image below that. If this is the case, where do I:

a) add the read more tag

b) add the image code you’ve supplied?

---

<div class="post-metadata">

**Author:** ![dessery](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dessery/32/92851_2.png) [@dessery](https://community.hubspot.com/u/dessery)\
**Post date:** [August 23, 2017, 1:39pm UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post/3121/4 "2017-08-23T13:39:30Z")

</div>

Hi MariS

To add a read more link, something like the following should work:

```auto
{% if content_group.show_summary_in_listing %}
 <a class="more-link" href="{{ content.absolute_url }}">Read More</a>
{% endif %}

```

I am assuming you want the read more link below the post body? If so, try something like this:

```auto
<div class="blog-section">
 <div class="blog-post-wrapper cell-wrapper">
 <div class="blog-section">
 <div class="blog-post-wrapper cell-wrapper">
 <div class="section post-header">
 <h1>{{ content.name }}</h1>
 <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author" >
 <div class="post-meta"><span class="hs-author-label">Posted by</span>
 {% if content.blog_post_author %}
 <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a> on {{ content.publish_date_localized }}</div>
 {% if content.blog_post_author.avatar %} <div class="hs-author-avatar"> <img src="{{ content.blog_post_author.avatar }}" alt="{{ content.blog_post_author.display_name }}"> </div> {% endif %}
 {% endif %}
 </div>
 </div>
 <div class="section post-body">
 {{ content.post_body }} {% if content_group.show_summary_in_listing %}
 <a class="more-link" href="{{ content.absolute_url }}">Read More</a>
 {% endif %} {% if content.featured_image %}
 <img src="{{content.featured_image}}" alt="{{ content.name }}" />
 {% endif %} {% blog_social_sharing "blog_social_sharing" overrideable=False, label='Blog Social Sharing' %} </div> <div class="about-author-sec row-fluid"> <div class="span2"> <img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}"> </div> <div class="span10"> <h3>Written by <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a></h3> <p>{{ content.blog_post_author.bio }}</p> {% if content.blog_post_author.has_social_profiles %} <div class="hs-author-social-section"> <div class="hs-author-social-links"> {% if content.blog_post_author.facebook %} <a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a> {% endif %} {% if content.blog_post_author.linkedin %} <a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a> {% endif %} {% if content.blog_post_author.twitter %} <a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a> {% endif %} {% if content.blog_post_author.google_plus %} <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a> {% endif %} </div> </div> {% endif %} </div> </div> {% if content.topic_list %} <p id="hubspot-topic_data" > Topics: {% for topic in content.topic_list %} <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %} {% endfor %} </p> {% endif %} </div> </div> <!-- Optional: Blog Author Bio Box --> {##} </div></div>

```

Hopefully that helps, but if its not quite right, hopefully you will be able to move the bits around to get them where you want them.

All the best

David

---

<div class="post-metadata">

**Author:** ![MariS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/maris/32/43030_2.png) [@MariS](https://community.hubspot.com/u/MariS)\
**Post date:** [August 23, 2017, 1:47pm UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post/3121/5 "2017-08-23T13:47:49Z")

</div>

Thank you David, that’s magic

---

<div class="post-metadata">

**Author:** ![MariS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/maris/32/43030_2.png) [@MariS](https://community.hubspot.com/u/MariS)\
**Post date:** [August 23, 2017, 1:34pm UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post/3121/6 "2017-08-23T13:34:23Z")

</div>

Oh wait, nevermind. I added it and it worked. You are a legend!

Thanks David

---

<div class="post-metadata">

**Author:** ![dessery](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dessery/32/92851_2.png) [@dessery](https://community.hubspot.com/u/dessery)\
**Post date:** [August 23, 2017, 1:44pm UTC](https://community.hubspot.com/t/pulling-featured-image-into-blog-post/3121/7 "2017-08-23T13:44:52Z")

</div>

Aah just saw this after I replied, glad it worked for you!! For future reference, there is some decent blog hubl documentaiton here:

> **[Blog templates - HubSpot docs](https://developers.hubspot.com/docs/cms/start-building/building-blocks/templates/blog)**
>
> Blog listing and blog post templates can be used to customize the appearance of a site's blog.

All the best  
David