Merge pull request #16 from khashashin/gallery

Gallery feature
This commit is contained in:
datalets 2017-09-11 17:22:28 +02:00 committed by GitHub
commit 92b3a97364
14 changed files with 234 additions and 99 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -5,19 +5,47 @@ $(document).ready(function() {
return this.hostname && this.hostname !== location.hostname;
}).attr('target', '_blank');
// Initialise front page carousel component
$('.carousel-inner.slick').slick({
autoplay: true,
autoplaySpeed: '10000',
if ($('#carousel-banner').length) {
// Initialise front page carousel component
$('.carousel-inner').slick({
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,
speed: 1000,
fade: true,
cssEase: 'linear',
centerMode: true,
focusOnSelect: true,
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);

View file

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