Home page blocks (#169)

* WIP: Implement override image block.

Implemented an override image block but it currently
only works for the single column. The single
column behaves completely differently from the
two columns and three columns. I will revist
this.

* WIP: No image center div

When there is no image, center the div
and span the entire row. Ideally give options.

* fix: Implement image override for multiple columns

Implemented the image override feature for all column
types. This was done by passing an image value to
the child elements.

* chore: Remove todo
Removed a todo message.

* fix: Add override headline to template

Fixed the issue of no override ability
for titles in headlines. The template
was missing the switches on the headlines.

Author: MacroLens

home/models.py

@@ -2,6 +2,7 @@
 from wagtail.core.fields import StreamField
 from wagtail.admin.edit_handlers import StreamFieldPanel
 from wagtail.core import blocks
+from wagtail.images.blocks import ImageChooserBlock
 
 from core.models import ArticlePage, ArticlesIndexPage, AdBlock, MarqueeBlock
 
@@ -11,8 +12,12 @@ class ArticleBlock(blocks.StructBlock):
     headline = blocks.RichTextBlock(
         help_text="Optional. Will override the article's headline.", required=False
     )
-    # TODO: add a photo override block
-    # TODO: add a "hide photo" block
+
+    # Image override block.
+    image = ImageChooserBlock(
+    help_text="Optional. Ovverides the image on the post.",
+    required=False
+    )
 
     class Meta:
         template = "home/article_block.html"

home/templates/home/article.html

@@ -2,8 +2,12 @@
 
 <div class="flex-md-row">
     <div class="d-flex flex-column align-items-start">
-        {% if article.featured_image %}
-            {% image article.featured_image width-1200 as photo %}
+        {% if block_image or article.featured_image %}
+            {% if block_image %}
+                {% image block_image width-1200 as photo %}
+            {% elif article.featured_image %}
+                {% image article.featured_image width-1200 as photo %}
+            {% endif %}
             <a href="{% pageurl article %}">
                 <img class="img-fluid mb-2 mb-md-3" src="{{ photo.url }}">
             </a>
@@ -12,7 +16,13 @@
             <strong class="d-inline-block mb-0 text-primary text-uppercase text-kicker">{{ article.kicker }}</strong>
         {% endif %}
         <h3 class="mb-2 headline">
-            <a class="text-dark" href="{% pageurl article %}">{{ article.headline|richtext_unwrapped }}</a>
+            <a class="text-dark" href="{% pageurl article %}">
+            	{% if block_headline %}
+			{{ block_headline }}
+            	{% else %}	
+            		{{ article.headline|richtext_unwrapped }}
+            	{% endif %}
+            </a>
         </h3>
         <div class="card-text mb-auto summary">{{ article.summary|richtext }}</div>
     </div>

home/templates/home/article_block.html

@@ -1,3 +1,3 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
-{% include "home/article.html" with article=value.article only %}
+{% include "home/article.html" with article=value.article block_image=value.image block_headline=value.headline only%}

home/templates/home/home_page.html

@@ -43,23 +43,37 @@
                 {% endif %}
             {% elif block.block_type == "one_column" %}
                 <div class="featured border-md-bottom pb-1 mb-5 mb-md-0 d-lg-flex">
-                    <div class="col-lg-7">
+                    {% if block.value.column.image or block.value.column.article.featured_image %}
+                    	<div class="col-lg-7">
+                    {% else %}
+			<div class="col-lg-12">
+                    {% endif %}
                         {% if block.value.column.article.specific.kicker %}
                             <strong class="text-primary text-uppercase text-kicker">{{ block.value.column.article.specific.kicker }}</strong>
                         {% endif %}
                         <h1 class="display-4 mb-3">
                             <a class="text-dark" href="{% pageurl block.value.column.article %}">
-                                {{ block.value.column.article.specific.headline|richtext_unwrapped }}
+                                {% if block.value.column.headline %}
+                                	{{ block.value.column.headline }}
+                                {% else %}
+                                	{{ block.value.column.article.specific.headline|richtext_unwrapped }}
+                                {% endif %}
                             </a>
                         </h1>
                         <div class="lead d-none d-lg-block">{{ block.value.column.article.specific.summary|richtext }}</div>
                     </div>
+                    {% if block.value.column.image or block.value.column.article.featured_image %}
                     <div class="col-lg-5">
-                        {% image block.value.column.article.featured_image width-1200 as photo %}
+                    	{% if block.value.column.image %}
+                    	    {% image block.value.column.image width-1200 as photo %}
+                    	{% else %}
+                           {% image block.value.column.article.featured_image width-1200 as photo %}
+                       {% endif %}
                         <a href="{% pageurl block.value.column.article %}">
                             <img class="img-fluid mb-3" src="{{ photo.url }}">
                         </a>
                     </div>
+                    {% endif %}
                     <div class="col-lg-7 d-lg-none">
                         <div class="lead">{{ block.value.column.article.specific.summary|richtext }}</div>
                     </div>