CMS Development

MariS
Member

Pulling featured image into blog post

SOLVE

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 

 

 

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

0 Upvotes
1 Accepted solution
dessery
Solution
Member | Platinum Partner
Member | Platinum Partner

Pulling featured image into blog post

SOLVE

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:

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

View solution in original post

0 Upvotes
6 Replies 6
dessery
Solution
Member | Platinum Partner
Member | Platinum Partner

Pulling featured image into blog post

SOLVE

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:

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

0 Upvotes
MariS
Member

Pulling featured image into blog post

SOLVE

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

Thanks David

0 Upvotes
dessery
Member | Platinum Partner
Member | Platinum Partner

Pulling featured image into blog post

SOLVE

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

 

http://designers.hubspot.com/docs/hubl/blog-content-markup

 

All the best
David

MariS
Member

Pulling featured image into blog post

SOLVE

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?

0 Upvotes
dessery
Member | Platinum Partner
Member | Platinum Partner

Pulling featured image into blog post

SOLVE

Hi MariS

 

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

 

{% 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:

 

<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

 

0 Upvotes
MariS
Member

Pulling featured image into blog post

SOLVE

Thank you David, that's magic

0 Upvotes