Initial styling of bread index page. Workson #57

bakerydemo/templates/breads/breads_index_page.html

@@ -1,16 +1,39 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags %}
+{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% block content %}
-    <p>{{ page.introduction}}</p>
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            <h1>{{ page.title }}</h1>
+            <p>{{ page.introduction}}</p>
+        </div>
+    </div>
+</div>
 
-    {% for bread in resources %}
-        <div>
-            <div class="col-xs-12">
-                <div><a href="{{ bread.slug }}">{{ bread.title }}</a></div>
+<div class="container">
+    <div class="row">
+    {% for bread in breads %}
+            <div class="col-xs-12 col-md-6">
+            <a href="{% pageurl bread %}">
+                <div class="row">
+                    <div class="col-xs-4">
+                    {% image bread.image fill-180x180-c100 as image %}
+                                    <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" class="" />
+                    </div>
+                    <div class="col-xs-6">
+                        <h2>{{ bread.title }}</h2>
+                        <ul class="bread-meta list-inline">
+                            <li>{{ bread.origin }}</li>
+                            <li>{{ bread.bread_type }}</li>
+                        </ul>
+                    </div>
+                </div>
+            </a>
             </div>
-        </div>
     {% endfor %}
+    </div>
+</div>
 
 	{% if resources.has_other_pages %}
 	<div class="clearfix">