Image Galleries

from wagtail.models import Collection, Page

class GalleryPage(Page):
    """
    This is a page to list locations from the selected Collection. We use a Q
    object to list any Collection created (/admin/collections/) even if they
    contain no items. In this demo we use it for a GalleryPage,
    and is intended to show the extensibility of this aspect of Wagtail
    """
    introduction = models.TextField(
        help_text="Text to describe the page",
        blank=True
    )
    image = models.ForeignKey(
        "wagtailimages.Image",
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name="+",
        help_text="Landscape mode only; horizontal width between 1000px and 3000px.",
    )
    body = StreamField(
        BaseStreamBlock(),
        verbose_name="Page body",
        blank=True,
        use_json_field=True
    )
    collection = models.ForeignKey(
        Collection,
        limit_choices_to=~models.Q(name__in=["Root"]),
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        help_text="Select the image collection for this gallery.",
    )

    content_panels = Page.content_panels + [
        FieldPanel("introduction"),
        FieldPanel("body"),
        FieldPanel("image"),
        FieldPanel("collection"),
    ]

    # Defining what content type can sit under the parent
    subpage_types = []

    api_fields = [
        APIField("introduction"),
        APIField("image"),
        APIField("body"),
        APIField("collection"),
    ]

{% extends "base.html" %}
{% load wagtailimages_tags gallery_tags %}

{% block content %}
    {% include "base/include/header-hero.html" %}

    <div class="container gallery__container">
        <div class="row">
            <div class="col-md-8">
                {% if page.introduction %}
                    <p class="gallery__introduction">{{ page.introduction }}</p>
                {% endif %}
            </div>
        </div>
        <div class="gallery__grid">
            {% gallery page.collection %}
        </div>
    </div>
{% endblock content %}

from django import template
from wagtail.images.models import Image

register = template.Library()

@register.inclusion_tag("tags/gallery.html", takes_context=True)
def gallery(context, gallery):
    """Retrieves a single gallery item and returns a gallery of images"""
    images = Image.objects.filter(collection=gallery)

    return {
        "images": images,
        "request": context["request"],
    }

from wagtail.images.models import Image
from wagtail.api import APIField

# Allow filtering by collection
Image.api_fields = [APIField("collection")]

WAGTAILIMAGES_AVIF_QUALITY = 60

from wagtail.images.blocks import ImageChooserBlock
from wagtail.blocks import StructBlock, CharBlock

class CaptionedImageBlock(StructBlock):
    """
    Custom `StructBlock` for utilizing images with associated caption and
    attribution data
    """
    image = ImageChooserBlock(required=True)
    caption = CharBlock(required=False)
    attribution = CharBlock(required=False)

    class Meta:
        icon = "image"
        template = "blocks/captioned_image_block.html"
        description = "An image with optional caption and attribution"

class BaseStreamBlock(StreamBlock):
    """Define the custom blocks that StreamField will utilize"""
    heading_block = HeadingBlock()
    paragraph_block = RichTextBlock()
    image_block = CaptionedImageBlock()
    # ... other blocks