wagtail 6.2.2__py3-none-any.whl → 6.3rc1__py3-none-any.whl

wagtail/images/templates/wagtailimages/images/edit.html

@@ -1,104 +1,75 @@
-{% extends "wagtailadmin/base.html" %}
+{% extends "wagtailadmin/generic/edit.html" %}
 {% load wagtailimages_tags wagtailadmin_tags i18n l10n %}
-{% block titletag %}{% blocktrans trimmed with title=image.title %}Editing image {{ title }}{% endblocktrans %}{% endblock %}
-{% block extra_css %}
-    {{ block.super }}
-
-    {{ form.media.css }}
-{% endblock %}
 
 {% block extra_js %}
     {{ block.super }}
 
-    {{ form.media.js }}
-
     <!-- Focal point chooser -->
     <script src="{% versioned_static 'wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js' %}"></script>
     <script src="{% versioned_static 'wagtailimages/js/vendor/jquery.Jcrop.min.js' %}"></script>
     <script src="{% versioned_static 'wagtailimages/js/focal-point-chooser.js' %}"></script>
 {% endblock %}
 
-{% block content %}
-    {% trans "Editing" as editing_str %}
-    {% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=image.title icon="image" %}
-    {% include "wagtailadmin/shared/non_field_errors.html" %}
+{% block form_content %}
+    <div class="w-grid w-grid-cols-1 sm:w-grid-cols-2 w-gap-8">
+        <div>
+            <input type="hidden" value="{{ next }}" name="next">
+            {% for field in form %}
+                {% if field.name == 'file' %}
+                    {% include "wagtailimages/images/_file_field.html" %}
+                {% elif field.is_hidden %}
+                    {{ field }}
+                {% else %}
+                    {% formattedfield field %}
+                {% endif %}
+            {% endfor %}
+        </div>
+        <div>
+            {% image image max-800x600 as rendition %}
 
-    <form action="{% url 'wagtailimages:edit' image.id %}" method="POST" enctype="multipart/form-data" novalidate>
-        {% csrf_token %}
-        <input type="hidden" value="{{ next }}" name="next">
-        <div class="row row-flush nice-padding">
-            <div class="col6">
-                {% for field in form %}
-                    {% if field.name == 'file' %}
-                        {% include "wagtailimages/images/_file_field.html" %}
-                    {% elif field.is_hidden %}
-                        {{ field }}
-                    {% else %}
-                        {% formattedfield field %}
-                    {% endif %}
-                {% endfor %}
-                <div class="w-hidden sm:w-block">
-                    <input type="submit" value="{% trans 'Save' %}" class="button" />
-                    {% if user_can_delete %}
-                        <a href="{% url 'wagtailimages:delete' image.id %}{% if next %}?next={{ next|urlencode }}{% endif %}" class="button no">{% trans "Delete image" %}</a>
-                    {% endif %}
-                </div>
+            <div
+                class="focal-point-chooser"
+                style="max-width: {{ rendition.width|unlocalize }}px; max-height: {{ rendition.height|unlocalize }}px;"
+                data-focal-point-x="{{ image.focal_point_x|default_if_none:''|unlocalize }}"
+                data-focal-point-y="{{ image.focal_point_y|default_if_none:''|unlocalize }}"
+                data-focal-point-width="{{ image.focal_point_width|default_if_none:''|unlocalize }}"
+                data-focal-point-height="{{ image.focal_point_height|default_if_none:''|unlocalize }}"
+                data-focal-input-label="{% trans 'Image focal point' %}"
+            >
+                <img {{ rendition.attrs }} decoding="async" data-original-width="{{ image.width|unlocalize }}" data-original-height="{{ image.height|unlocalize }}" class="show-transparency">
+                <div class="current-focal-point-indicator{% if not image.has_focal_point %} hidden{% endif %}"></div>
             </div>
 
-            <div class="col6">
-                {% image image max-800x600 as rendition %}
-
-                <div
-                    class="focal-point-chooser"
-                    style="max-width: {{ rendition.width|unlocalize }}px; max-height: {{ rendition.height|unlocalize }}px;"
-                    data-focal-point-x="{{ image.focal_point_x|default_if_none:''|unlocalize }}"
-                    data-focal-point-y="{{ image.focal_point_y|default_if_none:''|unlocalize }}"
-                    data-focal-point-width="{{ image.focal_point_width|default_if_none:''|unlocalize }}"
-                    data-focal-point-height="{{ image.focal_point_height|default_if_none:''|unlocalize }}"
-                    data-focal-input-label="{% trans 'Image focal point' %}"
-                >
-                    <img {{ rendition.attrs }} decoding="async" data-original-width="{{ image.width|unlocalize }}" data-original-height="{{ image.height|unlocalize }}" class="show-transparency">
-                    <div class="current-focal-point-indicator{% if not image.has_focal_point %} hidden{% endif %}"></div>
-                </div>
-
-                {% if url_generator_enabled %}
-                    <a href="{% url 'wagtailimages:url_generator' image.id %}" class="button bicolor button--icon">{% icon name="link" wrapped=1 %}{% trans "URL Generator" %}</a>
-                    <hr />
-                {% endif %}
+            {% if url_generator_url %}
+                <a href="{{ url_generator_url }}" class="button bicolor button--icon">{% icon name="link" wrapped=1 %}{% trans "URL Generator" %}</a>
+                <hr />
+            {% endif %}
 
-                <div class="row">
-                    <div class="col8">
-                        <h2 class="w-label-3">{% trans "Focal point" %} <span class="w-font-normal">{% trans "(optional)" %}</span></h2>
-                        <p>{% trans "To define this image's most important region, drag a box over the image above." %} {% if image.has_focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>
+            <div class="w-grid md:w-grid-cols-3 w-gap-2">
+                <div class="w-col-span-2">
+                    <h2 class="w-label-3">{% trans "Focal point" %} <span class="w-font-normal">{% trans "(optional)" %}</span></h2>
+                    <p>{% trans "To define this image's most important region, drag a box over the image above." %} {% if image.has_focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>
 
-                        <button class="button button-secondary no remove-focal-point" type="button">{% trans "Remove focal area" %}</button>
-                    </div>
-                    <div class="col4">
-                        {% image image original as original_image %}
+                    <button class="button button-secondary no remove-focal-point" type="button">{% trans "Remove focal area" %}</button>
+                </div>
+                <div class="w-col-span-1">
+                    {% image image original as original_image %}
 
-                        <dl>
-                            <dt>{% trans "Max dimensions" %}</dt>
-                            <dd>{{ original_image.width }}x{{ original_image.height }}</dd>
-                            <dt>{% trans "Filesize" %}</dt>
-                            <dd>{% if filesize %}{{ filesize|filesizeformat }}{% else %}{% trans "File not found" %}{% endif %}</dd>
+                    <dl>
+                        <dt>{% trans "Max dimensions" %}</dt>
+                        <dd>{{ original_image.width|unlocalize }}x{{ original_image.height|unlocalize }}</dd>
+                        <dt>{% trans "Filesize" %}</dt>
+                        <dd>{% if filesize %}{{ filesize|filesizeformat }}{% else %}{% trans "File not found" %}{% endif %}</dd>
 
-                            <dt>{% trans "Usage" %}</dt>
-                            <dd>
-                                <a href="{{ image.usage_url }}">{% blocktrans trimmed count usage_count=image.get_usage.count %}Used {{ usage_count }} time{% plural %}Used {{ usage_count }} times{% endblocktrans %}</a>
-                            </dd>
-                        </dl>
-                    </div>
+                        <dt>{% trans "Usage" %}</dt>
+                        <dd>
+                            {% with image.get_usage.count as usage_count_val %}
+                                <a href="{{ image.usage_url }}">{% blocktrans trimmed with usage_count=usage_count_val|intcomma count usage_count_val=usage_count_val %}Used {{ usage_count }} time{% plural %}Used {{ usage_count }} times{% endblocktrans %}</a>
+                            {% endwith %}
+                        </dd>
+                    </dl>
                 </div>
             </div>
         </div>
-
-        <div class="row row-flush nice-padding sm:!w-hidden">
-            <div class="col5">
-                <input type="submit" value="{% trans 'Save' %}" class="button" />
-                {% if user_can_delete %}
-                    <a href="{% url 'wagtailimages:delete' image.id %}{% if next %}?next={{ next }}{% endif %}" class="button no">{% trans "Delete image" %}</a>
-                {% endif %}
-            </div>
-        </div>
-    </form>
+    </div>
 {% endblock %}

wagtail/images/templates/wagtailimages/images/index.html

@@ -3,9 +3,6 @@
 
 {% block extra_js %}
     {{ block.super }}
-    <script>
-        window.wagtailConfig.BULK_ACTION_ITEM_TYPE = 'IMAGE';
-    </script>
     <script defer src="{% versioned_static 'wagtailadmin/js/bulk-actions.js' %}"></script>
 {% endblock %}
 
@@ -24,5 +21,5 @@
 
 {% block bulk_actions %}
     {% trans "Select all images in listing" as select_all_text %}
-    {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text app_label=model_opts.app_label model_name=model_opts.model_name objects=page_obj parent=current_collection.id %}
+    {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text app_label=model_opts.app_label model_name=model_opts.model_name objects=page_obj parent=current_collection.id item_type="IMAGE" %}
 {% endblock %}

wagtail/images/templates/wagtailimages/images/url_generator.html

@@ -10,7 +10,7 @@
 {% endblock %}
 
 {% block main_content %}
-    <div class="w-image-url-generator nice-padding" data-generator-url="{% url 'wagtailimages:generate_url' object.id '__filterspec__' %}">
+    <div class="w-image-url-generator w-mt-8" data-generator-url="{% url 'wagtailimages:generate_url' object.id '__filterspec__' %}">
         <form class="w-image-url-generator__form w-mb-5">
             {% include "wagtailadmin/shared/field.html" with field=form.filter_method %}
             {% field_row max_content=True %}

wagtail/images/templates/wagtailimages/multiple/add.html

@@ -1,4 +1,4 @@
-{% extends "wagtailadmin/base.html" %}
+{% extends "wagtailadmin/generic/base.html" %}
 {% load i18n %}
 {% load l10n %}
 {% load wagtailadmin_tags wagtailimages_tags %}
@@ -9,43 +9,48 @@
     {{ form_media.css }}
 {% endblock %}
 
-{% block content %}
-    {% trans "Add images" as add_str %}
-    {% include "wagtailadmin/shared/header.html" with title=add_str icon="image" %}
+{% block main_content %}
+    <div class="drop-zone w-mt-8">
+        <p>{% trans "Drag and drop images into this area to upload immediately." %}</p>
+        <p>{{ help_text }}</p>
 
-    <div class="nice-padding">
-        <div class="drop-zone">
-            <p>{% trans "Drag and drop images into this area to upload immediately." %}</p>
-            <p>{{ help_text }}</p>
-
-            <form action="{% url 'wagtailimages:add_multiple' %}" method="POST" enctype="multipart/form-data">
-                <div class="replace-file-input">
-                    <button class="button bicolor button--icon">{% icon name="plus" wrapped=1 %}{% trans "Or choose from your computer" %}</button>
-                    <input id="fileupload" type="file" name="files[]" data-url="{% url 'wagtailimages:add_multiple' %}" multiple>
-                </div>
-                {% csrf_token %}
-                {% if collections %}
-                    {% trans "Add to collection:" as label_text %}
-                    {% rawformattedfield label_text=label_text id_for_label="id_addimage_collection" classname="w-mx-auto w-mt-4 w-grid w-justify-center" %}
-                        <select id="id_addimage_collection" name="collection">
-                            {% for pk, display_name in collections.get_indented_choices %}
-                                <option value="{{ pk|unlocalize }}"{% if pk|unlocalize == selected_collection_id %} selected{% endif %} >
-                                    {{ display_name }}
-                                </option>
-                            {% endfor %}
-                        </select>
-                    {% endrawformattedfield %}
-                {% endif %}
-            </form>
-        </div>
-
-        <div id="overall-progress" class="progress progress-secondary">
-            <div class="bar" style="width: 0%;">0%</div>
-        </div>
+        <form action="{% url 'wagtailimages:add_multiple' %}" method="POST" enctype="multipart/form-data">
+            <div class="replace-file-input">
+                <button class="button bicolor button--icon">{% icon name="plus" wrapped=1 %}{% trans "Or choose from your computer" %}</button>
+                <input
+                    id="fileupload"
+                    multiple
+                    name="files[]"
+                    type="file"
+                    data-accept-file-types="/\.({{ allowed_extensions|join:'|' }})$/i"
+                    data-max-file-size="{{ max_filesize|stringformat:'s'|default:'null' }}"
+                    data-max-title-length="{{ max_title_length|stringformat:'s'|default:'null' }}"
+                    data-messages='{"maxFileSize": "{{ error_max_file_size|escapejs }}", "acceptFileTypes": "{{ error_accepted_file_types|escapejs }}"}'
+                    data-url="{% url 'wagtailimages:add_multiple' %}"
+                >
+            </div>
+            {% csrf_token %}
+            {% if collections %}
+                {% trans "Add to collection:" as label_text %}
+                {% rawformattedfield label_text=label_text id_for_label="id_addimage_collection" classname="w-mx-auto w-mt-4 w-grid w-justify-center" %}
+                    <select id="id_addimage_collection" name="collection">
+                        {% for pk, display_name in collections.get_indented_choices %}
+                            <option value="{{ pk|unlocalize }}"{% if pk|unlocalize == selected_collection_id %} selected{% endif %} >
+                                {{ display_name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                {% endrawformattedfield %}
+            {% endif %}
+        </form>
+    </div>
 
-        <ul id="upload-list" class="upload-list multiple"></ul>
+    <div id="overall-progress" class="progress progress-secondary">
+        <div class="bar" style="width: 0%;">0%</div>
     </div>
 
+    <ul id="upload-list" class="upload-list multiple"></ul>
+
     <template id="upload-list-item">
         <li class="row">
             <div class="left col3">
@@ -59,6 +64,7 @@
                 </div>
             </div>
             <div class="right col9">
+                <p class="error-message">{% trans "Please provide an image description to comply with best practices for accessibility." %}</p>
                 <p class="status-msg success">{% trans "Upload successful. Please update this image with a more appropriate title, if necessary. You may also delete the image completely if the upload wasn't required." %}</p>
                 <p class="status-msg warning">
                     {% trans "Upload successful. However, your new image seems to be a duplicate of this existing image. You may delete it if it wasn't required." %}
@@ -93,17 +99,4 @@
 
     <!-- Main script -->
     <script src="{% versioned_static 'wagtailimages/js/add-multiple.js' %}"></script>
-
-    <script>
-        window.fileupload_opts = {
-            simple_upload_url: "{% url 'wagtailimages:add' %}",
-            accepted_file_types: /\.({{ allowed_extensions|join:"|" }})$/i, //must be regex
-            max_file_size: {{ max_filesize|stringformat:"s"|default:"null" }}, //numeric format
-            max_title_length: {{ max_title_length|stringformat:"s"|default:"null" }}, //numeric format
-            errormessages: {
-                max_file_size: "{{ error_max_file_size|escapejs }}",
-                accepted_file_types: "{{ error_accepted_file_types|escapejs }}"
-            }
-        }
-    </script>
 {% endblock %}

wagtail/images/templates/wagtailimages/widgets/image.html

@@ -0,0 +1,5 @@
+{% load wagtailimages_tags %}
+
+<figure>
+    {% image value fill-600x338 loading="lazy" %}
+</figure>

wagtail/images/templates/wagtailimages/widgets/image_chooser.html

@@ -3,5 +3,5 @@
 
 {% block chosen_icon %}
     {# Empty alt because the chosen item’s title is already displayed next to the image. #}
-    <img class="chooser__image" data-chooser-image alt="" class="show-transparency" decoding="async" height="{{ preview.height|unlocalize }}" src="{{ preview.url }}" width="{{ preview.width|unlocalize }}">
+    <img class="chooser__image show-transparency" data-chooser-image alt="" decoding="async" height="{{ preview.height|unlocalize }}" src="{{ preview.url }}" width="{{ preview.width|unlocalize }}">
 {% endblock chosen_icon %}

wagtail/images/tests/test_admin_views.py

@@ -16,6 +16,7 @@ from django.utils.encoding import force_str
 from django.utils.html import escape, escapejs
 from django.utils.http import RFC3986_SUBDELIMS, urlencode
 from django.utils.safestring import mark_safe
+from django.utils.text import capfirst
 from willow.optimizers.base import OptimizerBase
 from willow.registry import registry
 
@@ -37,6 +38,7 @@ from wagtail.test.testapp.models import (
     VariousOnDeleteModel,
 )
 from wagtail.test.utils import WagtailTestUtils
+from wagtail.test.utils.template_tests import AdminTemplateTestUtils
 from wagtail.test.utils.timestamps import local_datetime
 
 from .utils import Image, get_test_image_file, get_test_image_file_svg
@@ -83,12 +85,10 @@ class TestImageIndexView(WagtailTestUtils, TestCase):
         self.assertContains(response, "a cute puppy")
 
     def test_pagination(self):
-        # page numbers in range should be accepted
-        response = self.get({"p": 1})
-        self.assertEqual(response.status_code, 200)
-        # page numbers out of range should return 404
-        response = self.get({"p": 9999})
-        self.assertEqual(response.status_code, 404)
+        pages = ["0", "1", "-1", "9999", "Not a page"]
+        for page in pages:
+            response = self.get({"p": page})
+            self.assertEqual(response.status_code, 200)
 
     def test_pagination_preserves_other_params(self):
         root_collection = Collection.get_first_root_node()
@@ -539,7 +539,7 @@ class TestImageListingResultsView(WagtailTestUtils, TransactionTestCase):
         )
 
 
-class TestImageAddView(WagtailTestUtils, TestCase):
+class TestImageAddView(AdminTemplateTestUtils, WagtailTestUtils, TestCase):
     def setUp(self):
         self.login()
 
@@ -567,6 +567,14 @@ class TestImageAddView(WagtailTestUtils, TestCase):
         # draftail should NOT be a standard JS include on this page
         self.assertNotContains(response, "wagtailadmin/js/draftail.js")
 
+        self.assertBreadcrumbsItemsRendered(
+            [
+                {"url": reverse("wagtailimages:index"), "label": "Images"},
+                {"url": "", "label": "New: Image"},
+            ],
+            response.content,
+        )
+
     def test_get_with_collections(self):
         root_collection = Collection.get_first_root_node()
         root_collection.add_child(name="Evil plans")
@@ -951,7 +959,7 @@ class TestImageAddViewWithLimitedCollectionPermissions(WagtailTestUtils, TestCas
         )
 
 
-class TestImageEditView(WagtailTestUtils, TestCase):
+class TestImageEditView(AdminTemplateTestUtils, WagtailTestUtils, TestCase):
     def setUp(self):
         self.user = self.login()
 
@@ -989,6 +997,14 @@ class TestImageEditView(WagtailTestUtils, TestCase):
         # definitions are being respected)
         self.assertNotContains(response, "wagtailadmin/js/draftail.js")
 
+        self.assertBreadcrumbsItemsRendered(
+            [
+                {"url": reverse("wagtailimages:index"), "label": "Images"},
+                {"url": "", "label": "Test image"},
+            ],
+            response.content,
+        )
+
     def test_simple_with_collection_nesting(self):
         root_collection = Collection.get_first_root_node()
         evil_plans = root_collection.add_child(name="Evil plans")
@@ -1605,6 +1621,10 @@ class TestImageChooserView(WagtailTestUtils, TestCase):
         # draftail should NOT be a standard JS include on this page
         self.assertNotIn("wagtailadmin/js/draftail.js", response_json["html"])
 
+        # upload file field should have accept="image/*"
+        soup = self.get_soup(response_json["html"])
+        self.assertEqual(soup.select_one('input[type="file"]').get("accept"), "image/*")
+
     def test_simple_with_collection_nesting(self):
         root_collection = Collection.get_first_root_node()
         evil_plans = root_collection.add_child(name="Evil plans")
@@ -1614,6 +1634,22 @@ class TestImageChooserView(WagtailTestUtils, TestCase):
         # "Eviler Plans" should be prefixed with &#x21b3 (↳) and 4 non-breaking spaces.
         self.assertContains(response, "    &#x21b3 Eviler plans")
 
+    @override_settings(
+        WAGTAILIMAGES_EXTENSIONS=["gif", "jpg", "jpeg", "png", "webp", "avif", "heic"]
+    )
+    def test_upload_field_accepts_heic(self):
+        response = self.get()
+        self.assertEqual(response.status_code, 200)
+        response_json = json.loads(response.content.decode())
+        self.assertEqual(response_json["step"], "choose")
+        self.assertTemplateUsed(response, "wagtailimages/chooser/chooser.html")
+
+        # upload file field should have an explicit 'accept' case for image/heic
+        soup = self.get_soup(response_json["html"])
+        self.assertEqual(
+            soup.select_one('input[type="file"]').get("accept"), "image/*, image/heic"
+        )
+
     def test_choose_permissions(self):
         # Create group with access to admin and Chooser permission on one Collection, but not another.
         bakers_group = Group.objects.create(name="Bakers")
@@ -2362,7 +2398,7 @@ class TestImageChooserUploadViewWithLimitedPermissions(WagtailTestUtils, TestCas
         )
 
 
-class TestMultipleImageUploader(WagtailTestUtils, TestCase):
+class TestMultipleImageUploader(AdminTemplateTestUtils, WagtailTestUtils, TestCase):
     """
     This tests the multiple image upload views located in wagtailimages/views/multiple.py
     """
@@ -2392,6 +2428,17 @@ class TestMultipleImageUploader(WagtailTestUtils, TestCase):
         # definitions are being respected)
         self.assertNotContains(response, "wagtailadmin/js/draftail.js")
 
+        self.assertBreadcrumbsItemsRendered(
+            [
+                {
+                    "url": reverse("wagtailimages:index"),
+                    "label": capfirst(self.image._meta.verbose_name_plural),
+                },
+                {"url": "", "label": "Add images"},
+            ],
+            response.content,
+        )
+
     @override_settings(WAGTAILIMAGES_MAX_UPLOAD_SIZE=1000)
     def test_add_max_file_size_context_variables(self):
         response = self.client.get(reverse("wagtailimages:add_multiple"))
@@ -3370,7 +3417,7 @@ class TestMultipleImageUploaderWithCustomRequiredFields(WagtailTestUtils, TestCa
         self.assertTrue(response_json["success"])
 
 
-class TestURLGeneratorView(WagtailTestUtils, TestCase):
+class TestURLGeneratorView(AdminTemplateTestUtils, WagtailTestUtils, TestCase):
     def setUp(self):
         # Create an image for running tests on
         self.image = Image.objects.create(
@@ -3393,6 +3440,19 @@ class TestURLGeneratorView(WagtailTestUtils, TestCase):
         # Check response
         self.assertEqual(response.status_code, 200)
         self.assertTemplateUsed(response, "wagtailimages/images/url_generator.html")
+        self.assertTemplateUsed(response, "wagtailadmin/generic/base.html")
+
+        self.assertBreadcrumbsItemsRendered(
+            [
+                {"url": reverse("wagtailimages:index"), "label": "Images"},
+                {
+                    "url": reverse("wagtailimages:edit", args=(self.image.id,)),
+                    "label": "Test image",
+                },
+                {"url": "", "label": "Generate URL", "sublabel": "Test image"},
+            ],
+            response.content,
+        )
 
     def test_get_bad_permissions(self):
         """