Moved URL generator into separate view

wagtail/wagtailimages/admin_urls.py

@@ -5,7 +5,8 @@ urlpatterns = [
     url(r'^$', images.index, name='wagtailimages_index'),
     url(r'^(\d+)/$', images.edit, name='wagtailimages_edit_image'),
     url(r'^(\d+)/delete/$', images.delete, name='wagtailimages_delete_image'),
-    url(r'^(\d+)/generate_url/(.*)/', images.generate_url, name='wagtailimages_generate_url'),
+    url(r'^(\d+)/generate_url/$', images.url_generator, name='wagtailimages_url_generator'),
+    url(r'^(\d+)/generate_url/(.*)/$', images.generate_url, name='wagtailimages_generate_url'),
     url(r'^add/$', images.add, name='wagtailimages_add_image'),
 
     url(r'^chooser/$', chooser.chooser, name='wagtailimages_chooser'),

wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js

@@ -6,6 +6,7 @@ $(function() {
         var $widthField = $form.find('input#id_width');
         var $heightField = $form.find('input#id_height');
         var $result = $this.find('div.result');
+        var $preview = $this.find('img.preview');
 
         var generatorUrl = $this.data('generatorUrl');
 
@@ -33,9 +34,11 @@ $(function() {
             $.getJSON(generatorUrl.replace('__filterspec__', filterSpec))
                 .done(function(data) {
                     $result.text(data['url']);
+                    $preview.attr('src', data['url']);
                 })
                 .fail(function(data) {
                     $result.text(data.responseJSON['error']);
+                    $preview.attr('src', '');
                 });
         }
 

wagtail/wagtailimages/templates/wagtailimages/images/_url_generator.html

@@ -1,12 +0,0 @@
-<div class="image-url-generator" data-generator-url="{% url 'wagtailimages_generate_url' image.id '__filterspec__' %}">
-    <h3>URL generator</h3>
-
-    <form>
-        {% for field in form %}
-            {% include "wagtailadmin/shared/field_as_li.html" %}
-        {% endfor %}
-    </form>
-
-    URL:
-    <div class="result"></div>
-</div>

wagtail/wagtailimages/templates/wagtailimages/images/edit.html

@@ -1,6 +1,5 @@
 {% extends "wagtailadmin/base.html" %}
 {% load wagtailimages_tags %}
-{% load static compress %}
 {% load i18n %}
 {% block titletag %}{% blocktrans with title=image.title %}Editing image {{ title }}{% endblocktrans %}{% endblock %}
 {% block bodyclass %}menu-images{% endblock %}
@@ -10,10 +9,6 @@
 
 {% block extra_js %}
     {% include "wagtailadmin/shared/tag_field_js.html" %}
-
-    {% compress js %}
-        <script type="text/javascript" src="{% static 'wagtailimages/js/image-url-generator.js' %}">
-    {% endcompress %}
 {% endblock %}
 
 {% block content %}
@@ -38,13 +33,13 @@
                     <li><input type="submit" value="{% trans 'Save' %}" /><a href="{% url 'wagtailimages_delete_image' image.id %}" class="button button-secondary no">{% trans "Delete image" %}</a></li>
                 </ul>
             </form>
-
-            {% if url_generator_form %}
-                {% include "wagtailimages/images/_url_generator.html" with form=url_generator_form %}
-            {% endif %}
         </div>
         <div class="col5">
             {% image image max-800x600 %}
+
+            {% if url_generator_enabled %}
+                <a href="{% url 'wagtailimages_url_generator' image.id %}">URL Generator</a>
+            {% endif %}
         </div>
     </div>
 {% endblock %}

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

@@ -0,0 +1,31 @@
+{% extends "wagtailadmin/base.html" %}
+{% load wagtailimages_tags static compress i18n %}
+
+{% block titletag %}{% blocktrans with title=image.title %}Editing image {{ title }}{% endblocktrans %}{% endblock %}
+
+{% block bodyclass %}menu-images{% endblock %}
+
+{% block extra_js %}
+    {% compress js %}
+        <script type="text/javascript" src="{% static 'wagtailimages/js/image-url-generator.js' %}"></script>
+    {% endcompress %}
+{% 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>
+            {% for field in form %}
+                {% include "wagtailadmin/shared/field_as_li.html" %}
+            {% endfor %}
+        </form>
+
+        <h3>URL</h3>
+        <div class="result"></div>
+
+        <h3>Preview</h3>
+        <img class="preview" src="" alt="Preview">
+    </div>
+{% endblock %}

wagtail/wagtailimages/views/images.py

@@ -107,18 +107,33 @@ def edit(request, image_id):
     # Check if we should enable the frontend url generator
     try:
         reverse('wagtailimages_serve', args=('foo', '1', 'bar'))
-        url_generator_form = URLGeneratorForm(initial={
-            'filter_method': 'original',
-            'width': image.width,
-            'height': image.height,
-        })
+        url_generator_enabled = True
     except NoReverseMatch:
-        url_generator_form = None
+        url_generator_enabled = False
 
     return render(request, "wagtailimages/images/edit.html", {
         'image': image,
         'form': form,
-        'url_generator_form': url_generator_form,
+        'url_generator_enabled': url_generator_enabled,
+    })
+
+
+@permission_required('wagtailadmin.access_admin')  # more specific permission tests are applied within the view
+def url_generator(request, image_id):
+    image = get_object_or_404(get_image_model(), id=image_id)
+
+    if not image.is_editable_by_user(request.user):
+        raise PermissionDenied
+
+    form = URLGeneratorForm(initial={
+        'filter_method': 'original',
+        'width': image.width,
+        'height': image.height,
+    })
+
+    return render(request, "wagtailimages/images/url_generator.html", {
+        'image': image,
+        'form': form,
     })