From eaf237ffcb18c28943a41104f8114a0ee2b6ca77 Mon Sep 17 00:00:00 2001 From: Temidayo32 Date: Fri, 3 Nov 2023 10:44:48 +0100 Subject: [PATCH] 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 | 1 + docs/releases/6.0.md | 1 + .../wagtailimages/js/image-url-generator.js | 10 +------ .../wagtailimages/images/url_generator.html | 29 ++++++++++++------- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 03f179e2e8..002f77a9b3 100644 --- a/CHANGELOG.txt +++ b/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) diff --git a/docs/releases/6.0.md b/docs/releases/6.0.md index bc891c24a0..e8ef5c80a9 100644 --- a/docs/releases/6.0.md +++ b/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 diff --git a/wagtail/images/static_src/wagtailimages/js/image-url-generator.js b/wagtail/images/static_src/wagtailimages/js/image-url-generator.js index c9e50748ae..88c4b53ab1 100644 --- a/wagtail/images/static_src/wagtailimages/js/image-url-generator.js +++ b/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) { diff --git a/wagtail/images/templates/wagtailimages/images/url_generator.html b/wagtail/images/templates/wagtailimages/images/url_generator.html index 3ff4e20a4e..396aa5e448 100644 --- a/wagtail/images/templates/wagtailimages/images/url_generator.html +++ b/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 %} + +{% endblock %} + {% block content %} {% trans "Generating URL" as title_str %} {% include "wagtailadmin/shared/header.html" with title=title_str subtitle=image.title icon="image" %} -
-
+
+ {% 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 %} - {% trans "URL" as heading %} - {% panel id="url" icon="link" heading=heading %} - - {% endpanel %} - {% trans "Preview" as heading %} {% panel id="preview" icon="view" heading=heading %} -
-
- {% trans 'Preview' %} +
+
+ {% trans 'Preview' %}
-

{% icon name='warning' %}{% trans "Note that images generated larger than the screen will appear smaller when previewed here, so they fit the screen." %}

+ {% endpanel %} + + {% trans "URL" as heading %} + {% panel id="url" icon="link" heading=heading %} + {% endpanel %}
{% endblock %}