#7531 - BE Mozfest Hero Updates

network-api/networkapi/mozfest/factory.py

@@ -53,6 +53,9 @@ class Meta:
     banner_video_url = Faker('url')
     banner_heading_text = Faker('sentence', nb_words=6, variable_nb_words=True)
 
+    banner_carousel = Faker('streamfield', fields=['banner_carousel'])
+    banner_video = Faker('streamfield', fields=['banner_video'])
+
     signup = SubFactory(SignupFactory)
 
 

network-api/networkapi/mozfest/migrations/0021_mozfesthomepage_banner_carousel_banner_video.py

@@ -0,0 +1,27 @@
+# Generated by Django 3.1.11 on 2021-10-06 09:39
+
+from django.db import migrations
+import networkapi.wagtailpages.pagemodels.customblocks.video_block
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mozfest', '0020_auto_20210910_2042'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='mozfesthomepage',
+            name='banner_carousel',
+            field=wagtail.core.fields.StreamField([('slide', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('heading', wagtail.core.blocks.CharBlock(required=False)), ('description', wagtail.core.blocks.CharBlock(required=False))]))], null=True),
+        ),
+        migrations.AddField(
+            model_name='mozfesthomepage',
+            name='banner_video',
+            field=wagtail.core.fields.StreamField([('CMS_video', networkapi.wagtailpages.pagemodels.customblocks.video_block.WagtailVideoChooserBlock()), ('video_url', networkapi.wagtailpages.pagemodels.customblocks.video_block.EmbeddedVideoBlock(help_text='For YouTube: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw<br/>For Vimeo: follow similar steps to grab the embed URL. For example: https://player.vimeo.com/video/9004979'))], blank=True, help_text='The video to play when users click "watch video"', null=True),
+        ),
+    ]

network-api/networkapi/mozfest/models.py

@@ -6,7 +6,7 @@
 from wagtail.snippets.edit_handlers import SnippetChooserPanel
 from wagtail_localize.fields import SynchronizedField, TranslatableField
 
-
+from networkapi.wagtailpages.pagemodels import customblocks
 from networkapi.wagtailpages.utils import (
     set_main_site_nav_information,
     get_page_tree_information
@@ -108,7 +108,7 @@ class MozfestHomepage(MozfestPrimaryPage):
     """
 
     #  this tells the templates to load a hardcoded, pre-defined video in the banner background
-    banner_video_type = "hardcoded"
+    banner_video_type = "featured"
 
     cta_button_label = models.CharField(
         max_length=250,
@@ -135,12 +135,41 @@ class MozfestHomepage(MozfestPrimaryPage):
         help_text='A banner paragraph specific to the homepage'
     )
 
+    # For banner_video_type == 'hardcoded'
     banner_video_url = models.URLField(
         max_length=2048,
         blank=True,
         help_text='The video to play when users click "watch video"'
     )
 
+    # For banner_video_type == 'featured'
+    banner_carousel = StreamField(
+        [
+            ('slide', customblocks.BannerCarouselSlideBlock()),
+        ],
+        max_num=3,
+        min_num=3,
+        null=True,
+    )
+
+    # For banner_video_type == 'featured'
+    banner_video = StreamField(
+        [
+            ('CMS_video', customblocks.WagtailVideoChooserBlock()),
+            ('video_url', customblocks.EmbeddedVideoBlock(
+                help_text='For YouTube: go to your YouTube video and click “Share,” '
+                          'then “Embed,” and then copy and paste the provided URL only. '
+                          'For example: https://www.youtube.com/embed/3FIVXBawyQw<br/>'
+                          'For Vimeo: follow similar steps to grab the embed URL. '
+                          'For example: https://player.vimeo.com/video/9004979'
+            )),
+        ],
+        blank=True,
+        help_text='The video to play when users click "watch video"',
+        max_num=1,
+        null=True,
+    )
+
     subpage_types = [
         'MozfestPrimaryPage',
         'MozfestHomepage',
@@ -155,16 +184,29 @@ class MozfestHomepage(MozfestPrimaryPage):
         FieldPanel('cta_button_label'),
         FieldPanel('cta_button_destination'),
         FieldPanel('banner_heading'),
+        StreamFieldPanel('banner_carousel'),
         FieldPanel('banner_guide_text'),
         FieldPanel('banner_video_url'),
+        StreamFieldPanel('banner_video'),
     ] + parent_panels[n:]
 
     if banner_video_type == "hardcoded":
         # Hide all the panels that aren't relevant for the video banner version of the MozFest Homepage
         content_panels = [
             field for field in all_panels
-            if field.field_name not in
-            ['banner', 'header', 'intro', 'banner_guide_text', 'banner_video_url']
+            if field.field_name not in [
+                'banner', 'header', 'intro', 'banner_carousel', 'banner_guide_text',
+                'banner_video', 'banner_video_url',
+            ]
+        ]
+    elif banner_video_type == "featured":
+        # Hide all the panels that aren't relevant for the video banner version of the MozFest Homepage
+        content_panels = [
+            field for field in all_panels
+            if field.field_name not in [
+                'banner', 'banner_guide_text', 'banner_video_url', 'cta_button_destination',
+                'cta_button_label', 'header', 'hero_image', 'intro',
+            ]
         ]
     else:
         content_panels = all_panels

network-api/networkapi/mozfest/templates/fragments/hero/large.html

@@ -25,6 +25,18 @@
       </div>
 
     </div>
+  {% elif banner_video_type == "featured" %}
+    <ul>
+    {% for slide_block in page.specific.banner_carousel %}
+      {% with slide=slide_block.value %}
+      <li>
+        {% image slide.image original %}
+        <h2>{{ slide.heading }}</h2>
+        <p>{{ slide.description }}</p>
+      </li>
+      {% endwith %}
+    {% endfor %}
+    </ul>
   {% else %}
     {% with banner=page.specific.get_banner %}
     {% if banner %}

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

@@ -1,10 +1,36 @@
-{% load i18n %}
+{% load i18n wagtailimages_tags %}
 
 <div class="homepage-banner-content container">
   <div class="row">
     <div class="col-10 col-lg-8 dark-theme">
       <h1 class="h1-heading">{{ page.banner_heading }}</h1>
-      {% if banner_video_type != "hardcoded" %}
+      {% if banner_video_type == "featured" %}
+        {% if page.banner_video %}
+        {# TODO Scroll to banner_video #}
+        <button class="btn btn-primary" id="mozfest-home-watch-video-button">{% trans "Watch last year’s recap video" %}</button>
+        {% endif %}
+        {% if page.banner_carousel %}
+        <ul>
+        {% for slide_block in page.specific.banner_carousel %}
+          {% with slide=slide_block.value %}
+          <li>
+            {% comment %}
+            {# Prints an image as <img src={url} width={original_width} height={original_height}> alt={alt_text} #}
+            {% image slide.image original %}
+            {% endcomment %}
+
+            {# Gets info for an image resized to 200 x 100 #}
+            {% image slide.image fill-200x100 as img %}
+            <img src={{ img.url }} width={{ img.width }} height={{ img.height }} alt={{ img.alt }}>
+
+            <h2>Heading: {{ slide.heading }}</h2>
+            <p>Description: {{ slide.description }}</p>
+          </li>
+          {% endwith %}
+        {% endfor %}
+        </ul>
+        {% endif %}
+      {% elif banner_video_type != "hardcoded" %}
         <p class="body-large">{{ page.banner_guide_text }}</p>
         {% if page.banner_video_url %}
         <a class="btn btn-primary" href="{{ page.banner_video_url }}" target="_blank" id="mozfest-home-watch-video-button">{% trans "Watch Video" %}</a>

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

@@ -14,7 +14,13 @@
   <div class="container">
     <div class="row cutout-wrapper-row">
       <div class="cutout col-12 pt-4">
-        {% if banner_video_type != "hardcoded" %}
+        {% if banner_video_type == "featured" %}
+          {% if page.banner_video %}
+          {# See embedded_video_block.html and wagtail_video_block.html #}
+          {% include_block page.banner_video %}
+          {% endif %}
+          <h1 class="h2-heading mb-0">{% if page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
+        {% elif banner_video_type != "hardcoded" %}
           <h1 class="h2-heading mb-0">{% if page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
           {% if page.intro %}
           <div class="body-large mt-3 mb-0">{{ page.intro | richtext }}</div>

network-api/networkapi/utility/faker/streamfield_provider.py

@@ -326,6 +326,18 @@ def generate_dear_internet_letter_field():
     return generate_field('letter', attributes)
 
 
+def generate_banner_carousel_field():
+    return generate_field('slide', {
+        'image': choice(Image.objects.all()).id,
+        'heading': fake.sentence(nb_words=4, variable_nb_words=True),
+        'description': fake.paragraph(nb_sentences=3, variable_nb_sentences=True),
+    })
+
+
+def generate_banner_video_field():
+    return generate_field('video_url', 'https://www.youtube.com/embed/3FIVXBawyQw')
+
+
 class StreamfieldProvider(BaseProvider):
     """
     A custom Faker Provider for relative image urls, for use with factory_boy
@@ -368,7 +380,9 @@ def streamfield(self, fields=None):
             'recent_blog_entries': generate_recent_blog_entries_field,
             'blog_set': generate_blog_set_field,
             'airtable': generate_airtable_field,
-            'typeform': generate_typeform_field
+            'typeform': generate_typeform_field,
+            'banner_carousel': generate_banner_carousel_field,
+            'banner_video': generate_banner_video_field,
         }
 
         streamfield_data = []

network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py

@@ -5,6 +5,7 @@
 from .blog_set_block import BlogSetBlock
 from .bootstrap_spacer_block import BootstrapSpacerBlock
 from .card_grid import CardGrid, CardGridBlock
+from .banner_carousel import BannerCarouselSlideBlock
 from .iframe_block import iFrameBlock
 from .image_block import ImageBlock
 from .image_grid import ImageGrid, ImageGridBlock
@@ -20,7 +21,7 @@
 from .typeform_block import TypeformBlock
 from .quote_block import QuoteBlock
 from .single_quote_block import SingleQuoteBlock
-from .video_block import VideoBlock
+from .video_block import EmbeddedVideoBlock, VideoBlock, WagtailVideoChooserBlock
 from .youtube_regret_block import YoutubeRegretBlock
 from .articles import ArticleRichText, ArticleDoubleImageBlock, ArticleFullWidthImageBlock, ArticleImageBlock
 from .dear_internet_letter_block import DearInternetLetterBlock
@@ -35,11 +36,13 @@
     ArticleFullWidthImageBlock,
     ArticleRichText,
     AudioBlock,
+    BannerCarouselSlideBlock,
     BlogSetBlock,
     BootstrapSpacerBlock,
     CardGrid,
     CardGridBlock,
     DearInternetLetterBlock,
+    EmbeddedVideoBlock,
     iFrameBlock,
     ImageBlock,
     ImageGrid,
@@ -57,5 +60,6 @@
     RecentBlogEntries,
     TypeformBlock,
     VideoBlock,
+    WagtailVideoChooserBlock,
     YoutubeRegretBlock,
 ]

network-api/networkapi/wagtailpages/pagemodels/customblocks/banner_carousel.py

@@ -0,0 +1,8 @@
+from wagtail.core import blocks
+from wagtail.images.blocks import ImageChooserBlock
+
+
+class BannerCarouselSlideBlock(blocks.StructBlock):
+    image = ImageChooserBlock()
+    heading = blocks.CharBlock(required=False)
+    description = blocks.CharBlock(required=False)

network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py

@@ -1,6 +1,8 @@
 from django import forms
 from wagtail.core import blocks
 
+from wagtailmedia import blocks as wagtailmedia_blocks
+
 
 class RadioSelectBlock(blocks.ChoiceBlock):
     def __init__(self, *args, **kwargs):
@@ -10,6 +12,11 @@ def __init__(self, *args, **kwargs):
         )
 
 
+class EmbeddedVideoBlock(blocks.URLBlock):
+    class Meta:
+        template = 'wagtailpages/blocks/embedded_video_block.html'
+
+
 class VideoBlock(blocks.StructBlock):
     url = blocks.CharBlock(
         help_text='For YouTube: go to your YouTube video and click “Share,” '
@@ -37,3 +44,9 @@ class VideoBlock(blocks.StructBlock):
 
     class Meta:
         template = 'wagtailpages/blocks/video_block.html'
+
+
+class WagtailVideoChooserBlock(wagtailmedia_blocks.VideoChooserBlock):
+    class Meta:
+        icon = "media"
+        template = 'wagtailpages/blocks/wagtail_video_block.html'

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

@@ -0,0 +1,25 @@
+{% extends "./base_streamfield_block.html" %}
+{% load wagtailcore_tags %}
+
+{% block block_row_classes %}
+no-gutters
+{% endblock %}
+
+{% block main_block_class %}
+streamfield-content
+full-width
+{% endblock %}
+
+{% block block_content %}
+<div class="my-2">
+  <div class="embed-responsive embed-responsive-16by9 d-print-none">
+    <iframe
+      src="{{ value }}"
+      frameborder="0"
+      class="embed-responsive-item"
+      allow="autoplay; encrypted-media"
+      allowfullscreen>
+    </iframe>
+  </div>
+</div>
+{% endblock %}

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

@@ -0,0 +1,25 @@
+{% extends "./base_streamfield_block.html" %}
+{% load wagtailcore_tags %}
+
+{% block block_row_classes %}
+no-gutters
+{% endblock %}
+
+{% block main_block_class %}
+streamfield-content
+{% endblock %}
+
+{% block block_content %}
+<video controls>
+  {% for source in value.sources %}
+  <source
+    {% for attr_key, attr_value in source.items %}
+    {{ attr_key }}="{{ attr_value }}"
+    {% endfor %}
+  >
+  {% endfor %}
+
+  {# Fallback #}
+  <p>Your browser does not support the video element.</p>
+</video>
+{% endblock %}

requirements.txt

@@ -258,7 +258,7 @@ wagtail-localize-git==0.9.3
     # via -r requirements.in
 wagtail-metadata==3.4.0
     # via -r requirements.in
-wagtailmedia==0.7.1
+wagtailmedia==0.8.0
     # via -r requirements.in
 webencodings==0.5.1
     # via html5lib