Merge pull request #3 from loleg/gallery

Refactoring from khashashin
This commit is contained in:
khashashin 2017-09-07 13:41:34 +02:00 committed by GitHub
commit 5216c7b78e
6 changed files with 96 additions and 54 deletions

View file

@ -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),
),
]

View file

@ -7,7 +7,7 @@ from django.utils import translation
from modelcluster.fields import ParentalKey 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.models import Page, Orderable
from wagtail.wagtailcore.fields import StreamField, RichTextField from wagtail.wagtailcore.fields import StreamField, RichTextField
from wagtail.wagtailadmin.edit_handlers import FieldPanel, StreamFieldPanel, InlinePanel, MultiFieldPanel from wagtail.wagtailadmin.edit_handlers import FieldPanel, StreamFieldPanel, InlinePanel, MultiFieldPanel
@ -98,17 +98,28 @@ class ArticlePage(Page):
'intro_fr', 'intro_fr',
) )
gallery = StreamField([
('image', ListBlock(ImageCarouselBlock(), icon="image")),
], blank=True)
# documents = StreamField([
# ('documents', ListBlock(DocumentChooserBlock(), icon="document")),
# ])
body_de = StreamField([ body_de = StreamField([
('paragraph', RichTextBlock()), ('paragraph', RichTextBlock()),
('image_carousel', ListBlock(ImageCarouselBlock(),template='publichealth/templates/home/article_page.html',icon="image")),
('section', CharBlock(classname="full title")), ('section', CharBlock(classname="full title")),
('info', InfoBlock()), ('info', InfoBlock()),
('placer', ChoiceBlock(choices=[
('gallery', 'Image gallery'),
], icon='user'))
], null=True, blank=True) ], null=True, blank=True)
body_fr = StreamField([ body_fr = StreamField([
('paragraph', RichTextBlock()), ('paragraph', RichTextBlock()),
('image', ImageChooserBlock()),
('section', CharBlock(classname="full title")), ('section', CharBlock(classname="full title")),
('info', InfoBlock()), ('info', InfoBlock()),
('placer', ChoiceBlock(choices=[
('gallery', 'Image gallery'),
], icon='user'))
], null=True, blank=True) ], null=True, blank=True)
trans_body = TranslatedField( trans_body = TranslatedField(
'body_de', 'body_de',
@ -149,6 +160,7 @@ class ArticlePage(Page):
MultiFieldPanel([ MultiFieldPanel([
ImageChooserPanel('feed_image'), ImageChooserPanel('feed_image'),
], heading="Images"), ], heading="Images"),
StreamFieldPanel('gallery'),
] ]
promote_panels = [ promote_panels = [
InlinePanel('related_links', label="Links"), InlinePanel('related_links', label="Links"),

View file

@ -1,62 +1,12 @@
{% extends "base.html" %} {% 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 body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}
{% block content %} {% block content %}
<section id="news-details" class="article-page"> <section id="news-details" class="article-page">
<div class="container"> <div class="container">
{% include 'home/page_content.html' %} {% include 'home/page_content.html' %}
</div> </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> </section>
{% endblock %} {% endblock %}

View file

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

View file

@ -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>

View file

@ -25,4 +25,27 @@ $(document).ready(function() {
// $(this).css('border-top', '3px solid ' + pastel); // $(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');
}); });