{% extends "_layouts/cp" %} {% import "_includes/forms" as forms %} {% set crumbs = [ { label: "Settings"|t('app'), url: url('settings') }, { label: "Assets"|t('app'), url: url('settings/assets') }, { label: "Image Transforms"|t('app'), url: url('settings/assets/transforms') } ] %} {% set fullPageForm = true %} {% block content %} {{ actionInput('asset-transforms/save-transform') }} {{ redirectInput('settings/assets/transforms') }} {% if transform.id %}{{ hiddenInput('transformId', transform.id) }}{% endif %} {{ forms.textField({ first: true, label: "Name"|t('app'), id: 'name', name: 'name', value: (transform is defined ? transform.name : null), errors: (transform is defined ? transform.getErrors('name') : null), autofocus: true, required: true, }) }} {{ forms.textField({ label: "Handle"|t('app'), id: "handle", name: "handle", class: 'code', autocorrect: false, autocapitalize: false, value: (transform is defined ? transform.handle : null), errors: (transform is defined ? transform.getErrors('handle') : null), required: true, }) }} {% set modeInput %}
{% endset %} {{ forms.field({ label: "Mode"|t('app') }, modeInput) }} {{ forms.textField({ label: "Width"|t('app'), id: "width", name: "width", size: 5, value: (transform is defined ? transform.width : null), errors: (transform is defined ? transform.getErrors('width') : null), }) }} {{ forms.textField({ label: "Height"|t('app'), id: "height", name: "height", size: 5, value: (transform is defined ? transform.height : null), errors: (transform is defined ? transform.getErrors('height') : null), }) }} {{ forms.selectField({ label: "Quality"|t('app'), id: "quality", name: "quality", options: [ {label: 'Auto'|t('app'), value: '0'}, {label: 'Low'|t('app'), value: '10'}, {label: 'Medium'|t('app'), value: '30'}, {label: 'High'|t('app'), value: '60'}, {label: 'Very High (Recommended)'|t('app'), value: '82'}, {label: 'Maximum'|t('app'), value: '100'}, ], value: (transform is defined ? transform.quality : 82), errors: (transform is defined ? transform.getErrors('quality') : null), }) }} {{ forms.selectField({ label: "Interlacing"|t('app'), id: "interlace", name: "interlace", options: [ {label: 'None'|t('app'), value: 'none'}, {label: 'Line'|t('app'), value: 'line'}, {label: 'Plane'|t('app'), value: 'plane'}, {label: 'Partition'|t('app'), value: 'partition'}, ], value: (transform is defined ? transform.interlace : 'none'), errors: (transform is defined ? transform.getErrors('interlace') : null), }) }} {% set formatOptions = [ {label: 'Auto', value: null}, {label: 'jpg', value: 'jpg'}, {label: 'png', value: 'png'}, {label: 'gif', value: 'gif'}, ] %} {% if (transform is defined and transform.format == 'webp') or craft.app.images.supportsWebP %} {% set formatOptions = formatOptions|merge([{label: 'webp', value: 'webp'}]) %} {% endif %} {% if (transform is defined and transform.format == 'avif') or craft.app.images.supportsAvif %} {% set formatOptions = formatOptions|merge([{label: 'avif', value: 'avif'}]) %} {% endif %} {{ forms.selectField({ label: "Image Format"|t('app'), id: "format", name: "format", instructions: "The image format that transformed images should use."|t('app'), value: (transform is defined ? transform.format : null), errors: (transform is defined ? transform.getErrors('format') : null), options: formatOptions, }) }} {% endblock %} {% js %} {% if transform is not defined or not transform.handle %}new Craft.HandleGenerator('#name', '#handle');{% endif %} $('#mode input').change(function() { if ($(this).val() == 'crop') { $('#position-container').removeClass('hidden'); } else { $('#position-container').addClass('hidden'); } }) {% endjs %}