template error included

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/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
 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(
@@ -93,7 +100,7 @@ class ArticlePage(Page):
 
     body_de = StreamField([
         ('paragraph', RichTextBlock()),
-        ('image', ImageChooserBlock()),
+        ('image_carousel', ListBlock(ImageCarouselBlock(),template='publichealth/templates/home/article_page.html',icon="image")),
         ('section', CharBlock(classname="full title")),
         ('info', InfoBlock()),
     ], null=True, blank=True)

publichealth/home/templates/home/article_page.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags wagtailimages_tags %}
+{% load wagtailcore_tags wagtailimages_tags static block_tags %}
 
 {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}
 
@@ -10,5 +10,53 @@
     {% 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/static/css/sw_carousel.min.css

@@ -0,0 +1 @@
+#gallery-1{width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}#gallery-2,.gallery-2{margin:0 auto;display:block}@media (max-width: 600px){#gallery-2,.gallery-2{width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}}.rsDefault,.rsDefault .rsOverflow,.rsDefault .rsSlide,.rsDefault .rsVideoFrameHolder,.rsDefault .rsThumbs{background:#F8F8FF;color:#6d6f72;width:100%;padding-bottom:10px}.container-carousel{margin:10px 0 10px 0}.rsWithThumbs .rsGCaption{font-size:1em;line-height:18px;padding:12px 0 16px;background:#fff;width:100%;position:static;float:left;left:auto;bottom:auto;text-align:center;margin-bottom:10px;color:#6d6f72}.visibleNearby{width:100%;background:#F8F8FF;color:#333;padding-top:25px}.visibleNearby .rsGCaption{font-size:1em;line-height:18px;padding:12px 0 16px;background:#F8F8FF;width:100%;position:static;float:left;left:auto;bottom:auto;text-align:center;margin-bottom:10px;color:#6d6f72}.visibleNearby .rsGCaption span{display:block;clear:both;color:#6d6f72;font-size:1.2em;line-height:22px}.visibleNearby .rsSlide img{opacity:0.45;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9)}.visibleNearby .rsActiveSlide img{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}@media screen and (min-width: 0px) and (max-width: 900px){#gallery-1 .rsOverflow,.royalSlider#gallery-1{height:400px !important}}@media screen and (min-width: 0px) and (max-width: 500px){#gallery-1 .rsOverflow,.royalSlider#gallery-1{height:300px !important}}