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

wagtail/images/models.py

@@ -7,11 +7,12 @@ import logging
 import os.path
 import re
 import time
-from collections import OrderedDict, defaultdict
+from collections import OrderedDict, defaultdict, namedtuple
+from collections.abc import Iterable
 from contextlib import contextmanager
 from io import BytesIO
 from tempfile import SpooledTemporaryFile
-from typing import Any, Dict, Iterable, List, Optional, Union
+from typing import Any
 
 import willow
 from django.apps import apps
@@ -38,7 +39,6 @@ from wagtail.images.exceptions import (
     InvalidFilterSpecError,
     UnknownOutputImageFormatError,
 )
-from wagtail.images.fields import image_format_name_to_content_type
 from wagtail.images.image_operations import (
     FilterOperation,
     FormatOperation,
@@ -62,6 +62,7 @@ IMAGE_FORMAT_EXTENSIONS = {
     "webp": ".webp",
     "svg": ".svg",
     "ico": ".ico",
+    "heic": ".heic",
 }
 
 
@@ -262,6 +263,12 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
         width_field="width",
         height_field="height",
     )
+    description = models.CharField(
+        blank=True,
+        max_length=255,
+        verbose_name=_("description"),
+        default="",
+    )
     width = models.IntegerField(verbose_name=_("width"), editable=False)
     height = models.IntegerField(verbose_name=_("height"), editable=False)
     created_at = models.DateTimeField(
@@ -292,6 +299,11 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
 
     objects = ImageQuerySet.as_manager()
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.decorative = False
+        self.contextual_alt_text = None
+
     def _set_file_hash(self):
         with self.open_file() as f:
             self.file_hash = hash_filelike(f)
@@ -365,6 +377,36 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
     def __str__(self):
         return self.title
 
+    def __eq__(self, other):
+        """
+        Customise the definition of equality so that two Image instances referring to the same
+        image but different contextual alt text or decorative status are considered different.
+        All other aspects are copied from Django's base `Model` implementation.
+        """
+        if not isinstance(other, models.Model):
+            return NotImplemented
+
+        if self._meta.concrete_model != other._meta.concrete_model:
+            return False
+
+        my_pk = self.pk
+        if my_pk is None:
+            return self is other
+
+        return (
+            my_pk == other.pk
+            and other.contextual_alt_text == self.contextual_alt_text
+            and other.decorative == self.decorative
+        )
+
+    def __hash__(self):
+        """
+        Match the semantics of the custom equality definition.
+        """
+        if self.pk is None:
+            raise TypeError("Model instances without primary key value are unhashable")
+        return hash((self.pk, self.contextual_alt_text, self.decorative))
+
     def get_rect(self):
         return Rect(0, 0, self.width, self.height)
 
@@ -442,12 +484,12 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
         """Get the Rendition model for this Image model"""
         return cls.renditions.rel.related_model
 
-    def _get_prefetched_renditions(self) -> Union[Iterable["AbstractRendition"], None]:
+    def _get_prefetched_renditions(self) -> Iterable[AbstractRendition] | None:
         if "renditions" in getattr(self, "_prefetched_objects_cache", {}):
             return self.renditions.all()
         return getattr(self, "prefetched_renditions", None)
 
-    def _add_to_prefetched_renditions(self, rendition: "AbstractRendition") -> None:
+    def _add_to_prefetched_renditions(self, rendition: AbstractRendition) -> None:
         # Reuse this rendition if requested again from this object
         try:
             self._prefetched_objects_cache["renditions"]._result_cache.append(rendition)
@@ -458,7 +500,7 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
         except AttributeError:
             pass
 
-    def get_rendition(self, filter: Union["Filter", str]) -> "AbstractRendition":
+    def get_rendition(self, filter: Filter | str) -> AbstractRendition:
         """
         Returns a ``Rendition`` instance with a ``file`` field value (an
         image) reflecting the supplied ``filter`` value and focal point values
@@ -486,7 +528,7 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
 
         return rendition
 
-    def find_existing_rendition(self, filter: "Filter") -> "AbstractRendition":
+    def find_existing_rendition(self, filter: Filter) -> AbstractRendition:
         """
         Returns an existing ``Rendition`` instance with a ``file`` field value
         (an image) reflecting the supplied ``filter`` value and focal point
@@ -505,7 +547,7 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
         except KeyError:
             raise Rendition.DoesNotExist
 
-    def create_rendition(self, filter: "Filter") -> "AbstractRendition":
+    def create_rendition(self, filter: Filter) -> AbstractRendition:
         """
         Creates and returns a ``Rendition`` instance with a ``file`` field
         value (an image) reflecting the supplied ``filter`` value and focal
@@ -526,9 +568,7 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
         )
         return rendition
 
-    def get_renditions(
-        self, *filters: Union["Filter", str]
-    ) -> Dict[str, "AbstractRendition"]:
+    def get_renditions(self, *filters: Filter | str) -> dict[str, AbstractRendition]:
         """
         Returns a ``dict`` of ``Rendition`` instances with image files reflecting
         the supplied ``filters``, keyed by filter spec patterns.
@@ -566,8 +606,8 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
         return {filter.spec: renditions[filter] for filter in filters}
 
     def find_existing_renditions(
-        self, *filters: "Filter"
-    ) -> Dict["Filter", "AbstractRendition"]:
+        self, *filters: Filter
+    ) -> dict[Filter, AbstractRendition]:
         """
         Returns a dictionary of existing ``Rendition`` instances with ``file``
         values (images) reflecting the supplied ``filters`` and the focal point
@@ -578,8 +618,8 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
         created before, the return value will be an empty dict.
         """
         Rendition = self.get_rendition_model()
-        filters_by_spec: Dict[str, Filter] = {f.spec: f for f in filters}
-        found: Dict[Filter, AbstractRendition] = {}
+        filters_by_spec: dict[str, Filter] = {f.spec: f for f in filters}
+        found: dict[Filter, AbstractRendition] = {}
 
         # Interrogate prefetched values first (where available)
         prefetched_renditions = self._get_prefetched_renditions()
@@ -589,7 +629,7 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
             # prefetched value, and further cache/database lookups are avoided.
 
             # group renditions by the filters of interest
-            potential_matches: Dict[Filter, List[AbstractRendition]] = defaultdict(list)
+            potential_matches: dict[Filter, list[AbstractRendition]] = defaultdict(list)
             for rendition in prefetched_renditions:
                 try:
                     filter = filters_by_spec[rendition.filter_spec]
@@ -621,6 +661,9 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
             ]
             for rendition in Rendition.cache_backend.get_many(cache_keys).values():
                 filter = filters_by_spec[rendition.filter_spec]
+                # The retrieved rendition needs to be associated with the current image instance, so that any
+                # locally-set properties such as contextual_alt_text are respected
+                rendition.image = self
                 found[filter] = rendition
 
             # For items not found in the cache, look in the database
@@ -637,9 +680,7 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
                     found[filter] = rendition
         return found
 
-    def create_renditions(
-        self, *filters: "Filter"
-    ) -> Dict["Filter", "AbstractRendition"]:
+    def create_renditions(self, *filters: Filter) -> dict[Filter, AbstractRendition]:
         """
         Creates multiple ``Rendition`` instances with image files reflecting the supplied
         ``filters``, and returns them as a ``dict`` keyed by the relevant ``Filter`` instance.
@@ -664,8 +705,8 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
             filter = filters[0]
             return {filter: self.create_rendition(filter)}
 
-        return_value: Dict[Filter, AbstractRendition] = {}
-        filter_map: Dict[str, Filter] = {f.spec: f for f in filters}
+        return_value: dict[Filter, AbstractRendition] = {}
+        filter_map: dict[str, Filter] = {f.spec: f for f in filters}
 
         # Read file contents into memory
         with self.open_file() as file:
@@ -688,7 +729,7 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
         # identical renditions in the meantime, we should find them to avoid clashes.
         # NB: Clashes can still occur, because there is no get_or_create() equivalent
         # for multiple objects. However, this will reduce that risk considerably.
-        files_for_deletion: List[File] = []
+        files_for_deletion: list[File] = []
 
         # Assemble Q() to identify potential clashes
         lookup_q = Q()
@@ -724,8 +765,8 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
         return return_value
 
     def generate_rendition_instance(
-        self, filter: "Filter", source: BytesIO
-    ) -> "AbstractRendition":
+        self, filter: Filter, source: BytesIO
+    ) -> AbstractRendition:
         """
         Use the supplied ``source`` image to create and return an
         **unsaved** ``Rendition`` instance, with a ``file`` value reflecting
@@ -740,7 +781,7 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
             ),
         )
 
-    def generate_rendition_file(self, filter: "Filter", *, source: File = None) -> File:
+    def generate_rendition_file(self, filter: Filter, *, source: File = None) -> File:
         """
         Generates an in-memory image matching the supplied ``filter`` value
         and focal point value from this object, wraps it in a ``File`` object
@@ -827,9 +868,9 @@ class AbstractImage(ImageFileMixin, CollectionMember, index.Indexed, models.Mode
     @property
     def default_alt_text(self):
         # by default the alt text field (used in rich text insertion) is populated
-        # from the title. Subclasses might provide a separate alt field, and
-        # override this
-        return self.title
+        # from the description. In the absence of that, it is populated from the title.
+        # Subclasses might provide a separate alt field, and override this
+        return getattr(self, "description", None) or self.title
 
     def is_editable_by_user(self, user):
         from wagtail.images.permissions import permission_policy
@@ -844,6 +885,7 @@ class Image(AbstractImage):
     admin_form_fields = (
         "title",
         "file",
+        "description",
         "collection",
         "tags",
         "focal_point_x",
@@ -877,7 +919,7 @@ class Filter:
         self.spec = spec
 
     @classmethod
-    def expand_spec(self, spec: Union["str", Iterable["str"]]) -> List["str"]:
+    def expand_spec(self, spec: str | Iterable[str]) -> list[str]:
         """
         Converts a spec pattern with brace-expansions, into a list of spec patterns.
         For example, "width-{100,200}" becomes ["width-100", "width-200"].
@@ -995,11 +1037,12 @@ class Filter:
                 # Developer specified an output format
                 output_format = env["output-format"]
             else:
-                # Convert bmp and webp to png by default
+                # Convert avif, bmp and webp to png, and heic to jpg, by default
                 default_conversions = {
                     "avif": "png",
                     "bmp": "png",
                     "webp": "png",
+                    "heic": "jpeg",
                 }
 
                 # Convert unanimated GIFs to PNG as well
@@ -1058,6 +1101,20 @@ class Filter:
                 else:
                     quality = getattr(settings, "WAGTAILIMAGES_AVIF_QUALITY", 80)
                 return willow.save_as_avif(output, quality=quality)
+            elif output_format == "heic":
+                # Allow changing of HEIC compression quality. Safari is the only browser that supports HEIC,
+                # so there is little value in outputting it - for that reason, we make it work if someone
+                # explicitly requests it, but these settings are not documented.
+                if (
+                    "output-format-options" in env
+                    and "lossless" in env["output-format-options"]
+                ):
+                    return willow.save_as_heic(output, lossless=True)
+                elif "heic-quality" in env:
+                    quality = env["heic-quality"]
+                else:
+                    quality = getattr(settings, "WAGTAILIMAGES_HEIC_QUALITY", 80)
+                return willow.save_as_heic(output, quality=quality)
             elif output_format == "svg":
                 return willow.save_as_svg(output)
             elif output_format == "ico":
@@ -1092,14 +1149,14 @@ class ResponsiveImage:
 
     def __init__(
         self,
-        renditions: Dict[str, "AbstractRendition"],
-        attrs: Optional[Dict[str, Any]] = None,
+        renditions: dict[str, AbstractRendition],
+        attrs: dict[str, Any] | None = None,
     ):
         self.renditions = list(renditions.values())
         self.attrs = attrs
 
     @classmethod
-    def get_width_srcset(cls, renditions_list: List["AbstractRendition"]):
+    def get_width_srcset(cls, renditions_list: list[AbstractRendition]):
         if len(renditions_list) == 1:
             # No point in using width descriptors if there is a single image.
             return renditions_list[0].url
@@ -1122,32 +1179,41 @@ class ResponsiveImage:
     def __bool__(self):
         return bool(self.renditions)
 
-    def __eq__(self, other: "ResponsiveImage"):
+    def __eq__(self, other: ResponsiveImage):
         if isinstance(other, ResponsiveImage):
             return self.renditions == other.renditions and self.attrs == other.attrs
         return False
 
 
+FileFormat = namedtuple("FileFormat", ["name", "mime_type"])
+
+
 class Picture(ResponsiveImage):
     # Keep this separate from FormatOperation.supported_formats,
     # as the order our formats are defined in is essential for the picture tag.
     # Defines the order of <source> elements in the tag when format operations
     # are in use, and the priority order to identify the "fallback" format.
     # The browser will pick the first supported format in this list.
-    source_format_order = ["avif", "webp", "jpeg", "png", "gif"]
+    source_format_order = [
+        FileFormat("avif", "image/avif"),
+        FileFormat("webp", "image/webp"),
+        FileFormat("jpeg", "image/jpeg"),
+        FileFormat("png", "image/png"),
+        FileFormat("gif", "image/gif"),
+    ]
 
     def __init__(
         self,
-        renditions: Dict[str, "AbstractRendition"],
-        attrs: Optional[Dict[str, Any]] = None,
+        renditions: dict[str, AbstractRendition],
+        attrs: dict[str, Any] | None = None,
     ):
         super().__init__(renditions, attrs)
         # Store renditions grouped by format separately for access from templates.
         self.formats = self.get_formats(renditions)
 
     def get_formats(
-        self, renditions: Dict[str, "AbstractRendition"]
-    ) -> Dict[str, List["AbstractRendition"]]:
+        self, renditions: dict[str, AbstractRendition]
+    ) -> dict[str, list[AbstractRendition]]:
         """
         Group renditions by the format they are for, if any.
         If there is only one format, no grouping is required.
@@ -1167,8 +1233,8 @@ class Picture(ResponsiveImage):
 
     def get_fallback_format(self):
         for fmt in reversed(self.source_format_order):
-            if fmt in self.formats:
-                return fmt
+            if fmt.name in self.formats:
+                return fmt.name
 
     def __html__(self):
         # If there aren’t multiple formats, render a vanilla img tag with srcset.
@@ -1184,9 +1250,9 @@ class Picture(ResponsiveImage):
         sources = []
 
         for fmt in self.source_format_order:
-            if fmt != fallback_format and fmt in self.formats:
-                srcset = self.get_width_srcset(self.formats[fmt])
-                mime = image_format_name_to_content_type(fmt)
+            if fmt.name != fallback_format and fmt.name in self.formats:
+                srcset = self.get_width_srcset(self.formats[fmt.name])
+                mime = fmt.mime_type
                 sources.append(f'<source srcset="{srcset}" {sizes}type="{mime}">')
 
         if len(fallback_renditions) > 1:
@@ -1221,7 +1287,16 @@ class AbstractRendition(ImageFileMixin, models.Model):
 
     @property
     def alt(self):
-        return self.image.default_alt_text
+        # 'decorative' and 'contextual_alt_text' exist only for ImageBlock
+        if hasattr(self.image, "decorative") and self.image.decorative:
+            return ""
+        elif (
+            hasattr(self.image, "contextual_alt_text")
+            and self.image.contextual_alt_text
+        ):
+            return self.image.contextual_alt_text
+        else:
+            return self.image.default_alt_text
 
     @property
     def attrs(self):

wagtail/images/rich_text/__init__.py

@@ -1,5 +1,3 @@
-from typing import List
-
 from wagtail.images import get_image_model
 from wagtail.images.formats import get_image_format
 from wagtail.rich_text import EmbedHandler
@@ -19,7 +17,7 @@ class ImageEmbedHandler(EmbedHandler):
         return cls.expand_db_attributes_many([attrs])[0]
 
     @classmethod
-    def expand_db_attributes_many(cls, attrs_list: List[dict]) -> List[str]:
+    def expand_db_attributes_many(cls, attrs_list: list[dict]) -> list[str]:
         """
         Given a dict of attributes from the <embed> tag, return the real HTML
         representation for use on the front-end.

wagtail/images/static/wagtailimages/js/add-multiple.js

@@ -1 +1 @@
-$((function(){$(document).on("drop dragover",(function(e){e.preventDefault()})),$("#fileupload").fileupload({dataType:"html",sequentialUploads:!0,dropZone:$(".drop-zone"),acceptFileTypes:window.fileupload_opts.accepted_file_types,maxFileSize:window.fileupload_opts.max_file_size,previewMinWidth:150,previewMaxWidth:150,previewMinHeight:150,previewMaxHeight:150,messages:{acceptFileTypes:window.fileupload_opts.errormessages.accepted_file_types,maxFileSize:window.fileupload_opts.errormessages.max_file_size},add:function(e,t){var a=$(this),o=a.data("blueimp-fileupload")||a.data("fileupload"),s=$($("#upload-list-item").html()).addClass("upload-uploading"),i=o.options;$("#upload-list").append(s),t.context=s,t.process((function(){return a.fileupload("process",t)})).always((function(){t.context.removeClass("processing"),t.context.find(".left").each((function(e,a){$(a).append(escapeHtml(t.files[e].name))})),t.context.find(".preview .thumb").each((function(e,a){$(a).find(".icon").remove(),$(a).append(t.files[e].preview)}))})).done((function(){t.context.find(".start").prop("disabled",!1),!1!==o._trigger("added",e,t)&&(i.autoUpload||t.autoUpload)&&!1!==t.autoUpload&&t.submit()})).fail((function(){t.files.error&&t.context.each((function(e){var a=t.files[e].error;a&&$(this).find(".error_messages").html(a)}))}))},processfail:function(e,t){$(t.context).removeClass("upload-uploading").addClass("upload-failure")},progress:function(e,t){if(e.isDefaultPrevented())return!1;var a=Math.floor(t.loaded/t.total*100);t.context.each((function(){$(this).find(".progress").addClass("active").attr("aria-valuenow",a).find(".bar").css("width",a+"%").html(a+"%")}))},progressall:function(e,t){var a=parseInt(t.loaded/t.total*100,10);$("#overall-progress").addClass("active").attr("aria-valuenow",a).find(".bar").css("width",a+"%").html(a+"%"),a>=100&&$("#overall-progress").removeClass("active").find(".bar").css("width","0%")},formData:function(e){var t=this.files[0].name,a={title:t.replace(/\.[^.]+$/,"")},o=window.fileupload_opts.max_title_length;return e.get(0).dispatchEvent(new CustomEvent("wagtail:images-upload",{bubbles:!0,cancelable:!0,detail:{data:a,filename:t,maxTitleLength:o}}))?e.serializeArray().concat({name:"title",value:a.title}):e.serializeArray()},done:function(e,t){var a=$(t.context),o=JSON.parse(t.result);o.success?o.duplicate?(a.addClass("upload-duplicate"),$(".right",a).append(o.confirm_duplicate_upload),$(".confirm-duplicate-upload",a).on("click",".confirm-upload",(function(e){e.preventDefault(),$(this).closest(".confirm-duplicate-upload").remove(),$(".right",a).append(o.form)}))):(a.addClass("upload-success"),$(".right",a).append(o.form)):(a.addClass("upload-failure"),$(".right .error_messages",a).append(o.error_message))},fail:function(e,t){var a=$(t.context),o=$(".server-error",a);$(".error-text",o).text(t.errorThrown),$(".error-code",o).text(t.jqXHR.status),a.addClass("upload-server-error")},always:function(e,t){$(t.context).removeClass("upload-uploading").addClass("upload-complete")}}),$("#upload-list").on("submit","form",(function(e){var t=$(this),a=new FormData(this),o=t.closest("#upload-list > li");e.preventDefault(),$.ajax({contentType:!1,data:a,processData:!1,type:"POST",url:this.action}).done((function(e){if(e.success){var a=$(".status-msg.update-success").first().text();document.dispatchEvent(new CustomEvent("w-messages:add",{detail:{clear:!0,text:a,type:"success"}})),o.slideUp((function(){$(this).remove()}))}else t.replaceWith(e.form)}))})),$("#upload-list").on("click",".delete",(function(e){var t=$(this).closest("form"),a=t.closest("#upload-list > li");e.preventDefault();var o=$('input[name="csrfmiddlewaretoken"]',t).val();$.post(this.href,{csrfmiddlewaretoken:o},(function(e){e.success&&a.slideUp((function(){$(this).remove()}))}))}))}));
+$((function(){$(document).on("drop dragover",(function(e){e.preventDefault()})),$("#fileupload").fileupload({dataType:"html",sequentialUploads:!0,dropZone:$(".drop-zone"),previewMinWidth:150,previewMaxWidth:150,previewMinHeight:150,previewMaxHeight:150,add:function(e,t){var a=$(this),o=a.data("blueimp-fileupload")||a.data("fileupload"),s=$($("#upload-list-item").html()).addClass("upload-uploading"),i=o.options;$("#upload-list").append(s),t.context=s,t.process((function(){return a.fileupload("process",t)})).always((function(){t.context.removeClass("processing"),t.context.find(".left").each((function(e,a){$(a).append(escapeHtml(t.files[e].name))})),t.context.find(".preview .thumb").each((function(e,a){$(a).find(".icon").remove(),$(a).append(t.files[e].preview)}))})).done((function(){t.context.find(".start").prop("disabled",!1),!1!==o._trigger("added",e,t)&&(i.autoUpload||t.autoUpload)&&!1!==t.autoUpload&&t.submit()})).fail((function(){t.files.error&&t.context.each((function(e){var a=t.files[e].error;a&&$(this).find(".error_messages").html(a)}))}))},processfail:function(e,t){$(t.context).removeClass("upload-uploading").addClass("upload-failure")},progress:function(e,t){if(e.isDefaultPrevented())return!1;var a=Math.floor(t.loaded/t.total*100);t.context.each((function(){$(this).find(".progress").addClass("active").attr("aria-valuenow",a).find(".bar").css("width",a+"%").html(a+"%")}))},progressall:function(e,t){var a=parseInt(t.loaded/t.total*100,10);$("#overall-progress").addClass("active").attr("aria-valuenow",a).find(".bar").css("width",a+"%").html(a+"%"),a>=100&&$("#overall-progress").removeClass("active").find(".bar").css("width","0%")},formData:function(e){var t=this.files[0].name,a={title:t.replace(/\.[^.]+$/,"")};return e.get(0).dispatchEvent(new CustomEvent("wagtail:images-upload",{bubbles:!0,cancelable:!0,detail:{data:a,filename:t,maxTitleLength:this.maxTitleLength}}))?e.serializeArray().concat({name:"title",value:a.title}):e.serializeArray()},done:function(e,t){var a=$(t.context),o=JSON.parse(t.result);o.success?o.duplicate?(a.addClass("upload-duplicate"),$(".right",a).append(o.confirm_duplicate_upload),$(".confirm-duplicate-upload",a).on("click",".confirm-upload",(function(e){e.preventDefault(),$(this).closest(".confirm-duplicate-upload").remove(),$(".right",a).append(o.form)}))):(a.addClass("upload-success"),$(".right",a).append(o.form)):(a.addClass("upload-failure"),$(".right .error_messages",a).append(o.error_message))},fail:function(e,t){var a=$(t.context),o=$(".server-error",a);$(".error-text",o).text(t.errorThrown),$(".error-code",o).text(t.jqXHR.status),a.addClass("upload-server-error")},always:function(e,t){$(t.context).removeClass("upload-uploading").addClass("upload-complete")}}),$("#upload-list").on("submit","form",(function(e){var t=$(this),a=new FormData(this),o=t.closest("#upload-list > li");e.preventDefault(),$.ajax({contentType:!1,data:a,processData:!1,type:"POST",url:this.action}).done((function(e){if(e.success){var a=$(".status-msg.update-success").first().text();document.dispatchEvent(new CustomEvent("w-messages:add",{detail:{clear:!0,text:a,type:"success"}})),o.slideUp((function(){$(this).remove()}))}else t.replaceWith(e.form)}))})),$("#upload-list").on("click",".delete",(function(e){var t=$(this).closest("form"),a=t.closest("#upload-list > li");e.preventDefault();var o=$('input[name="csrfmiddlewaretoken"]',t).val();$.post(this.href,{csrfmiddlewaretoken:o},(function(e){e.success&&a.slideUp((function(){$(this).remove()}))}))}))}));

wagtail/images/static/wagtailimages/js/image-block.js

@@ -0,0 +1 @@
+(()=>{class e extends window.wagtailStreamField.blocks.StructBlockDefinition{render(e,t,d,i){const n=super.render(e,t,d,i),r=document.getElementById(`${t}-alt_text`),a=document.getElementById(`${t}-decorative`),l=()=>{a.checked?r.setAttribute("disabled",!0):r.removeAttribute("disabled")};return l(),a.addEventListener("change",l),n}}window.telepath.register("wagtail.images.blocks.ImageBlock",e)})();

wagtail/images/templates/wagtailimages/bulk_actions/confirm_bulk_add_tags.html

@@ -1,7 +1,11 @@
 {% extends 'wagtailadmin/bulk_actions/confirmation/base.html' %}
 {% load i18n %}
 {% load wagtailimages_tags wagtailadmin_tags %}
-{% block titletag %}{% blocktrans trimmed count counter=items|length %}Add tags to 1 image {% plural %}Add tags to {{ counter }} images{% endblocktrans %}{% endblock %}
+{% block titletag %}
+    {% with counter_val=items|length %}
+        {% blocktrans trimmed with counter=counter_val|intcomma count counter_val=counter_val %}Add tags to 1 image {% plural %}Add tags to {{ counter }} images{% endblocktrans %}
+    {% endwith %}
+{% endblock %}
 
 {% block header %}
     {% trans "Add tags to images" as add_str %}

wagtail/images/templates/wagtailimages/bulk_actions/confirm_bulk_add_to_collection.html

@@ -1,7 +1,11 @@
 {% extends 'wagtailadmin/bulk_actions/confirmation/base.html' %}
 {% load i18n %}
 {% load wagtailimages_tags wagtailadmin_tags %}
-{% block titletag %}{% blocktrans trimmed count counter=items|length %}Add 1 image to new collection {% plural %}Add {{ counter }} images to new collection{% endblocktrans %}{% endblock %}
+{% block titletag %}
+    {% with counter_val=items|length %}
+        {% blocktrans trimmed with counter=counter_val|intcomma count counter_val=counter_val %}Add 1 image to new collection {% plural %}Add {{ counter }} images to new collection{% endblocktrans %}
+    {% endwith %}
+{% endblock %}
 
 {% block header %}
     {% trans "Add images to collection" as add_str %}

wagtail/images/templates/wagtailimages/bulk_actions/confirm_bulk_delete.html

@@ -1,6 +1,10 @@
 {% extends 'wagtailadmin/bulk_actions/confirmation/base.html' %}
 {% load wagtailadmin_tags i18n %}
-{% block titletag %}{% blocktrans trimmed count counter=items|length %}Delete 1 image{% plural %}Delete {{ counter }} images{% endblocktrans %}{% endblock %}
+{% block titletag %}
+    {% with counter_val=items|length %}
+        {% blocktrans trimmed with counter=counter_val|intcomma count counter_val=counter_val %}Delete 1 image{% plural %}Delete {{ counter }} images{% endblocktrans %}
+    {% endwith %}
+{% endblock %}
 
 {% block header %}
     {% trans "Delete images" as del_str %}
@@ -18,10 +22,12 @@
         </p>
         <ul>
             {% for image in items %}
-                <li>
-                    <a href="{% url 'wagtailimages:edit' image.item.id %}" target="_blank" rel="noreferrer">{{image.item.title}}</a>
-                    (<a href="{{ image.item.usage_url }}">{% blocktrans trimmed count usage_count=image.item.get_usage.count %}Used {{ usage_count }} time{% plural %}Used {{ usage_count }} times{% endblocktrans %}</a>)
-                </li>
+                {% with usage_count_val=image.item.get_usage.count %}
+                    <li>
+                        <a href="{% url 'wagtailimages:edit' image.item.id %}" target="_blank" rel="noreferrer">{{image.item.title}}</a>
+                        (<a href="{{ image.item.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>)
+                    </li>
+                {% endwith %}
             {% endfor %}
         </ul>
     {% endif %}

wagtail/images/templates/wagtailimages/chooser/results.html

@@ -1,5 +1,5 @@
 {% extends "wagtailadmin/generic/chooser/results.html" %}
-{% load i18n wagtailimages_tags wagtailadmin_tags l10n %}
+{% load i18n wagtailimages_tags wagtailadmin_tags %}
 
 {% block listing_title %}<h2>{% trans "Latest images" %}</h2>{% endblock %}
 
@@ -11,7 +11,7 @@
                     <label title="Select {% if collections %}{{ image.collection.name }} » {% endif %}{{ image.title }}">
                         <div class="image">{% image image max-165x165 class="show-transparency" %}</div>
                         <h3>
-                            <input type="checkbox" data-multiple-choice-select name="id" value="{{ image.id|unlocalize }}" title="{% blocktrans trimmed with title=image.title %}Select {{ title }}{% endblocktrans %}">
+                            <input type="checkbox" data-multiple-choice-select name="id" value="{{ image.id }}" title="{% blocktrans trimmed with title=image.title %}Select {{ title }}{% endblocktrans %}">
                             {{ image.title|ellipsistrim:60 }}
                         </h3>
                     </label>

wagtail/images/templates/wagtailimages/homepage/site_summary_images.html

@@ -4,9 +4,9 @@
     {% icon name="image" %}
     <a href="{% url 'wagtailimages:index' %}">
         {% blocktrans trimmed count counter=total_images with total_images|intcomma as total %}
-            <span>{{ total }}</span> Image <span class="w-sr-only">created in {{ site_name }}</span>
+            {{ total }} Image <span class="w-sr-only">created in {{ site_name }}</span>
         {% plural %}
-            <span>{{ total }}</span> Images <span class="w-sr-only">created in {{ site_name }}</span>
+            {{ total }} Images <span class="w-sr-only">created in {{ site_name }}</span>
         {% endblocktrans %}
     </a>
 </li>

wagtail/images/templates/wagtailimages/images/_file_field.html

@@ -1,8 +1,8 @@
-{% load i18n wagtailadmin_tags wagtailimages_tags %}
+{% load i18n wagtailadmin_tags wagtailimages_tags l10n %}
 {% rawformattedfield field=field %}
     {% image image original as original_image %}
 
-    <a href="{{ original_image.url }}">{% icon name="image" classname="default" %}{{ image.filename }}</a> ({{ original_image.width }}x{{ original_image.height}})<br /><br />
+    <a href="{{ original_image.url }}">{% icon name="image" classname="default" %}{{ image.filename }}</a> ({{ original_image.width|unlocalize }}x{{ original_image.height|unlocalize }})<br /><br />
 
     {% trans "Change image file:" %}
     {{ field }}

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

@@ -1,13 +1,10 @@
-{% extends "wagtailadmin/base.html" %}
-{% load wagtailimages_tags wagtailadmin_tags %}
-{% load i18n %}
+{% extends "wagtailadmin/generic/form.html" %}
+{% load wagtailimages_tags wagtailadmin_tags i18n %}
 {% block titletag %}{% trans "Add an image" %}{% endblock %}
 
 {% block extra_js %}
     {{ block.super }}
 
-    {{ form.media.js }}
-
     <script>
         $(function() {
             $('#id_file').on(
@@ -39,30 +36,15 @@
     </script>
 {% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-    {{ form.media.css }}
-{% endblock %}
-
-{% block content %}
-    {% trans "Add image" as add_str %}
-    {% include "wagtailadmin/shared/header.html" with title=add_str icon="image" %}
-
-    <div class="nice-padding">
-        {% include "wagtailadmin/shared/non_field_errors.html" %}
-
-        <form action="{% url 'wagtailimages:add' %}" method="POST" enctype="multipart/form-data" novalidate>
-            {% csrf_token %}
-            <ul class="fields">
-                {% for field in form %}
-                    {% if field.is_hidden %}
-                        {{ field }}
-                    {% else %}
-                        <li>{% formattedfield field %}</li>
-                    {% endif %}
-                {% endfor %}
-                <li><input type="submit" value="{% trans 'Save' %}" class="button" /></li>
-            </ul>
-        </form>
-    </div>
+{% block actions %}
+    <button
+        type="submit"
+        class="button button-longrunning"
+        data-controller="w-progress"
+        data-action="w-progress#activate"
+        data-w-progress-active-value="{% trans 'Uploading…' %}"
+    >
+        {% icon name="spinner" %}
+        <em data-w-progress-target="label">{% trans 'Upload' %}</em>
+    </button>
 {% endblock %}