Improve layout of Image URL Generator

- Move preview image to above the 'fold' so it's clearer to users what this page is for
- Avoid the JS driven (non-responsive) alert that shows if the image is too large and instead opt for a simpler CSS approach, allowing the image to overflow with a scrolling container
- Add w-prefixed classes for elements
- Ensure URL has an accessible label
- Relates to #3683

CHANGELOG.txt

@@ -7,6 +7,7 @@ Changelog
  * Added `search_index` option to StreamField blocks to control whether the block is indexed for searching (Vedant Pandey)
  * Remember previous location on returning from page add/edit actions (Robert Rollins)
  * Update settings file in project settings to address Django 4.2 deprecations (Sage Abdullah)
+ * Improve layout and accessibility of the image URL generator page, reduce reliance on JavaScript (Temidayo Azeez)
  * Fix: Update system check for overwriting storage backends to recognise the `STORAGES` setting introduced in Django 4.2 (phijma-leukeleu)
  * Fix: Prevent password change form from raising a validation error when browser autocomplete fills in the "Old password" field (Chiemezuo Akujobi)
  * Fix: Ensure that the legacy dropdown options, when closed, do not get accidentally clicked by other interactions wide viewports (CheesyPhoenix, Christer Jensen)

docs/releases/6.0.md

@@ -17,6 +17,7 @@ depth: 1
  * Added `search_index` option to StreamField blocks to control whether the block is indexed for searching (Vedant Pandey)
  * Remember previous location on returning from page add/edit actions (Robert Rollins)
  * Update settings file in project settings to address Django 4.2 deprecations (Sage Abdullah)
+ * Improve layout and accessibility of the image URL generator page, reduce reliance on JavaScript (Temidayo Azeez)
 
 ### Bug fixes
 

wagtail/images/static_src/wagtailimages/js/image-url-generator.js

@@ -1,5 +1,5 @@
 $(function () {
-  $('.image-url-generator').each(function () {
+  $('[data-generator-url]').each(function () {
     var $this = $(this);
     var $form = $this.find('form');
     var $filterMethodField = $form.find('select#id_filter_method');
@@ -9,7 +9,6 @@ $(function () {
     var $result = $this.find('#result-url');
     var $loadingMask = $this.find('.loading-mask');
     var $preview = $this.find('img.preview');
-    var $sizeNote = $('#note-size');
 
     var generatorUrl = $this.data('generatorUrl');
 
@@ -55,13 +54,6 @@ $(function () {
         }
       }
 
-      // Display note about scaled down images if image is large
-      if ($widthField.val() > $(window).width()) {
-        $sizeNote.show();
-      } else {
-        $sizeNote.hide();
-      }
-
       // Fields with width and height
       $.getJSON(generatorUrl.replace('__filterspec__', filterSpec))
         .done(function (data) {

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

@@ -3,12 +3,20 @@
 
 {% block titletag %}{% blocktrans trimmed with title=image.title %}Editing image {{ title }}{% endblocktrans %}{% endblock %}
 
+{% block extra_css %}
+    <style>
+        .loading-mask {
+            max-height: clamp(25rem, 50vh, 50rem);
+        }
+    </style>
+{% endblock %}
+
 {% block content %}
     {% trans "Generating URL" as title_str %}
     {% include "wagtailadmin/shared/header.html" with title=title_str subtitle=image.title icon="image" %}
 
-    <div class="image-url-generator nice-padding" data-generator-url="{% url 'wagtailimages:generate_url' image.id '__filterspec__' %}">
-        <form class="w-mb-10">
+    <div class="w-image-url-generator nice-padding" data-generator-url="{% url 'wagtailimages:generate_url' image.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 %}
                 {% include "wagtailadmin/shared/field.html" with field=form.width %}
@@ -17,19 +25,18 @@
             {% endfield_row %}
         </form>
 
-        {% trans "URL" as heading %}
-        {% panel id="url" icon="link" heading=heading %}
-            <textarea id="result-url" rows="1" data-controller="w-action" data-action="focus->w-action#select"></textarea>
-        {% endpanel %}
-
         {% trans "Preview" as heading %}
         {% panel id="preview" icon="view" heading=heading %}
-            <div>
-                <div class="loading-mask inline-block">
-                    <img class="preview" src="" alt="{% trans 'Preview' %}" />
+            <div class="w-image-url-generator__preview">
+                <div class="loading-mask w-block w-border-2 w-border-border-furniture w-overflow-scroll w-p-4 w-rounded-sm">
+                    <img class="preview w-max-w-none" src="" alt="{% trans 'Preview' %}" />
                 </div>
             </div>
-            <p id="note-size" class="help-block help-warning">{% icon name='warning' %}{% trans "Note that images generated larger than the screen will appear smaller when previewed here, so they fit the screen." %}</p>
+        {% endpanel %}
+
+        {% trans "URL" as heading %}
+        {% panel id="url" icon="link" heading=heading %}
+            <textarea class="w-image-url-generator__url" id="result-url" aria-labelledby="url-heading" rows="1" data-controller="w-action" data-action="focus->w-action#select"></textarea>
         {% endpanel %}
     </div>
 {% endblock %}