Hero video and image

network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html

@@ -32,26 +32,27 @@
 
 {% block content %}
   {% block secondary_nav %}{% endblock %}
-  <div class="container">
-    <div class="row">
+
       {% if page.signup != None %}
 
-        {# Use a two-colum layout #}
-        <div class="cms pb-5 col-lg-7">
-          {% include "partials/streamfield.html" with twocolumn=True %}
+        {# Use a two-column layout #}
+        <div class="container">
+          <div class="row">
+            <div class="cms mozfest-content two-col">
+              {% include "partials/streamfield.html" with twocolumn=True %}
+            </div>
+            {% block cta %}{% include "partials/signup.html" %}{% endblock %}
+          </div>
         </div>
-        {% block cta %}{% include "partials/signup.html" %}{% endblock %}
-
       {% else %}
 
         {# Single column layout #}
-        <div class="cms {% block bootstrap_width %}col-lg-8 offset-lg-2{% endblock %}">
+        <div class="cms mozfest-content">
           {% include "partials/streamfield.html" %}
         </div>
 
       {% endif %}
-    </div>
-  </div>
+
 {% endblock %}
 
 

network-api/networkapi/mozfest/templates/partials/streamfield.html

@@ -1,9 +1,19 @@
 {% load wagtailcore_tags %}
 
 {% for block in page.body %}
-  {% if block.block_type == 'heading' %}
-    <h1>{{ block.value }}</h1>
-  {% else %}
-    {% include_block block %}
-  {% endif %}
+{% if block.block_type == 'paragraph'%}
+<div class="container {{block.block_type}}-block">
+  <div class="row justify-content-center">
+    <div class="streamfield-content">
+      {% if block.block_type == 'heading' %}
+      <h1>{{ block.value }}</h1>
+      {% else %}
+      {% include_block block with parent_page=page page_type="blog"%}
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% else %}
+{% include_block block with parent_page=page page_type="blog" %}
+{% endif %}
 {% endfor %}

network-api/networkapi/wagtailpages/migrations/0010_blogpage_hero_image.py

@@ -0,0 +1,20 @@
+# Generated by Django 3.0.14 on 2021-06-18 20:58
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0023_add_choose_permissions'),
+        ('wagtailpages', '0009_auto_20210603_1034'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='blogpage',
+            name='hero_image',
+            field=models.ForeignKey(blank=True, help_text='Image for the blog page hero section.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='hero_banner_image', to='wagtailimages.Image', verbose_name='Hero Image'),
+        ),
+    ]

network-api/networkapi/wagtailpages/pagemodels/blog/blog.py

@@ -13,6 +13,7 @@
 from wagtail.core.models import Orderable, Page
 from wagtail.core.fields import StreamField
 from wagtail.snippets.edit_handlers import SnippetChooserPanel
+from wagtail.images.edit_handlers import ImageChooserPanel
 
 from taggit.models import TaggedItemBase
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
@@ -88,6 +89,22 @@ class BlogPage(FoundationMetadataPageMixin, Page):
 
     zen_nav = True
 
+    hero_image = models.ForeignKey(
+        'wagtailimages.Image',
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name='hero_banner_image',
+        verbose_name='Hero Image',
+        help_text='Image for the blog page hero section.',
+    )
+    hero_video = models.CharField(
+        blank=True,
+        max_length=500,
+        help_text='URL to video for blog page hero section. (Will take priority over hero image if both entered)',
+
+    )
+
     feature_comments = models.BooleanField(
         default=False,
         help_text='Check this box to add a comment section for this blog post.',
@@ -101,6 +118,8 @@ class BlogPage(FoundationMetadataPageMixin, Page):
             heading="Author(s)"
         ),
         FieldPanel('category'),
+        FieldPanel('hero_video'),
+        ImageChooserPanel('hero_image'),
         StreamFieldPanel('body'),
         FieldPanel('feature_comments'),
     ]

network-api/networkapi/wagtailpages/templates/wagtailpages/article_page.html

@@ -15,7 +15,7 @@
 
   <div class="container {% if not get_titles %} mt-5{% endif %}">
     <div class="row">
-      <div class="offset-sm-1 col-sm-10 col-12 article-blocks">
+      <div class="offset-sm-1 col-sm-10 col-12">
         {% if page.show_side_share_buttons %}
           <div class="article-summary-share-links d-lg-block d-none {% if get_titles %}with-top-offset{% endif %}">
             <div class="share-button-group-wrapper" data-version="mini" data-layout="stacked" data-share-text="{% blocktrans with title=page.title %}{{ title }} by @mozilla{% endblocktrans %}" data-link="{{ request.scheme }}://{{ request.get_host }}{{ request.get_full_path }}"></div>
@@ -33,19 +33,30 @@
             </div>
           </div>
         {% endif %}
-
-
-        {% for block in page.body %}
-          {% comment %}
-            `is_last` is used to determine if a streamfield should close
-            after breaking out of its parent container
-          {% endcomment %}
-          {% include_block block with is_last=forloop.last page_type="article" %}
-        {% endfor %}
       </div>
     </div>
   </div>
 
+  <div class="cms article-page-content">
+    {% for block in page.body %}
+      {% if block.block_type == 'content'%}
+        <div class="container {{block.block_type}}-block">
+          <div class="row justify-content-center">
+            <div class="streamfield-content">
+              {% if block.block_type == 'heading' %}
+                <h1>{{ block.value }}</h1>
+              {% else %}
+                {% include_block block with page_type="article" %}
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      {% else %}
+        {% include_block block with parent_page=page page_type="article" %}
+      {% endif %}
+    {% endfor %}
+  </div>
+
   {% if page.footnotes_list %}
     {% include "fragments/footnotes.html" %}
   {% endif %}

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/advanced_table_block.html

@@ -1,52 +1,59 @@
 {% load wagtailcore_tags %}
 
-<div class="article-table-block table-responsive">
-  <table class="table">
-    {% if self.caption %}
-      <caption>{{ self.caption }}</caption>
-    {% endif %}
 
-    {# Loop through every row #}
-    {% for row in self.table %}
-      {# If the "header" is checked, the first row will be a <thead> with a highlighted background #}
-      {% if self.header and forloop.first %}
-        <thead>
-          <tr>
-            {% for cell in row.value %}
-              <th
-                scope="col"
-                {% if cell.value.column_width %}colspan="{{ cell.value.column_width }}"{% endif %}
-                class="highlighted {% if cell.value.centered_text %}text-center{% endif %}"
-              >
-                {{ cell.value.content|richtext }}
-              </th>
-            {% endfor %}
-          </tr>
-        </thead>
-      {% else %}
-        {# For every other row that's not a header... #}
-        <tr>
-          {% for cell in row.value %}
-            {# If the first cell is supposed to be highlighted; when "column" is checked #}
-            {% if self.column %}
-              <td
-                {% if cell.value.column_width %}colspan="{{ cell.value.column_width }}"{% endif %}
-                class="{% if forloop.first and self.column and not cell.value.column_width %}highlighted{% endif %} {% if cell.value.centered_text %}text-center{% endif %} column-width-20"
-              >
-                {{ cell.value.content|richtext }}
-              </td>
+<div class="container {{block.block_type}}-block">
+  <div class="row justify-content-center">
+    <div class="streamfield-content">
+      <div class="article-table-block table-responsive">
+        <table class="table">
+          {% if self.caption %}
+            <caption>{{ self.caption }}</caption>
+          {% endif %}
+
+          {# Loop through every row #}
+          {% for row in self.table %}
+            {# If the "header" is checked, the first row will be a <thead> with a highlighted background #}
+            {% if self.header and forloop.first %}
+              <thead>
+                <tr>
+                  {% for cell in row.value %}
+                    <th
+                      scope="col"
+                      {% if cell.value.column_width %}colspan="{{ cell.value.column_width }}"{% endif %}
+                      class="highlighted {% if cell.value.centered_text %}text-center{% endif %}"
+                    >
+                      {{ cell.value.content|richtext }}
+                    </th>
+                  {% endfor %}
+                </tr>
+              </thead>
             {% else %}
-              {# For every other cell; when "column" is not checked #}
-              <td
-                {% if cell.value.column_width %}colspan="{{ cell.value.column_width }}"{% endif %}
-                class="{% if forloop.first and self.column %}highlighted{% endif %} {% if cell.value.centered_text %}text-center{% endif %}"
-              >
-                {{ cell.value.content|richtext }}
-              </td>
+              {# For every other row that's not a header... #}
+              <tr>
+                {% for cell in row.value %}
+                  {# If the first cell is supposed to be highlighted; when "column" is checked #}
+                  {% if self.column %}
+                    <td
+                      {% if cell.value.column_width %}colspan="{{ cell.value.column_width }}"{% endif %}
+                      class="{% if forloop.first and self.column and not cell.value.column_width %}highlighted{% endif %} {% if cell.value.centered_text %}text-center{% endif %} column-width-20"
+                    >
+                      {{ cell.value.content|richtext }}
+                    </td>
+                  {% else %}
+                    {# For every other cell; when "column" is not checked #}
+                    <td
+                      {% if cell.value.column_width %}colspan="{{ cell.value.column_width }}"{% endif %}
+                      class="{% if forloop.first and self.column %}highlighted{% endif %} {% if cell.value.centered_text %}text-center{% endif %}"
+                    >
+                      {{ cell.value.content|richtext }}
+                    </td>
+                  {% endif %}
+                {% endfor %}
+              </tr>
             {% endif %}
           {% endfor %}
-        </tr>
-      {% endif %}
-    {% endfor %}
-  </table>
+        </table>
+      </div>
+    </div>
+  </div>
 </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/airtable_block.html

@@ -1 +1,10 @@
-<script async defer src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe class="airtable-embed mb-4 airtable-dynamic-height" src="{{ value.url }}" frameborder="0" onmousewheel="" width="100%" height="{{ value.height }}" style="background: transparent; border: 1px solid #ccc;"></iframe>
+<div class="container {{block.block_type}}-block">
+    <div class="row justify-content-center no-gutters">
+        <div class="streamfield-content">
+            <script async defer src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe
+                class="airtable-embed mb-4 airtable-dynamic-height" src="{{ value.url }}" frameborder="0"
+                onmousewheel="" width="100%" height="{{ value.height }}"
+                style="background: transparent; border: 1px solid #ccc;"></iframe>
+        </div>
+    </div>
+</div>

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/annotated_image_block.html

@@ -2,29 +2,23 @@
 
 {% image value.image original as img %}
 
-{% if value.wide_image %}
-    </div> <!-- End .blog-body -->
-  </div> <!-- End .cms -->
-</div> <!-- End .col-lg-8 -->
+<div class="container {{block.block_type}}-block">
+  <div class="row justify-content-center no-gutters">
+    <div class="{% if value.wide_image %} wide {% else %} streamfield-content {% endif %} ">
+      <figure>
+        <img src="{{ img.url }}" alt="{{ value.altText }}" class="w-100" />
+        {% if value.caption %}
+        <figcaption class="body-small d-block mt-2">
+          {% if value.captionURL %}<a href="{{ value.captionURL }}">{% endif %}
+          {{ value.caption }}
+          {% if value.captionURL %}</a>{% endif %}
+        </figcaption>
+        {% endif %}
+      </figure>
+      </div>
+  </div>
+</div> 
 
-<div class="col-lg-12">
-{% endif %}
 
-  <figure class="my-default">
-    <img src="{{ img.url }}" alt="{{ value.altText }}" class="w-100" />
-    {% if value.caption %}
-    <figcaption class="body-small d-block mt-2">
-      {% if value.captionURL %}<a href="{{ value.captionURL }}">{% endif %}
-      {{ value.caption }}
-      {% if value.captionURL %}</a>{% endif %}
-    </figcaption>
-    {% endif %}
-  </figure>
 
-{% if value.wide_image %}
-</div>
 
-<div class="py-4 py-md-5 col-lg-8 offset-lg-2">
-  <div class="cms">
-    <div class="blog-body">
-{% endif %}

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_blockquote_block.html

@@ -1,3 +1,10 @@
-<div class="article-blockquote-block mx-auto my-4 {% if self|length > 230 %}article-blockquote-block--small{% endif %}">
-  {{ self }}
+
+<div class="container {{block.block_type}}-block">
+  <div class="row justify-content-center">
+    <div class="streamfield-content">
+      <div class="article-blockquote-block mx-auto my-4 {% if self|length > 230 %}article-blockquote-block--small{% endif %}">
+        {{ self }}
+      </div>
+    </div>
+  </div>
 </div>