uniweb: Gallery section

uniweb/models.py

@@ -9,6 +9,7 @@ from wagtail.admin.edit_handlers import (
 from wagtail.core import blocks
 from wagtail.core.fields import StreamField
 from wagtail.core.models import Page
+from wagtail.images.blocks import ImageChooserBlock
 from wagtail.images.edit_handlers import ImageChooserPanel
 from wagtailmetadata.models import MetadataPageMixin
 
@@ -41,6 +42,14 @@ class TextSectionBlock(blocks.StructBlock):
         label = "textová sekce"
 
 
+class GallerySectionBlock(blocks.StructBlock):
+    title = blocks.CharBlock(label="nadpis", required=False)
+    images = blocks.ListBlock(ImageChooserBlock(label="obrázek"))
+
+    class Meta:
+        label = "galerie obrázků"
+
+
 class MenuItemBlock(blocks.StructBlock):
     name = blocks.CharBlock(label="název")
     page = blocks.PageChooserBlock(label="stránka")
@@ -66,8 +75,11 @@ class UniwebHomePage(MetadataPageMixin, Page):
     ### FIELDS
 
     content = StreamField(
-        [("text_section", TextSectionBlock()),],
-        verbose_name="Obsah stránky",
+        [
+            ("text_section", TextSectionBlock()),
+            ("gallery_section", GallerySectionBlock()),
+        ],
+        verbose_name="obsah stránky",
         blank=True,
     )
     # settings
@@ -121,8 +133,11 @@ class UniwebFlexiblePage(Page, SubpageMixin, MetadataPageMixin):
     ### FIELDS
 
     content = StreamField(
-        [("text_section", TextSectionBlock()),],
-        verbose_name="Obsah stránky",
+        [
+            ("text_section", TextSectionBlock()),
+            ("gallery_section", GallerySectionBlock()),
+        ],
+        verbose_name="obsah stránky",
         blank=True,
     )
 

uniweb/templates/uniweb/base.html

@@ -31,6 +31,7 @@
 
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="{% static "shared/vendor/bootstrap-4.4.1/css/bootstrap.min.css" %}">
+  <link rel="stylesheet" href="{% static "shared/vendor/fancybox/jquery.fancybox.min.css" %}">
 
   <!-- Styles -->
   <link href="{% static "uniweb/assets/css/style.css" %}" rel="stylesheet">
@@ -103,5 +104,11 @@
   </footer>
   <!-- /FOOTER -->
 
+  <!-- JavaScript libraries -->
+  <script src="{% static "shared/vendor/jquery/jquery-3.4.1.min.js" %}"></script>
+  <script src="{% static "shared/vendor/bootstrap-4.4.1/js/bootstrap.min.js" %}"></script>
+  <script src="{% static "shared/vendor/lazysizes/lazysizes.min.js" %}"></script>
+  <script src="{% static "shared/vendor/fancybox/jquery.fancybox.min.js" %}"></script>
+
 </body>
 </html>

uniweb/templates/uniweb/snippet_sections.html

-{% load wagtailcore_tags %}
+{% load wagtailcore_tags wagtailimages_tags %}
+
 {% for section in page.content %}
 <section class="section--{% cycle "alternate" "primary" %}">
   <div class="container">
+
     {% if section.value.title %}
       <h2 class="lead page-subheading mb-4">{{ section.value.title }}</h2>
     {% endif %}
 
+    {% if section.block_type == "text_section" %}
     <div class="row">
       <div class="col-12 richtext">
         {{ section.value.text|richtext }}
-      </div><!-- /column -->
-    </div><!-- /row -->
+      </div>
+    </div>
+    {% endif %}
+
+    {% if section.block_type == "gallery_section" %}
+    <div class="row about-images">
+      {% for picture in section.value.images %}
+        {% image picture width-2000 as img %}
+        {% image picture fill-300x200 as thumb %}
+        <div class="col-6 col-md-3 mb-4">
+          <a data-fancybox="gallery" href="{{ img.url }}"><img data-src="{{ thumb.url }}" class="lazyload img-fluid" alt="{{ thumb.alt }}"></a>
+        </div>
+      {% endfor %}
+    </div>
+    {% endif %}
 
-  </div> <!-- /container -->
+  </div>
 </section>
 {% endfor %}