扩展 ImageChooserPanel 以允许多选和上传答案

【问题标题】：Extending ImageChooserPanel to allow multiple selections and uploads扩展 ImageChooserPanel 以允许多选和上传
【发布时间】：2017-02-21 23:58:16
【问题描述】：

我正在考虑将现有网页迁移到 wagtail。但是，页面的主要部分是图片库，总共有几千张图片和几百张图片库。此外，该页面分为多个站点，编辑者只允许更改一个特定站点的内容。

由于集合不是分层的，因此它们不提供将图像收集到图像库中的便捷方式，如果数量增加，选择框会变得令人困惑。

我已经定义了一个page 派生类，其中包含ParentalKey 到图像，这足以实现一个图像库。但是，一张一张地为画廊选择 200 张图片并不是很方便。因此，我认为我应该将ImageChooserPanel 扩展为类似于MultipleImageChooserPanel 的东西，这样就可以选择和上传多个图像。上传多张图片的代码应该在 wagtail 中可用。

在阅读了wagtailimages/views/multiple.py、wagtailadmin/edit_handlers.py 和所有相应父类的代码后，我仍然没有看到模态ImageChooserPanel 是如何确定所选图像的，以及它的id 是如何返回的。想必这大部分都发生在 JS 中，但是我找不到任何提示在哪里寻找相应的代码，也没有任何关于如何扩展它的提示。

是否可以扩展模态ImageChooserPanel？谁能指点我从代码 sn-p 开始？

【问题讨论】：

我们也在运行/调查这个。仅供参考，有两张鹡鸰票，一张专门针对图像#1717，另一张用于更通用的解决方案#2203。那里还没有多少进展，但也许你想订阅它们。
还有一个处理集合层次结构的正在进行的拉取请求 - #3407
谢谢！我想收藏可以作为一种解决方法（如果您需要重复使用画廊，收藏是最好的）。
虽然实现多选 ImageChooserPanel 的通用方法仍然缺失，但我已经找到了针对我的具体问题的解决方案。我已经概述了详细信息on github。
我曾经摆弄过一些选择器：fourdigits.nl/blog/tutorial-filter-wagtail-snippets-by-tag

标签： wagtail

【解决方案1】：

Wagtail 增加了对 Collections with hierarchy in 2.11 (November 2020) 的支持。

这可以实现最初的目标，即提供一种更简单的方法来选择一组更易于维护的图像。该方法在 Wagtail bakery 演示应用程序中用于同样的目的 (see GalleryPage)。

代码示例

下面是sn-ps实现类似方法的相关代码。

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

【讨论】：