aplikace card na výpis blogů

zapisnik/templates/zapisnik/blog_index_page.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% load wagtailcore_tags wagtailimages_tags %}
+{% load wagtailcore_tags wagtailimages_tags static %}
 
 {% block body_class %}template-blogindexpage{% endblock %}
 
@@ -11,14 +11,26 @@
 
     {% for post in page.get_children %}
         {% with post=post.specific %}
-            <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
-
-            {% with post.main_image as main_image %}
-                {% if main_image %}{% image main_image fill-160x100 %}{% endif %}
-            {% endwith %}
-
-            <p>{{ post.intro }}</p>
-            {# {{ post.body|richtext }} #}
+            <div class="card mb-3">
+                <div class="row no-gutters">
+                    <div class="col-md-4">
+                        {% with post.main_image as main_image %}
+                            {% if main_image %}
+                                {% image main_image class="card-img" fill-400x150 %}
+                            {% else %}
+                                <img src="{% static "img/blank-image.jpg" %}" class="card-img" style="height: 150px;" alt="blank image">
+                            {% endif %}
+                        {% endwith %}
+                    </div>
+                    <div class="col-md-8">
+                        <div class="card-body">
+                            <h5 class="card-title"><a href="{% pageurl post %}">{{ post.title }}</a></h5>
+                            <p class="card-text">{{ post.intro }}</p>
+                            <p class="card-text"><small class="text-muted">{{ post.date }}</small></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
         {% endwith %}
     {% endfor %}