video cms plugin

ungleich_page/cms_plugins.py

@@ -5,7 +5,8 @@ from .models import (
     UngelichContactUsSection, UngelichTextSection, Service, ServiceItem,
     About, AboutItem, SectionWithImage, UngleichServiceItem, UngleichHeader,
     UngleichHeaderItem, UngleichProductItem, UngleichProduct, UngleichCustomer,
-    UngleichCustomerItem, UngleichHTMLOnly, UngleichSimpleHeader
+    UngleichCustomerItem, UngleichHTMLOnly, UngleichSimpleHeader,
+    UngleichHeaderItemWithVideo
 )
 
 
@@ -200,7 +201,10 @@ class UngleichHeaderWithTextAndImageSliderPlugin(CMSPluginBase):
     render_template = "ungleich_page/ungleich/header_with_slider.html"
     cache = False
     allow_children = True
-    child_classes = ['UngleichHeaderItemPlugin']
+    child_classes = [
+        'UngleichHeaderItemPlugin',
+        'UngleichHeaderItemWithVideoPlugin',
+    ]
 
     def render(self, context, instance, placeholder):
         context['instance'] = instance
@@ -224,6 +228,23 @@ 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
+        )
+        context['instance'] = instance
+        return context
+
+
 @plugin_pool.register_plugin
 class UngleichProductsPlugin(CMSPluginBase):
     name = "ungleich Products Plugin"

ungleich_page/migrations/0016_auto_20171219_1856.py

@@ -0,0 +1,39 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2017-12-19 16:11
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+import filer.fields.file
+import filer.fields.image
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('ungleich_page', '0015_ungleichsimpleheader'),
+        ('cms', '0014_auto_20160404_1908'),
+        ('filer', '0005_auto_20171219_1856'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='UngleichHeaderItemWithVideo',
+            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')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+    ]

ungleich_page/models.py

@@ -1,7 +1,7 @@
 from cms.models.pluginmodel import CMSPlugin
 from django.db import models
 from djangocms_text_ckeditor.fields import HTMLField
-from filer.fields.image import FilerImageField
+from filer.fields.image import FilerImageField, FilerFileField
 
 
 class UngelichPicture(CMSPlugin):
@@ -134,6 +134,39 @@ class UngleichHeaderItem(CMSPlugin):
     description = HTMLField()
 
 
+class UngleichHeaderItemWithVideo(CMSPlugin):
+    image = FilerImageField(
+        null=True,
+        blank=True,
+        related_name="ungleich_header_item_poster",
+        on_delete=models.SET_NULL,
+        help_text='The background image or poster image for video.'
+    )
+    video = FilerFileField(
+        null=True,
+        blank=True,
+        related_name="ungleich_header_item_video",
+        on_delete=models.SET_NULL,
+        help_text='Leavig this blank will make the image as the background.'
+    )
+    heading = models.CharField(
+        blank=True, null=True, max_length=100,
+        help_text='An optional title for this slide.',
+    )
+    description = models.TextField(
+        blank=True, null=True,
+        help_text='An optional description for this slide.'
+    )
+    btn_link = models.URLField(
+        blank=True, null=True,
+        help_text='If this field is left empty, no button would be displayed.'
+    )
+    btn_text = models.CharField(
+        blank=True, null=True, max_length=50,
+        help_text='Text for the button, if a link is provided.'
+    )
+
+
 class UngleichProductItem(ServiceItem):
     url = models.URLField(max_length=300, default="", blank=True)
 

ungleich_page/static/ungleich_page/css/ungleich.css

@@ -202,10 +202,11 @@
 }
 
 .header_slider .intro-cap {
+    margin: 0;
     text-align: right;
     line-height: 1.1;
     font-size: 23px;
-    margin-bottom: 12px;
+    padding-bottom: 10px;
 }
 
 .header_slider .btn-trans {
@@ -216,9 +217,7 @@
 
 @media (min-width: 768px) {
     .header_slider .intro-cap {
-        font-size: 4em;
+        font-size: 2.5em;
-        font-weight: 600;
-        margin-bottom: 20px;
     }
     .header_slider .carousel-control {
         width: 50px;
@@ -237,6 +236,12 @@
         overflow: auto;
         padding: 75px 50px;
     }
+    .header_slider .btn-trans {
+        padding: 8px 15px;
+        min-width: 175px;
+        letter-spacing: 1px;
+        font-size: 1.25em;
+    }
 }
 
 @media (min-width: 992px) {
@@ -250,8 +255,8 @@
     font-size: 1.55em;
     text-align: right;
     line-height: 1.4;
-    margin-bottom: 20px;
+    margin-bottom: 0;
-    padding: 5px 0;
+    padding-bottom: 10px;
 }
 
 @media (max-width: 768px) {

ungleich_page/templates/ungleich_page/includes/_header.html

@@ -1,7 +1,7 @@
 {% load static i18n %}
 
 <header class="header_slider">
-  <div id="carousel-header-ungleich" class="carousel slide" data-interval="8000">
+  <div id="carousel-header-ungleich" class="carousel slide" data-ride="carousel" data-interval="8000">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>

ungleich_page/templates/ungleich_page/ungleich/_header_item.html

@@ -1,14 +1,8 @@
+{% if instance.image %}
+  <div class="bg_img" style="background-image:url({{ instance.image.url }})"></div>
+{% endif %}
 <div class="container">
-    <div>
+  <div class="intro-cap-sans-transform">
-        {% if instance.image %}
+    {{ instance.description }}
-        <img src="{{ instance.image.url }}" alt=""
+  </div>
-             class="logo-image" img-responsive="" width="300"/>
-        <div class="header-vh"></div>
-        {% endif %}
-        <div>
-                <span class="intro-cap-sans-transform">
-                {{ instance.description }}
-                </span>
-        </div>
-    </div>
 </div>

ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html

@@ -0,0 +1,20 @@
+{% if instance.video %}
+  <div class="bg_vid bg_vid_back">
+    <video autoplay muted loop {% if instance.image %}poster="{{ instance.image.url }}"{% endif %}>
+      <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 %}
+    <div class="intro-cap">{{ instance.heading }}</div>
+  {% endif %}
+  {% if instance.description %}
+    <p class="intro_lead">{{ instance.description }}</p>
+  {% endif %}
+  {% if instance.btn_link %}
+    <a class="btn btn-trans" href="{{ instance.btn_link }}">{{ instance.btn_text|default:"Learn More" }}</a>
+  {% endif %}
+</div>

ungleich_page/templates/ungleich_page/ungleich/header_with_slider.html

@@ -2,20 +2,31 @@
 <header class="header_slider" style="background-image: url({{ instance.background_image.url }})">
   <div id="carousel-header-ungleich" class="carousel slide" data-ride="carousel" data-interval="{{ instance.carousel_data_interval}}">
     <!-- Indicators -->
-      {% if instance.child_plugin_instances|length > 1  %}
+    {% if instance.child_plugin_instances|length > 1  %}
-        <ol class="carousel-indicators">
+      <ol class="carousel-indicators">
-                {% for plugin in instance.child_plugin_instances %}
+        {% for plugin in instance.child_plugin_instances %}
-                    <li data-target="#carousel-header-ungleich" data-slide-to="{{forloop.counter0}}" {% if forloop.counter0 == 0 %}class="active" {% endif %}></li>
+          <li data-target="#carousel-header-ungleich" data-slide-to="{{forloop.counter0}}" {% if forloop.counter0 == 0 %}class="active"{% endif %}></li>
-                {% endfor %}
+        {% endfor %}
-        </ol>
+      </ol>
-      {% endif %}
+    {% endif %}
     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
-        {% for plugin in instance.child_plugin_instances %}
+      {% for plugin in instance.child_plugin_instances %}
         <div class="item {% if forloop.counter0 == 0 %}active{% endif %}">
-            {% render_plugin plugin %}
+          {% render_plugin plugin %}
         </div>
-        {% endfor %}
+      {% endfor %}
     </div>
+    <!-- Control Arrows -->
+    {% if instance.child_plugin_instances|length > 1  %}
+      <a class="left carousel-control" href="#carousel-header-ungleich" role="button" data-slide="prev">
+        <span class="fa fa-angle-left" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="right carousel-control" href="#carousel-header-ungleich" role="button" data-slide="next">
+        <span class="fa fa-angle-right" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+      </a>
+    {% endif %}
   </div>
 </header>