using new header slider

ungleich_page/cms_plugins.py

@@ -6,9 +6,9 @@ from .models import (
     About, AboutItem, SectionWithImage, UngleichServiceItem, UngleichHeader,
     UngleichHeaderItem, UngleichProductItem, UngleichProduct, UngleichCustomer,
     UngleichCustomerItem, UngleichHTMLOnly, UngleichSimpleHeader,
-    UngleichHeaderItemWithVideo,
     UngleichHeaderWithBackgroundImageSlider,
     UngleichHeaderWithBackgroundImageSliderItem,
+    UngleichHeaderWithBackgroundVideoSliderItem,
 )
 
 
@@ -203,10 +203,7 @@ class UngleichHeaderWithTextAndImageSliderPlugin(CMSPluginBase):
     render_template = "ungleich_page/ungleich/header_with_slider.html"
     cache = False
     allow_children = True
-    child_classes = [
-        'UngleichHeaderItemPlugin',
-        'UngleichHeaderItemWithVideoPlugin',
-    ]
+    child_classes = ['UngleichHeaderItemPlugin']
 
     def render(self, context, instance, placeholder):
         context['instance'] = instance
@@ -230,21 +227,6 @@ class UngleichHeaderItemPlugin(CMSPluginBase):
         return context
 
 
-@plugin_pool.register_plugin
-class UngleichHeaderItemWithVideoPlugin(CMSPluginBase):
-    name = "ungleich Header Item With Video Plugin"
-    model = UngleichHeaderItemWithVideo
-    render_template = "ungleich_page/ungleich/_header_video_item.html"
-    cache = False
-    require_parent = True
-    parent_classes = ['UngleichHeaderWithTextAndImageSliderPlugin']
-
-    def render(self, context, instance, placeholder):
-        context = super(UngleichHeaderItemWithVideoPlugin, self).render(
-            context, instance, placeholder
-        )
-
-
 @plugin_pool.register_plugin
 class UngleichHeaderBackgroundImageAndTextSliderPlugin(CMSPluginBase):
     name = "ungleich Header with Background and Image Slider Plugin"
@@ -254,13 +236,33 @@ class UngleichHeaderBackgroundImageAndTextSliderPlugin(CMSPluginBase):
     )
     cache = False
     allow_children = True
-    child_classes = ['UngleichHeaderBackgroundImageAndTextItemPlugin']
+    child_classes = [
+        'UngleichHeaderBackgroundImageAndTextItemPlugin',
+        'UngleichHeaderBackgroundVideoItemPlugin',
+    ]
 
     def render(self, context, instance, placeholder):
         context['instance'] = instance
         return context
 
 
+@plugin_pool.register_plugin
+class UngleichHeaderBackgroundVideoItemPlugin(CMSPluginBase):
+    name = "ungleich Header Background Video Item Plugin"
+    model = UngleichHeaderWithBackgroundVideoSliderItem
+    render_template = "ungleich_page/ungleich/_header_with_background_video_slider_item.html"
+    cache = False
+    require_parent = True
+    parent_classes = ['UngleichHeaderBackgroundImageAndTextSliderPlugin']
+
+    def render(self, context, instance, placeholder):
+        context = super(UngleichHeaderBackgroundVideoItemPlugin, self).render(
+            context, instance, placeholder
+        )
+        context['instance'] = instance
+        return context
+
+
 @plugin_pool.register_plugin
 class UngleichHeaderBackgroundImageAndTextItemPlugin(CMSPluginBase):
     name = "ungleich Header with Background and Image and Text Item Plugin"

ungleich_page/migrations/0017_auto_20171219_1856.py

@@ -1,5 +1,5 @@
 # -*- coding: utf-8 -*-
-# Generated by Django 1.9.4 on 2017-12-19 16:11
+# Generated by Django 1.9.4 on 2017-12-19 21:19
 from __future__ import unicode_literals
 
 from django.db import migrations, models
@@ -16,18 +16,22 @@ class Migration(migrations.Migration):
 
     operations = [
         migrations.CreateModel(
-            name='UngleichHeaderItemWithVideo',
+            name='UngleichHeaderWithBackgroundVideoSliderItem',
             fields=[
                 ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE,
                                                        parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
-                ('description', models.TextField(blank=True, null=True)),
-                ('image', filer.fields.image.FilerImageField(blank=True, null=True,
-                                                             on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_poster', to='filer.Image')),
-                ('btn_link', models.URLField(blank=True, null=True)),
-                ('btn_text', models.CharField(blank=True, max_length=50, null=True)),
-                ('heading', models.CharField(blank=True, max_length=100, null=True)),
-                ('video', filer.fields.file.FilerFileField(blank=True, null=True,
-                                                           on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_video', to='filer.File')),
+                ('description', models.TextField(
+                    blank=True, help_text='An optional description for this slide.', null=True)),
+                ('image', filer.fields.image.FilerImageField(blank=True, help_text='The background image or poster image for video.',
+                                                             null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_poster', to='filer.Image')),
+                ('btn_link', models.URLField(
+                    blank=True, help_text='If this field is left empty, no button would be displayed.', null=True)),
+                ('btn_text', models.CharField(
+                    blank=True, help_text='Text for the button, if a link is provided.', max_length=50, null=True)),
+                ('heading', models.CharField(
+                    blank=True, help_text='An optional title for this slide.', max_length=100, null=True)),
+                ('video', filer.fields.file.FilerFileField(blank=True, help_text='Leavig this blank will make the image as the background.',
+                                                           null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_video', to='filer.File')),
             ],
             options={
                 'abstract': False,

ungleich_page/models.py

@@ -155,7 +155,7 @@ class UngleichHeaderItem(CMSPlugin):
     description = HTMLField()
 
 
-class UngleichHeaderItemWithVideo(CMSPlugin):
+class UngleichHeaderWithBackgroundVideoSliderItem(CMSPlugin):
     image = FilerImageField(
         null=True,
         blank=True,

ungleich_page/static/ungleich_page/css/ungleich.css

@@ -308,7 +308,7 @@
 
 @media (max-aspect-ratio: 16/9) {
   .bg_vid > video {
-    width: auto;
+    /* width: auto; */
     height: 100%;
   }
 }

ungleich_page/templates/ungleich_page/ungleich/_header_with_background_video_slider_item.html

@@ -1,11 +1,16 @@
+{% if instance.image %}
+  <div class="bg_img" style="background-image:url({{ instance.image.url }})"></div>
+{% endif %}
 {% if instance.video %}
   <div class="bg_vid bg_vid_back">
-    <video autoplay muted loop {% if instance.image %}poster="{{ instance.image.url }}"{% endif %}>
+    {% comment %}
+      use attribute poster="{{ instance.image.url }}" after cross browser testing
+      in place of .bg_img
+    {% endcomment %}
+    <video autoplay muted loop>
       <source type="video/mp4" src="{{ instance.video.url }}">
     </video>
   </div>
-{% elif instance.image %}
-  <div class="bg_img" style="background-image:url({{ instance.image.url }})"></div>
 {% endif %}
 <div class="container">
   {% if instance.heading %}