扩展ImageChooserPanel以允许多个选择和上传

Question

我正在考虑将现有网页迁移到令人讨厌的状态.然而,该页面的主要部分是图像画廊,总共有数千个图像和数百个画廊.此外,该页面分为几个站点,只允许编辑者更改一个特定站点的内容.

由于集合不是分层的,它们不提供将图像收集到图像库中的便捷方式,如果它们的数量增加,则选择框会变得容易混淆.

我已经定义了一个page包含ParentalKey在图像中的派生类,它足以实现图像库.但是,逐个为图库选择200个图像并不是非常用户友好.因此,我认为我应该扩展ImageChooserPanel到类似a的东西MultipleImageChooserPanel,这将允许选择和上传多个图像.用于上传多个图像的代码应该是可用的.

阅读代码后wagtailimages/views/multiple.py,wagtailadmin/edit_handlers.py所有相应的父类和,我仍然看不到模态如何ImageChooserPanel判断所选择的图像和它如何id被返回.据推测,大多数情况发生在JS中,但是,我找不到任何提示在哪里寻找相应的代码,也没有任何关于如何扩展它的提示.

是否可以扩展模态ImageChooserPanel？任何人都可以指向我的代码片段开始？

Answer 1

WagtailCollections在 2.11（2020 年 11 月）中添加了对层次结构的支持。

这使得实现最初的目标成为可能，即提供一种更简单的方法来选择一组更易于维护的图像。为了同样的目的，Wagtail 面包店演示应用程序中使用了该方法（请参阅 参考资料GalleryPage）。

代码示例

下面是实现类似方法的相关代码片段。

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