How to make blog banner image dynamic (using {{ content.featured_image }})

[wrayclark91]

I know just enough about HTML/HUBL to get me in trouble so pardon my ignorance. 

I am trying to make the banner image on our blog listing page dynamically change to the actual image of the latest blog post or even better the currently shown blog title in the slider.

Here is the page I am working with: https://www.sattlercollege.org/blogs

As you can see in the code below the banner image is just a static URL to an image (Highlighted below).

{% if is_listing_view %}
<div class="banner-area-group blog-banner" style="background-image:url(//cdn2.hubspot.net/hubfs/4312332/Sattler_College_May2018%20Files/Images/IMG_0445.jpg)">  <div class="color-overlay"></div>
  <div class="slider-outer">
    <div class="slider">
      {% for content in contents %}
      <div class="slider-cotnent">
        {% if not simple_list_page %}
        <div class="post-header">
          <div class="date">
            <a href="{{content.absolute_url}}">{{ content.publish_date_local_time.strftime('%B %e, %Y') }}</a>
          </div>
          <h2>
            <a href="{{content.absolute_url}}">{{ content.name }}</a>
          </h2>
        </div>
        {% if content_group.show_summary_in_listing %}
        <a class="more-link" href="{{ content.absolute_url }}">View Post</a>
        {% endif %}
        {% endif %}   
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{%else%}
  {% if content.post_list_summary_featured_image %}
    <div class="banner-area-group blog-banner" style="background-image:url({{content.post_list_summary_featured_image}})">
      <div class="color-overlay"></div>
      <div class="page-center">
        <div class="section post-header">
          <div class="date">{{ content.publish_date_local_time.strftime('%B %e, %Y') }}</div>
          <h2>{{ content.name }}</h2>
        </div>
      </div>
    </div>
	{% else %}
	 <div class="banner-area-group no-image blog-banner">
      <div class="color-overlay"></div>
      <div class="page-center">
        <div class="section post-header">
          <div class="date">{{ content.publish_date_local_time.strftime('%B %e, %Y') }}</div>
          <h2>{{ content.name }}</h2>
        </div>
      </div>
    </div> 
	{% endif%}
  
{%endif%}

I have tried replacing the url with the variable {{ content.featured_image }} as shown below, but I think that doesn't work because it comes before the content loop of the slider?

{% if is_listing_view %}
<div class="banner-area-group blog-banner" style="background-image:url({{content.featured_image}})">  <div class="color-overlay"></div>
  <div class="slider-outer">
    <div class="slider">
      {% for content in contents %}
      <div class="slider-cotnent">
        {% if not simple_list_page %}
        <div class="post-header">
          <div class="date">
            <a href="{{content.absolute_url}}">{{ content.publish_date_local_time.strftime('%B %e, %Y') }}</a>
          </div>
          <h2>
            <a href="{{content.absolute_url}}">{{ content.name }}</a>
          </h2>
        </div>
        {% if content_group.show_summary_in_listing %}
        <a class="more-link" href="{{ content.absolute_url }}">View Post</a>
        {% endif %}
        {% endif %}   
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{%else%}
  {% if content.post_list_summary_featured_image %}
    <div class="banner-area-group blog-banner" style="background-image:url({{content.post_list_summary_featured_image}})">
      <div class="color-overlay"></div>
      <div class="page-center">
        <div class="section post-header">
          <div class="date">{{ content.publish_date_local_time.strftime('%B %e, %Y') }}</div>
          <h2>{{ content.name }}</h2>
        </div>
      </div>
    </div>
	{% else %}
	 <div class="banner-area-group no-image blog-banner">
      <div class="color-overlay"></div>
      <div class="page-center">
        <div class="section post-header">
          <div class="date">{{ content.publish_date_local_time.strftime('%B %e, %Y') }}</div>
          <h2>{{ content.name }}</h2>
        </div>
      </div>
    </div> 
	{% endif%}
  
{%endif%}

I have messed around with various tips that I found on this forum and the documentation, but have not made any progress.

I am sure that I am just missing something obvious. Can someone point me in a good direction?

Thanks in advance,

Clark

[dennisedson · Accepted solution]

@wrayclark91,you need to wrap the banner in a for loop

something like this:

{% set rec_posts = blog_recent_posts('default', 1) %}
{% for rec_post in rec_posts %}
  
	<div class="banner-area-group blog-banner" style="background-image:url( {{rec_post.post_list_summary_featured_image}} )">  <div class="color-overlay"></div>
{% endfor %} 

[wrayclark91]

That worked.

Thanks!

[Adesignl]

Your problem is that content.featured image is not inside of the

{% for content in contents %} 

loop.