diff --git a/wagtail/images/templates/wagtailimages/images/edit.html b/wagtail/images/templates/wagtailimages/images/edit.html
index 5169e9d376..b3e8c52280 100644
--- a/wagtail/images/templates/wagtailimages/images/edit.html
+++ b/wagtail/images/templates/wagtailimages/images/edit.html
@@ -10,85 +10,66 @@
<script src="{% versioned_static 'wagtailimages/js/focal-point-chooser.js' %}"></script>
{% endblock %}
-{% block main_content %}
- <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">
- <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 can_delete %}
- <a href="{{ delete_url }}{% if next %}?next={{ next|urlencode }}{% endif %}" class="button no">{% trans "Delete image" %}</a>
- {% endif %}
- </div>
+{% block fields %}
+ <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 %}
+
+ <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 %}
+ {% 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="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 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="w-col-span-1">
+ {% image image original as original_image %}
- {% 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 %}
+ <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>
- <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>
-
- <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 %}
-
- <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>
- {% 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>
+ <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 sm:!w-hidden">
- <div class="col5">
- <input type="submit" value="{% trans 'Save' %}" class="button" />
- {% if can_delete %}
- <a href="{{ delete_url }}{% if next %}?next={{ next }}{% endif %}" class="button no">{% trans "Delete image" %}</a>
- {% endif %}
- </div>
- </div>
- </form>
+ </div>
{% endblock %}
diff --git a/wagtail/images/views/images.py b/wagtail/images/views/images.py
index 30d849974d..456f8bb3ed 100644
--- a/wagtail/images/views/images.py
+++ b/wagtail/images/views/images.py
@@ -131,8 +131,10 @@ class EditView(generic.EditView):
index_url_name = "wagtailimages:index"
edit_url_name = "wagtailimages:edit"
delete_url_name = "wagtailimages:delete"
+ url_generator_url_name = "wagtailimages:url_generator"
header_icon = "image"
context_object_name = "image"
+ delete_item_label = gettext_lazy("Delete image")
_show_breadcrumbs = True
@cached_property
@@ -193,9 +195,11 @@ class EditView(generic.EditView):
try:
reverse("wagtailimages_serve", args=("foo", "1", "bar"))
- context["url_generator_enabled"] = True
+ context["url_generator_url"] = reverse(
+ self.url_generator_url_name, args=(self.object.id,)
+ )
except NoReverseMatch:
- context["url_generator_enabled"] = False
+ context["url_generator_url"] = None
return context