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 @@