How to change images in blog listing

[anhorvat]

Hello everyone,

my blog listing page currently shows the featured images attached to my blog posts. (https://blog.servicetrace.de/)
I would like to change that so that another pictures is shown in the blog listing - which would be a custome module, the "banner image":

{% if module.banner_image.src or module.banner_title or module.banner_subtitle %}
<div id="hs-banner" {% if module.banner_image.src %}style="background-image: url('{{ module.banner_image.src }}');"{% endif %}>
  {% if module.banner_title or module.banner_subtitle %}
  <div class="banner-inner">
    <div class="page-center">
      <div class="banner-content">
        {% if module.banner_title %}
        <h1>
          {{ module.banner_title }}
        </h1>
        {% endif %}
        {% if module.banner_subtitle %}
        <p>
          {{ module.banner_subtitle }}
        </p>
        {% endif %}
      </div>
      {% cta guid="{{ module.banner_cta }}" %}
    </div>
  </div>
  {% endif %}
</div>
<script>
  $('body').addClass('with-banner');
</script>
{% endif %}

{% set backgroundColor = module.banner_text_background_color.color %}
{% set backgroundColorOpacity = module.banner_text_background_color.opacity / 100 %}

{% require_css %}
<style>
  .banner-content {
    background-color: rgba({{ backgroundColor|convert_rgb}}, {{ backgroundColorOpacity }});
  }
  .banner-content h1,
  .banner-content p {
    color: {{ module.banner_text_color.color }};
    opacity: {{ module.banner_text_color.opacity }};
  }
</style>
{% end_require_css %}

Which code should I insert in the blog listing template in order to have the banner image instead of the featured image in my blog listing?

Code of the Blog Listing:

<div class="blog-section">
  <div class="blog-listing-wrapper cell-wrapper">
    {# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
    <div class="post-listing{% if simple_list_page %}-simple{% endif %}">
      {% for content in contents %}
      <div class="post-item">
        {% if not simple_list_page %}
        <div class="post_content_holder {% if not content.post_list_summary_featured_image %}no-img{% endif %}">
          {% if content.post_list_summary_featured_image %}
          <div class="hs-featured-image-wrapper post_image">
            <a href="{{content.absolute_url}}" title="" >
              <img src="{{ resize_image_url( content.post_list_summary_featured_image,600 ) }}"  alt="{{ content.featured_image_alt_text | escape }}">
            </a>
          </div>
          {% endif %}
          <div class="post_text">
            <div class="post_text_inner">
              <h2 class="entry_title">
                <span class="date entry_date updated">{{ content.publish_date_local_time.strftime('%e %b') }}</span>
                <a href="{{content.absolute_url}}">{{ content.name }}</a>
              </h2>
              <div class="post_info">
                <span class="time">Posted at {{ content.publish_date_local_time.strftime('%I') }}:{{ content.publish_date_local_time.strftime('%M') }}h</span>
                {% if content.topic_list %}in 
                {% 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 %}
                {% endif %}
              </div>
              <p class="post_excerpt">{{ content.post_list_content|safe|truncatehtml(200, '...' , false)|striptags }}</p>
              {% if content_group.show_summary_in_listing %}
              <div class="post_more">
                <a href="{{content.absolute_url}}" class="qbutton small">Read More</a>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        {% else %}
        <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    {% if not simple_list_page %}
    <div class="blog-pagination">
      {% set page_list = [-2, -1, 0, 1, 2] %}
      {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
      {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
      {% elif current_page_num == 2 %}{% set offset = 1 %}
      {% elif current_page_num == 1 %}{% set offset = 2 %}
      {% else %}{% set offset = 0 %}{% endif %}

        {% if last_page_num %}<a class="prev-link" href="{{ blog_page_link(last_page_num) }}"><i class="fa fa-angle-left"></i></a> {% else %} <a class="prev-link inactive" href=""><i class="fa fa-angle-left"></i></a>{% endif %}
        {% if contents.total_page_count > 5 %}
        {% if current_page_num >= 4 %}
        <a href="{{ blog_page_link(1) }}">1</a>
        <a class="elipses" href="{% if current_page_num <= 5 %}{{ blog_page_link(1) }}{% else %}{{ blog_page_link(current_page_num - 5) }}{% endif %}">...</a>
        {% endif %}
        {% endif %}

        {% for page in page_list %}
        {% set this_page = current_page_num + page + offset %}
        {% if this_page > 0 and this_page <= contents.total_page_count %}
        <a {% if this_page == current_page_num %}class="active"{% endif %} href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
        {% endif %}
        {% endfor %}

        {% if contents.total_page_count > 5 %}
        {% if contents.total_page_count - current_page_num > 2 %}
        <a class="elipses" href="{% if contents.total_page_count - current_page_num <= 5 %}{{ contents.total_page_count }}{% else %}{{ blog_page_link(current_page_num + 5) }}{% endif %}">...</a>
        <a href="{{ blog_page_link(contents.total_page_count) }}">{{ contents.total_page_count }}</a>
        {% endif %}
        {% endif %}   
        {% if next_page_num %}<a class="next-link" href="{{ blog_page_link(current_page_num + 1) }}"><i class="fa fa-angle-right"></i></a>{% else %} <a class="next-link inactive " href=""><i class="fa fa-angle-right"></i></a>{% endif %}

    </div>

    {% endif %}
  </div>
</div>

Thanks in advance.

Anett

[IsaacTakushi]

Hi, @anhorvat.

Apologies for the delayed response.

You can retrieve the Banner_Servicetrace_November2019 module's banner_image.src value with this method. (The fact that the blog post and listing templates differ does not matter.)

For example:

{% for content in contents %}
  {% if not simple_list_page %}
    {% if content.widgets.module_157598967496270.body.banner_image.src %}
      <img src="{{content.widgets.module_157598967496270.body.banner_image.src}}">
    {% endif %}
  {% else %}
    <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
  {% endif %}
{% endfor %}

In the example above, module_157598967496270 is your module's ID, so you should be able to plug it in.