[feat] Add bulk action ui to images listing

client/scss/components/_listing.scss

@@ -491,6 +491,10 @@ ul.listing {
         @include transition(border-color 0.2s ease);
         border: 3px solid $color-white;
     }
+
+    &.images .bulk-action-checkbox-container {
+        text-align: left;
+    }
 }
 
 .bulk-actions-choices {
@@ -787,7 +791,8 @@ table.listing {
             }
         }
 
-        tr:hover {
+        tr:hover,
+        li:hover {
             .no-children a,
             .bulk-action-checkbox {
                 opacity: 1;

wagtail/admin/templatetags/wagtailadmin_tags.py

@@ -508,6 +508,7 @@ def bulk_action_choices(context, hook_name):
     corresponding_urls = {
         'register_page_bulk_action': 'wagtailadmin_page_bulk_action',
         'register_document_bulk_action': 'wagtaildocs:document_bulk_action',
+        'register_image_bulk_action': 'wagtailimages:image_bulk_action',
     }
     if hook_name not in corresponding_urls:
         return {'buttons': []}

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

@@ -0,0 +1,10 @@
+{% extends 'wagtailadmin/bulk_actions/confirmation/list_objects_with_no_access.html' %}
+{% load i18n %}
+
+{% block per_object %}
+    {% if object.can_edit %}
+    <a href="{% url 'wagtailimages:edit' object.image.id %}" target="_blank" rel="noopener noreferrer">{{ object.image.title }}</a>
+    {% else %}
+    {{ object.image.title }}
+    {% endif %}
+{% endblock per_object %}

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

@@ -19,6 +19,7 @@
             })
         });
     </script>
+    <script defer src="{% versioned_static 'wagtailadmin/js/bulk-actions.js' %}"></script>
 {% endblock %}
 
 {% block content %}
@@ -64,6 +65,8 @@
         <div id="image-results">
             {% include "wagtailimages/images/results.html" %}
         </div>
+        {% trans "Select all images in listing" as select_all_text %}
+        {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text bulk_action_register_hook='register_image_bulk_action' %}
     </div>
 
 {% endblock %}

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

@@ -16,8 +16,12 @@
     {% endif %}
 
     <ul class="listing horiz images">
+        {% trans "Select image" as checkbox_aria_label %}
         {% for image in images %}
             <li>
+                <div class="bulk-action-checkbox-container">
+                    {% include 'wagtailadmin/bulk_actions/listing_checkbox_cell.html' with obj_type='image' obj=image aria_label=checkbox_aria_label %}
+                </div>
                 <a class="image-choice" title="{% if collections %}{{ image.collection.name }} » {% endif %}{{ image.title }}" href="{% url 'wagtailimages:edit' image.id %}">
                     <figure>
                         {% include "wagtailimages/images/results_image.html" %}