diff --git a/wagtail/wagtailimages/forms.py b/wagtail/wagtailimages/forms.py index 5c38efc32..ffbaab59c 100644 --- a/wagtail/wagtailimages/forms.py +++ b/wagtail/wagtailimages/forms.py @@ -1,5 +1,6 @@ from django import forms from django.forms.models import modelform_factory +from django.utils.translation import ugettext as _ from wagtail.wagtailimages.models import get_image_model from wagtail.wagtailimages.formats import get_image_formats @@ -24,3 +25,19 @@ class ImageInsertionForm(forms.Form): widget=forms.RadioSelect ) alt_text = forms.CharField() + + +class URLGeneratorForm(forms.Form): + filter_method = forms.ChoiceField( + label=_("Filter"), + choices=( + ('original', _("Original size")), + ('width', _("Resize to width")), + ('height', _("Resize to height")), + ('min', _("Resize to min")), + ('max', _("Resize to max")), + ('fill', _("Resize to fill")), + ), + ) + width = forms.IntegerField(_("Width"), min_value=0) + height = forms.IntegerField(_("Height"), min_value=0) diff --git a/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js b/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js index 736ae6a75..c75bb44e5 100644 --- a/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js +++ b/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js @@ -1,19 +1,46 @@ $(function() { $('.image-url-generator').each(function() { var $this = $(this); - var $filter = $this.find('input.filter'); + var $form = $this.find('form'); + var $filterMethodField = $form.find('select#id_filter_method'); + var $widthField = $form.find('input#id_width'); + var $heightField = $form.find('input#id_height'); var $result = $this.find('div.result'); var generatorUrl = $this.data('generatorUrl'); - $filter.keyup(function() { - $.getJSON(generatorUrl.replace('__filterspec__', $filter.val())) + function formChangeHandler() { + var filterSpec = $filterMethodField.val(); + + if (filterSpec == 'original') { + $widthField.prop('disabled', true); + $heightField.prop('disabled', true); + } else if (filterSpec == 'width') { + $widthField.prop('disabled', false); + $heightField.prop('disabled', true); + filterSpec += '-' + $widthField.val(); + } else if (filterSpec == 'height') { + $widthField.prop('disabled', true); + $heightField.prop('disabled', false); + filterSpec += '-' + $heightField.val(); + } else if (filterSpec == 'min' || filterSpec == 'max' || filterSpec == 'fill') { + $widthField.prop('disabled', false); + $heightField.prop('disabled', false); + filterSpec += '-' + $widthField.val() + 'x' + $heightField.val(); + } + + // Fields with width and height + $.getJSON(generatorUrl.replace('__filterspec__', filterSpec)) .done(function(data) { $result.text(data['url']); }) .fail(function(data) { $result.text(data.responseJSON['error']); }); - }); + } + + $form.change(formChangeHandler); + $form.keyup(formChangeHandler); + formChangeHandler(); }); }); diff --git a/wagtail/wagtailimages/templates/wagtailimages/images/_url_generator.html b/wagtail/wagtailimages/templates/wagtailimages/images/_url_generator.html index 608eafd13..21535722b 100644 --- a/wagtail/wagtailimages/templates/wagtailimages/images/_url_generator.html +++ b/wagtail/wagtailimages/templates/wagtailimages/images/_url_generator.html @@ -1,8 +1,11 @@

URL generator

- Filter spec: - +
+ {% for field in form %} + {% include "wagtailadmin/shared/field_as_li.html" %} + {% endfor %} +
URL:
diff --git a/wagtail/wagtailimages/templates/wagtailimages/images/edit.html b/wagtail/wagtailimages/templates/wagtailimages/images/edit.html index e30d96aaa..5d179ce9b 100644 --- a/wagtail/wagtailimages/templates/wagtailimages/images/edit.html +++ b/wagtail/wagtailimages/templates/wagtailimages/images/edit.html @@ -39,8 +39,8 @@ - {% if url_generator_enabled %} - {% include "wagtailimages/images/_url_generator.html" %} + {% if url_generator_form %} + {% include "wagtailimages/images/_url_generator.html" with form=url_generator_form %} {% endif %}
diff --git a/wagtail/wagtailimages/views/images.py b/wagtail/wagtailimages/views/images.py index e502ed2e6..fdfa2e4f6 100644 --- a/wagtail/wagtailimages/views/images.py +++ b/wagtail/wagtailimages/views/images.py @@ -14,7 +14,7 @@ from wagtail.wagtailcore.models import Site from wagtail.wagtailadmin.forms import SearchForm from wagtail.wagtailimages.models import get_image_model -from wagtail.wagtailimages.forms import get_image_form +from wagtail.wagtailimages.forms import get_image_form, URLGeneratorForm from wagtail.wagtailimages.utils import parse_filter_spec, InvalidFilterSpecError, generate_signature @@ -107,14 +107,18 @@ def edit(request, image_id): # Check if we should enable the frontend url generator try: reverse('wagtailimages_serve', args=('foo', '1', 'bar')) - url_generator_enabled = True + url_generator_form = URLGeneratorForm(initial={ + 'filter_method': 'original', + 'width': image.width, + 'height': image.height, + }) except NoReverseMatch: - url_generator_enabled = False + url_generator_form = None return render(request, "wagtailimages/images/edit.html", { 'image': image, 'form': form, - 'url_generator_enabled': url_generator_enabled, + 'url_generator_form': url_generator_form, })