Enhance tag view with button links, page header

bakerydemo/blog/models.py

@@ -111,13 +111,10 @@ class BlogPage(Page):
 
     parent_page_types = ['BlogIndexPage']
 
-    # Defining what content type can sit under the parent
-    # The empty array means that no children can be placed under the
-    # LocationPage page model
+    # Define what content types can exist as children of BlogPage.
+    # Empty list means that no child content types are allowed.
     subpage_types = []
 
-    # api_fields = ['image', 'body']
-
 
 class BlogIndexPage(RoutablePageMixin, Page):
     """
@@ -125,8 +122,9 @@ class BlogIndexPage(RoutablePageMixin, Page):
     We need to alter the page model's context to return the child page objects - the
     BlogPage - so that it works as an index page
 
-    The RoutablePageMixin is used to allow for a custom sub-URL
+    RoutablePageMixin is used to allow for a custom sub-URL for tag views.
     """
+
     image = models.ForeignKey(
         'wagtailimages.Image',
         null=True,
@@ -145,12 +143,7 @@ class BlogIndexPage(RoutablePageMixin, Page):
         FieldPanel('introduction')
     ]
 
-    # parent_page_types = [
-    #     'home.HomePage'
-    # ]
-
-    # Defining what content type can sit under the parent. Since it's a blank
-    # array no subpage can be added
+    # What pages types can live under this page type?
     subpage_types = ['BlogPage']
 
     def get_context(self, request):
@@ -168,6 +161,7 @@ class BlogIndexPage(RoutablePageMixin, Page):
         return all related BlogPages for a given Tag or redirect back to
         the BlogIndexPage
         """
+
         try:
             tag = Tag.objects.get(slug=tag)
         except Tag.DoesNotExist:
@@ -179,9 +173,7 @@ class BlogIndexPage(RoutablePageMixin, Page):
         blogs = BlogPage.objects.filter(tags=tag).live().descendant_of(self)
 
         context = {
-            'title': 'Posts tagged with: {}'.format(tag.name),
+            'tag': tag,
             'blogs': blogs
         }
         return render(request, 'blog/blog_index_page.html', context)
-
-    # api_fields = ['introduction']

bakerydemo/static/css/main.css

@@ -75,6 +75,15 @@ a.btn:hover {
   color: white;
 }
 
+a.btn-sm {
+    padding: 6px 8px;
+    font-size: 10px;
+    line-height: normal;
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+    }
+
 input {
   border-radius: 3px;
   border: none;
@@ -495,4 +504,3 @@ li.has-submenu a.allow-toggle {
 .navbar-toggle .icon-bar {
   background-color: #fff;
 }
-

bakerydemo/templates/blog/blog_index_page.html

@@ -5,27 +5,26 @@
 <div class="container">
     <div class="row">
         <div class="col-md-7 col-md-offset-2">
-            {{ page.title }}
+            <h2>{{ page.title }}</h2>
         </div>
     </div>
 </div>
 {% endblock content-header %}
 
 {% block content-body %}
-<div class="container">
-    <div class="row">
-        <div class="col-md-7 col-md-offset-2">
-            {% for blog in blogs %}
-                <div>
-                    <h2><a href="{{ blog.url }}">{{ blog.title }}</a></h2>
-                    {{ blog.body|truncatewords_html:10 }}
-
-                    {% for tag in blog.get_tags  %}
-                        <a href="{{ tag.url }}">{{ tag }}</a>
-                    {% endfor %}
-                </div>
-            {% endfor %}
+    <div class="container">
+        <div class="row">
+            <div class="col-md-7 col-md-offset-2">
+                {% if tag %}
+                    <h3>Posts tagged with "{{ tag }}":</h3>
+                {% endif %}
+                {% for blog in blogs %}
+                    <div>
+                        <h2><a href="{{ blog.url }}">{{ blog.title }}</a></h2>
+                        {{ blog.body|truncatewords_html:10 }}
+                    </div>
+                {% endfor %}
+            </div>
         </div>
     </div>
-</div>
 {% endblock content-body %}

bakerydemo/templates/blog/blog_page.html

@@ -26,9 +26,12 @@
 
             {{ page.body }}
 
-            {% for tag in page.get_tags  %}
-                <a href="{{ tag.url }}">{{ tag }}</a>
-            {% endfor %}
+            {% if page.get_tags %}
+                Tagged with:<br />
+                {% for tag in page.get_tags  %}
+                    <a href="{{ tag.url }}" class="btn btn-sm">{{ tag }}</a>
+                {% endfor %}
+            {% endif %}
         </div>
     </div>
 </div>