Merge pull request #16 from khashashin/gallery

Gallery feature

bower.json

@@ -15,6 +15,7 @@
   ],
   "dependencies": {
     "bootstrap-sass": "bootstrap-sass-official#^3.3.7",
-    "slick-carousel": "^1.6.0"
+    "slick-carousel": "^1.4.1",
+    "slick-lightbox": "^0.2.10"
   }
 }

feedler/migrations/0004_auto_20170905_1502.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.4 on 2017-09-05 13:02
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('feedler', '0003_entry_lang'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='entry',
+            name='lang',
+            field=models.CharField(blank=True, choices=[('de', 'Deutsch'), ('fr', 'Français'), ('it', 'Italiano'), ('en', 'English'), ('', ' * * * ')], default='', max_length=2),
+        ),
+    ]

publichealth/home/migrations/0019_auto_20170703_1244.py

@@ -1,19 +0,0 @@
-# -*- coding: utf-8 -*-
-# Generated by Django 1.11.3 on 2017-07-03 10:44
-from __future__ import unicode_literals
-
-from django.db import migrations
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('home', '0018_contact_contact_form'),
-    ]
-
-    operations = [
-        migrations.AlterModelOptions(
-            name='dataletssettings',
-            options={'verbose_name': 'Get support'},
-        ),
-    ]

publichealth/home/migrations/0019_auto_20170908_1505.py

@@ -0,0 +1,42 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.4 on 2017-09-08 13:05
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import wagtail.wagtailcore.blocks
+import wagtail.wagtailcore.fields
+import wagtail.wagtailimages.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0018_contact_contact_form'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='dataletssettings',
+            options={'verbose_name': 'Get support'},
+        ),
+        migrations.AddField(
+            model_name='articlepage',
+            name='gallery',
+            field=wagtail.wagtailcore.fields.StreamField((('image', wagtail.wagtailcore.blocks.ListBlock(wagtail.wagtailcore.blocks.StructBlock((('image', wagtail.wagtailimages.blocks.ImageChooserBlock()), ('caption', wagtail.wagtailcore.blocks.TextBlock(required=False)))), icon='image')),), blank=True),
+        ),
+        migrations.AlterField(
+            model_name='articlepage',
+            name='body_de',
+            field=wagtail.wagtailcore.fields.StreamField((('paragraph', wagtail.wagtailcore.blocks.RichTextBlock()), ('section', wagtail.wagtailcore.blocks.CharBlock(classname='full title')), ('info', wagtail.wagtailcore.blocks.StructBlock((('title', wagtail.wagtailcore.blocks.CharBlock(required=True)), ('photo', wagtail.wagtailimages.blocks.ImageChooserBlock(required=True)), ('summary', wagtail.wagtailcore.blocks.RichTextBlock(required=True)), ('action', wagtail.wagtailcore.blocks.CharBlock(required=False)), ('url', wagtail.wagtailcore.blocks.URLBlock(required=False))))), ('placer', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('gallery', 'Image gallery')], icon='user'))), blank=True, null=True),
+        ),
+        migrations.AlterField(
+            model_name='articlepage',
+            name='body_fr',
+            field=wagtail.wagtailcore.fields.StreamField((('paragraph', wagtail.wagtailcore.blocks.RichTextBlock()), ('section', wagtail.wagtailcore.blocks.CharBlock(classname='full title')), ('info', wagtail.wagtailcore.blocks.StructBlock((('title', wagtail.wagtailcore.blocks.CharBlock(required=True)), ('photo', wagtail.wagtailimages.blocks.ImageChooserBlock(required=True)), ('summary', wagtail.wagtailcore.blocks.RichTextBlock(required=True)), ('action', wagtail.wagtailcore.blocks.CharBlock(required=False)), ('url', wagtail.wagtailcore.blocks.URLBlock(required=False))))), ('placer', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('gallery', 'Image gallery')], icon='user'))), blank=True, null=True),
+        ),
+        migrations.AlterField(
+            model_name='contactformfield',
+            name='field_type',
+            field=models.CharField(choices=[('singleline', 'Single line text'), ('multiline', 'Multi-line text'), ('email', 'Email'), ('number', 'Number'), ('url', 'URL'), ('checkbox', 'Checkbox'), ('checkboxes', 'Checkboxes'), ('dropdown', 'Drop down'), ('multiselect', 'Multiple select'), ('radio', 'Radio buttons'), ('date', 'Date'), ('datetime', 'Date/time')], max_length=16, verbose_name='field type'),
+        ),
+    ]

publichealth/home/migrations/0020_auto_20170904_2233.py

@@ -1,20 +0,0 @@
-# -*- coding: utf-8 -*-
-# Generated by Django 1.11.4 on 2017-09-04 20:33
-from __future__ import unicode_literals
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('home', '0019_auto_20170703_1244'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='contactformfield',
-            name='field_type',
-            field=models.CharField(choices=[('singleline', 'Single line text'), ('multiline', 'Multi-line text'), ('email', 'Email'), ('number', 'Number'), ('url', 'URL'), ('checkbox', 'Checkbox'), ('checkboxes', 'Checkboxes'), ('dropdown', 'Drop down'), ('multiselect', 'Multiple select'), ('radio', 'Radio buttons'), ('date', 'Date'), ('datetime', 'Date/time')], max_length=16, verbose_name='field type'),
-        ),
-    ]

publichealth/home/models/models.py

@@ -7,7 +7,7 @@ from django.utils import translation
 
 from modelcluster.fields import ParentalKey
 
-from wagtail.wagtailcore.blocks import StructBlock, CharBlock, URLBlock, RichTextBlock
+from wagtail.wagtailcore.blocks import StructBlock, CharBlock, URLBlock, RichTextBlock, ListBlock, TextBlock, ChoiceBlock
 from wagtail.wagtailcore.models import Page, Orderable
 from wagtail.wagtailcore.fields import StreamField, RichTextField
 from wagtail.wagtailadmin.edit_handlers import FieldPanel, StreamFieldPanel, InlinePanel, MultiFieldPanel
@@ -77,6 +77,13 @@ class ArticleIndexPage(Page):
     class Meta:
         verbose_name = "Rubrik"
 
+class ImageCarouselBlock(StructBlock):
+    image = ImageChooserBlock()
+    caption = TextBlock(required=False)
+
+    class Meta:
+        icon = 'image'
+
 class ArticlePage(Page):
     title_fr = models.CharField(max_length=255, default="")
     trans_title = TranslatedField(
@@ -91,17 +98,28 @@ class ArticlePage(Page):
         'intro_fr',
     )
 
+    gallery = StreamField([
+        ('image', ListBlock(ImageCarouselBlock(), icon="image")),
+    ], blank=True)
+    # documents = StreamField([
+    #     ('documents', ListBlock(DocumentChooserBlock(), icon="document")),
+    # ])
+
     body_de = StreamField([
         ('paragraph', RichTextBlock()),
-        ('image', ImageChooserBlock()),
         ('section', CharBlock(classname="full title")),
         ('info', InfoBlock()),
+        ('placer', ChoiceBlock(choices=[
+            ('gallery', 'Image gallery'),
+        ], icon='user'))
     ], null=True, blank=True)
     body_fr = StreamField([
         ('paragraph', RichTextBlock()),
-        ('image', ImageChooserBlock()),
         ('section', CharBlock(classname="full title")),
         ('info', InfoBlock()),
+        ('placer', ChoiceBlock(choices=[
+            ('gallery', 'Image gallery'),
+        ], icon='user'))
     ], null=True, blank=True)
     trans_body = TranslatedField(
         'body_de',
@@ -142,6 +160,7 @@ class ArticlePage(Page):
         MultiFieldPanel([
             ImageChooserPanel('feed_image'),
         ], heading="Images"),
+        StreamFieldPanel('gallery'),
     ]
     promote_panels = [
         InlinePanel('related_links', label="Links"),

publichealth/home/templates/home/article_page.html

@@ -1,14 +1,18 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags wagtailimages_tags %}
+{% load static wagtailcore_tags %}
 
 {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}
 
+{% block extra_css %}
+		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick.scss' %}">
+		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick-theme.scss' %}">
+		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-lightbox/src/styles/slick-lightbox.sass' %}">
+{% endblock %}
+
 {% block content %}
 <section id="news-details" class="article-page">
   <div class="container">
-
     {% include 'home/page_content.html' %}
-
   </div>
 </section>
 {% endblock %}

publichealth/home/templates/home/page_content.html

@@ -19,6 +19,10 @@
 {% for block in page.trans_body %}
   {% if block.block_type == 'heading' %}
     <h3>{{ block.value }}</h3>
+  {% elif block.block_type == 'placer' %}
+    {% if block.value == 'gallery' %}
+      {% include 'home/photo_gallery.html' %}
+    {% endif %}
   {% elif block.block_type != 'info' %}
   <p class="block-{{ block.block_type }}">
     {% include_block block %}

publichealth/home/templates/home/photo_gallery.html

@@ -0,0 +1,26 @@
+{% load compress static wagtailcore_tags wagtailimages_tags %}
+
+<!-- Gallery Template -->
+
+<div class="carousel-inner carousel-gallery slick" role="listbox">
+{% for block in page.gallery %}
+  {% for val in block.value %}
+		<div class="item">
+			{% image val.image fill-700x400 as entry_thumb %}
+			{% image val.image original as entry_photo %}
+			<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
+		</div>
+  {% endfor %}
+{% endfor %}
+</div>
+<div class="carousel-inner slider-nav">
+{% for block in page.gallery %}
+  {% for val in block.value %}
+		<div class="item">
+			{% image val.image fill-700x400 as entry_thumb %}
+			{% image val.image original as entry_photo %}
+			<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
+		</div>
+  {% endfor %}
+{% endfor %}
+</div>

publichealth/static/css/main.scss

@@ -14,3 +14,16 @@ body {
 @include mid-screen($screen-sm-min, $screen-md-min) {
   body { margin-top: 200px; }
 }
+$slider-nav: 200px;
+.slider-nav {
+  padding-bottom: 2.5em;
+
+  .item  {
+    height: $slider-nav;
+
+    img {
+      width: 90%;
+      height: $slider-nav;
+    }
+  }
+}

publichealth/static/css/modules/_banner.scss

@@ -93,49 +93,6 @@ $banner-height: 700px;
   padding-top: 0 !important;
   padding-bottom: 0em;
 
-  .carousel-inner {
-    padding-bottom: 2.5em;
-
-    .item  {
-      height: $banner-height;
-      position: relative;
-      background-color: white;
-
-      img {
-        width: 100%;
-        height: $banner-height;
-        overflow: hidden;
-        display: block;
-        background-size: cover;
-        background-position: center;
-        opacity: 1;
-
-      }
-      .carousel-caption {
-        background-color: white;
-        padding: 2em;
-        bottom: -2em;
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-
-        h3 {
-          margin-top: 0;
-        }
-        p:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-    .slick-dots {
-      bottom: 50px;
-
-      li {
-        margin: 0;
-        button {
-          box-shadow: none;
-        }
-      }
-    }
-  }
   h3, p, button {
     color: #333;
     text-shadow: none;
@@ -155,6 +112,49 @@ $banner-height: 700px;
     margin-top: 2em;
   }
 }
+.carousel-inner {
+  padding-bottom: 2.5em;
+
+  .item  {
+    height: $banner-height;
+    position: relative;
+    background-color: white;
+
+    img {
+      width: 100%;
+      height: $banner-height;
+      overflow: hidden;
+      display: block;
+      background-size: cover;
+      background-position: center;
+      opacity: 1;
+
+    }
+    .carousel-caption {
+      background-color: white;
+      padding: 2em;
+      bottom: -2em;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+
+      h3 {
+        margin-top: 0;
+      }
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .slick-dots {
+    bottom: 50px;
+
+    li {
+      margin: 0;
+      button {
+        box-shadow: none;
+      }
+    }
+  }
+}
 .arrow {
   color: white;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
@@ -192,6 +192,22 @@ $banner-height: 700px;
   color: inherit;
 }
 
+// Carousel gallery
+
+$gallery-height: 550px;
+.carousel-inner {
+  padding-bottom: 0;
+
+  .item  {
+    height: $gallery-height;
+
+    img {
+      width: 100%; // TODO: reduce width to try to use the Variable Width slick configuration
+      height: $gallery-height;
+    }
+  }
+}
+
 @include max-screen(1000px) {
   .slick-dots { display: none !important; }
 }

publichealth/static/css/paper/bootstrap.css

@@ -6238,7 +6238,7 @@ button.close {
 .carousel {
   position: relative;
 }
-.carousel-inner {
+/*.carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
@@ -6313,7 +6313,7 @@ button.close {
 }
 .carousel-inner > .active.right {
   left: 100%;
-}
+}*/
 .carousel-control {
   position: absolute;
   top: 0;

publichealth/static/js/main.js

@@ -5,19 +5,47 @@ $(document).ready(function() {
 		return this.hostname && this.hostname !== location.hostname;
 	}).attr('target', '_blank');
 
-	// Initialise front page carousel component
+	if ($('#carousel-banner').length) {
-	$('.carousel-inner.slick').slick({
+		// Initialise front page carousel component
-		autoplay: true,
+		$('.carousel-inner').slick({
-		autoplaySpeed: '10000',
+			autoplay: true,
+			autoplaySpeed: '10000',
+			dots: true,
+			infinite: true,
+			speed: 1000,
+			fade: true,
+			cssEase: 'linear',
+			prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</span>',
+			nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>',
+		});
+
+	} else if ($('.carousel-gallery').length) {
+		// Load gallery component
+		$('.carousel-gallery').slick({
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			arrows: false,
+			fade: true,
+			asNavFor: '.slider-nav'
+		}).slickLightbox({
+		  src: 'data-src',
+		  itemSelector: 'img',
+		  // lazy: true,
+		  // useHistoryApi: 'true'
+		});
+	}
+	$('.slider-nav').slick({
+		slidesToShow: 3,
+		slidesToScroll: 1,
+		asNavFor: '.carousel-gallery',
 		dots: true,
-		infinite: true,
+		centerMode: true,
-		speed: 1000,
+		focusOnSelect: true,
-		fade: true,
-		cssEase: 'linear',
 		prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</span>',
 		nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>',
 	});
 
+
 	// Pastel colors on live news
 	// $('.feedpage-body .panel').each(function() {
 	// 	var hue = Math.floor(Math.random() * 360);

publichealth/templates/base.html

@@ -33,6 +33,7 @@
             <script src="{% static 'libs/jquery/dist/jquery.js' %}"></script>
             <script src="{% static 'libs/bootstrap-sass/assets/javascripts/bootstrap.min.js' %}"></script>
             <script src="{% static 'libs/slick-carousel/slick/slick.min.js' %}"></script>
+            <script src="{% static 'libs/slick-lightbox/dist/slick-lightbox.js' %}"></script>
         {% endblock %}
 
         {% compress js %}