Load background image or thumbnail for each of the post in the list

templates/blog-post.html

@@ -2,7 +2,8 @@
 {% from "macros/blog.html" import render_blog_post %}
 {% block title %}{{ this.title }}{% endblock %}
 {% block body %}
-<header class="intro-header" style="{% if this.background_image_url %}background-image: url('{{ this.background_image_url}}');{% else %} background-color: #333; {% endif %}">
+{% set background_image = this.attachments.images.first() %}
+<header class="intro-header" style="{% if background_image %}background-image: url('{{ background_image|url }}');{% else %} background-color: #333; {% endif %}">
   <div class="container">
     <div class="row">
       <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

templates/macros/blog.html

@@ -3,7 +3,8 @@
   <div class="post-preview">
     <div class="row">
       <div class="col-md-4">
-          {% if from_index %}<h2><a href="{{ post|url }}"><img style="margin-top:11%" src="{{post.thumbnail}}"/></a></h2>{% else %}<h2><img style="margin-top:11%" src="{{post.thumbnail}}"/></h2>{% endif %}
+          {% set image = post.attachments.images.first() %}
+          {% if from_index %}<h2><a href="{{ post|url }}"><img src="{% if image %}{{ image.thumbnail(240)|url }}{% else %}/u/static/images/blog-post-placeholder.png{% endif %}" alt=""/></a></h2>{% else %}<h2><img src="{% if image %}{{ image.thumbnail(240)|url }}{% else %}/u/static/images/blog-post-placeholder.png{% endif %}" alt=""/></h2>{% endif %}
       </div>    
       <div class="col-md-8">
         {% if from_index %}<a href="{{ post|url }}"><h2 class="post-title">{{ post.title }}</h2></a>
@@ -25,5 +26,4 @@
   {% else %}
     {{ post.body }}
   {% endif %}
-
 {% endmacro %}