Merge pull request #3 from loleg/gallery

Refactoring from khashashin

publichealth/home/migrations/0021_auto_20170906_1453.py

@@ -0,0 +1,33 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.4 on 2017-09-06 12:53
+from __future__ import unicode_literals
+
+from django.db import migrations
+import wagtail.wagtailcore.blocks
+import wagtail.wagtailcore.fields
+import wagtail.wagtailimages.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0020_auto_20170904_2233'),
+    ]
+
+    operations = [
+        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='cup'))), 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='cup'))), blank=True, null=True),
+        ),
+    ]

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, ListBlock, TextBlock
+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
@@ -98,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_carousel', ListBlock(ImageCarouselBlock(),template='publichealth/templates/home/article_page.html',icon="image")),
         ('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',
@@ -149,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,62 +1,12 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags wagtailimages_tags static block_tags %}
+{% load wagtailcore_tags %}
 
 {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}
 
 {% block content %}
 <section id="news-details" class="article-page">
   <div class="container">
-
     {% include 'home/page_content.html' %}
-
   </div>
-
-    <!-- Gallery Template -->
-
-  <link rel="stylesheet" href="{% static "/css/sw_carousel.min.css" %}" />
-  <div class="container-carousel">
-
-      <div id="{{ id_prefix }}-gallery" class="royalSlider rsDefault visibleNearby">
-
-     {% for item in self %}
-
-            {% image item.image height-400 as carouselimagedata %}
-            <a class="rsImg" data-rsw="{{ carouselimagedata.width }}" data-rsh="{{ carouselimagedata.height }}"  href="{{ carouselimagedata.url }}">
-                    {{ item.caption }}
-            </a>
-
-     {% endfor %}
-
-      </div>
-
-  </div>
-
-<script>
-  // Important note! If you're adding CSS3 transition to slides, fadeInLoadedSlide should be disabled to avoid fade-conflicts.
-  jQuery(document).ready(function($) {
-    var si = $('#{{ id_prefix }}-gallery').royalSlider({
-      addActiveClass: true,
-      arrowsNav: true,
-      controlNavigation: 'none',
-      autoScaleSlider: true,
-      autoScaleSliderWidth: 900,
-      autoScaleSliderHeight: 250,
-      loop: true,
-      fadeinLoadedSlide: false,
-      globalCaption: true,
-      keyboardNavEnabled: true,
-      globalCaptionInside: false,
-      visibleNearby: {
-        enabled: true,
-        centerArea: 0.4,
-        center: true,
-        breakpoint: 650,
-        breakpointCenterArea: 0.64,
-        navigateByCenterClick: true
-      }
-    }).data('royalSlider');
-
-  });
-</script>
 </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,20 @@
+{% load wagtailcore_tags wagtailimages_tags static %}
+
+<!-- Gallery Template -->
+<link rel="stylesheet" href="{% static "/css/sw_carousel.min.css" %}" />
+<div class="container-carousel">
+
+  <div id="article_page-gallery" class="royalSlider rsDefault visibleNearby">
+  {% for block in page.gallery %}
+    {% for val in block.value %}
+
+    {% image val.image height-400 as carouselimagedata %}
+    <a class="rsImg" data-caption="{{ val.caption }}" data-rsw="{{ carouselimagedata.width }}" data-rsh="{{ carouselimagedata.height }}"  href="{{ carouselimagedata.url }}">
+      {% image val.image height-400 %}
+    </a>
+
+    {% endfor %}
+  {% endfor %}
+  </div>
+
+</div>

publichealth/static/js/main.js

@@ -25,4 +25,27 @@ $(document).ready(function() {
 	// 	$(this).css('border-top', '3px solid ' + pastel);
 	// });
 
+	// Carousel gallery component (article_page)
+	var si = $('#article_page-gallery').royalSlider({
+		addActiveClass: true,
+		arrowsNav: true,
+		controlNavigation: 'none',
+		autoScaleSlider: true,
+		autoScaleSliderWidth: 900,
+		autoScaleSliderHeight: 250,
+		loop: true,
+		fadeinLoadedSlide: false,
+		globalCaption: true,
+		keyboardNavEnabled: true,
+		globalCaptionInside: false,
+		visibleNearby: {
+			enabled: true,
+			centerArea: 0.4,
+			center: true,
+			breakpoint: 650,
+			breakpointCenterArea: 0.64,
+			navigateByCenterClick: true
+		}
+	}).data('royalSlider');
+
 });