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

Pulling featured image into blog post

MariS — Wed, 23 Aug 2017 13:05:08 GMT

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>

{##}
</div>
</div>

Re: Pulling featured image into blog post

dessery — Wed, 23 Aug 2017 13:15:15 GMT

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

Re: Pulling featured image into blog post

MariS — Wed, 23 Aug 2017 13:27:15 GMT

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?

Re: Pulling featured image into blog post

MariS — Wed, 23 Aug 2017 13:34:23 GMT

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

Thanks David

Re: Pulling featured image into blog post

dessery — Wed, 23 Aug 2017 13:40:06 GMT

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

Re: Pulling featured image into blog post

dessery — Wed, 23 Aug 2017 13:44:52 GMT

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

Re: Pulling featured image into blog post

MariS — Wed, 23 Aug 2017 13:47:49 GMT

Thank you David, that's magic