Extending ImageChooserPanel to allow multiple selections and uploads

Question

I am thinking about migrating an existing webpage to wagtail. However, a major part of the page are image galleries, with a total of some thousand images and some hundred galleries. Furthermore, the page is divided into several sites, with editors only allowed to change the content for one specific site.

Since the collections are not hierachical, they do not provide a convenient way to collect images into image galleries, the select boxes get confusingly long if their number grows.

I have defined a page-derived class that contains ParentalKey to images, which is sufficient to implement an image gallery. However, it is not very user-friendly to select, say, 200 images for the gallery one by one. Thus I thought I should extend the ImageChooserPanel to something like aMultipleImageChooserPanel, which would allow selecting and uploading multiple images. The code for uploading multiple images should be available in wagtail.

After reading the code for wagtailimages/views/multiple.py, wagtailadmin/edit_handlers.py and all the corresponding parent classes, I still do not see how the modal ImageChooserPanel determines the selected image and how its id is returned. Presumably, most of this happens in JS, however, I cannot find any hint where to look for the corresponding code, nor any hints on how to extend it.

Is it possible to extend the modal ImageChooserPanel? Could anyone point me to a code snippet to start with?

Answer 1

Wagtail added support for Collections with hierarchy in 2.11 (November 2020).

This makes it possible to achieve the original goal of providing an easier way to select a group of images much more maintainable. The approach is used in the Wagtail bakery demo application for this very same purpose (see GalleryPage).

Code Example

Below are the relevant code snippets to achieve a similar approach.

models.py

from django import forms
from django.db import models

from wagtail.admin.edit_handlers import FieldPanel
from wagtail.core.models import Collection, Page
from wagtail.images import get_image_model


class CustomSelect(forms.Select):
    """Allow for visual representation of 'depth' of collection in select"""

    def create_option(self, name, value, *args, **kwargs):
        option_dict = super().create_option(name, value, *args, **kwargs)
        instance = getattr(value, 'instance', None)
        if instance:
            option_dict['label'] = instance.get_indented_name()
        return option_dict

class GalleryPage(Page):

    collection = models.ForeignKey(
        Collection,
        limit_choices_to=~models.Q(name__in=['Root']), # do not allow 'root' selection
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        help_text='Select the image collection for this gallery.'
    )

    content_panels = Page.content_panels + [
        FieldPanel('collection', widget=CustomSelect),
        # ... other panels
    ]

    def get_collection_images(self):
        return get_image_model().objects.filter(collection=self.collection)

gallery_page.html

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

{% block content %}
<div class="row">
  {% for img in page.get_collection_images %}
    {% image img fill-285x200-c100 as img_obj %}
    <div class="col-sm-6">
      <figure class="gallery-figure">
          <img src="{{img_obj.url}}" class="img-responsive" />
          <figcaption>{{ img.title }}</figcaption>
      </figure>
    </div>
  {% endfor %}
</div>
{% endblock content %}

Answer 2

Update: As of Wagtail 4.2 (February 2023) this is now a native feature

A new panel type MultipleChooserPanel is now available. This is a variant of InlinePanel which improves the editor experience when adding large numbers of linked item - rather than creating and populating each sub-form individually, a chooser modal is opened allowing multiple objects to be selected at once.

# ... other imports
from wagtail.admin.panels import FieldPanel, MultipleChooserPanel


class BlogPageGalleryImage(Orderable):
    """
    Example related image
    """

    page = ParentalKey(BlogPage, on_delete=models.CASCADE, related_name='gallery_images')
    image = models.ForeignKey(
        'wagtailimages.Image', on_delete=models.CASCADE, related_name='+'
    )
    caption = models.CharField(blank=True, max_length=250)

    panels = [
        FieldPanel('image'),
        FieldPanel('caption'),
    ]


class BlogPage(Page:
    # ... other fields

    # Used in the same way as `InlinePanel`
    content_panels = Page.content_panels + [
        MultipleChooserPanel(
            'gallery_images',
            label="Gallery images",
            chooser_field_name="image",
        )
    ]

Example pulled from release notes & docs

• https://docs.wagtail.org/en/v4.2/releases/4.2.html#multiple-chooser-panel
• https://docs.wagtail.org/en/v4.2/reference/pages/panels.html#multiple-chooser-panel

Answer 3

@chris-h wrote a rather nice answer in a similar issue, where you can use the ImageChooserBlock instead of a custom dropdown select form: https://stackoverflow.com/a/57215050

I like that answer because it makes for a better UX.