{% extends "forms/field.html.twig" %} {% block field %} {% set value = (value is null ? field.default : value) %} {% set pagemedia = config.get('plugins.admin.pagemedia') %} {% set pagemedia_settings = { resolution: { min: { width: pagemedia.res_min_width ?: null, height: pagemedia.res_min_height ?: null }, max: { width: pagemedia.res_max_width ?: null, height: pagemedia.res_max_height ?: null } }, resizeWidth: pagemedia.resize_width ?: null, resizeHeight: pagemedia.resize_height ?: null, resizeQuality: pagemedia.resize_quality ?: 0.8 } %} {% set route = admin ? admin.route : grav.uri.route() %} <div class="form-field grid vertical {% if field.classes is defined %}{{ field.classes }}{% endif %}"> <div class="form-label"> <label>{{ field.label|tu }}</label> </div> <div class="form-data form-uploads-wrapper"> {% set uploadLimit = grav.config.system.media.upload_limit / 1024 / 1024 %} {% set dropzoneSettings = { maxFilesize: uploadLimit }|merge(pagemedia_settings) %} <div id="grav-dropzone" class="form-input-file dropzone" {% if admin %} data-media-url="{{ base_url }}/media/{{ route|trim('/') }}.json" data-media-local="{{ base_url_relative_frontend|rtrim('/') }}/{{ route|trim('/') }}" data-media-path="{{ url(context.relativePagePath) }}" data-media-uri="{{ context.mediaUri }}" data-dropzone-options="{{ dropzoneSettings|json_encode|e('html_attr') }}" data-dropzone-field="{{ (scope ~ field.name)|fieldName }}" {% else %} data-media-url="{{ base_url }}/{{ route|trim('/') }}.json" data-dropzone-options="{{ dropzoneSettings|json_encode|e('html_attr') }}" data-dropzone-field="{{ (scope ~ field.name)|fieldName }}" {% endif %} ></div> {% if not admin or admin.session.expert == '0' %} <input type="hidden" name="{{ (scope ~ field.name)|fieldName }}" value="{{ value|e }}" /> {% endif %} </div> </div> {% if grav.browser.browser == 'msie' and grav.browser.version < 12 %} {% do assets.addJs('plugin://form/assets/object.assign.polyfill.js') %} {% endif %} {% do assets.addJs('jquery', 101) %} {% do assets.addJs('plugin://form/assets/form.vendor.js', { 'loading': 'defer', 'group': 'bottom' }) %} {% do assets.addJs('plugin://form/assets/form.min.js', { 'loading': 'defer', 'group': 'bottom' }) %} {% do assets.addCss('plugin://form/assets/dropzone.min.css', { 'group': 'form'}) %} {{ assets.css('form')|raw }} {% do assets.addInlineJs(" window.GravForm = window.GravForm || {}; window.GravForm = Object.assign({}, window.GravForm, { translations: { PLUGIN_FORM: { 'DROPZONE_CANCEL_UPLOAD': " ~ 'PLUGIN_FORM.DROPZONE_CANCEL_UPLOAD'|t|json_encode ~ ", 'DROPZONE_CANCEL_UPLOAD_CONFIRMATION': " ~ 'PLUGIN_FORM.DROPZONE_CANCEL_UPLOAD_CONFIRMATION'|t|json_encode ~ ", 'DROPZONE_DEFAULT_MESSAGE': " ~ 'PLUGIN_FORM.DROPZONE_DEFAULT_MESSAGE'|t|json_encode ~ ", 'DROPZONE_FALLBACK_MESSAGE': " ~ 'PLUGIN_FORM.DROPZONE_FALLBACK_MESSAGE'|t|json_encode ~ ", 'DROPZONE_FALLBACK_TEXT': " ~ 'PLUGIN_FORM.DROPZONE_FALLBACK_TEXT'|t|json_encode ~ ", 'DROPZONE_FILE_TOO_BIG': " ~ 'PLUGIN_FORM.DROPZONE_FILE_TOO_BIG'|t|json_encode ~ ", 'DROPZONE_INVALID_FILE_TYPE': " ~ 'PLUGIN_FORM.DROPZONE_INVALID_FILE_TYPE'|t|json_encode ~ ", 'DROPZONE_MAX_FILES_EXCEEDED': " ~ 'PLUGIN_FORM.DROPZONE_MAX_FILES_EXCEEDED'|t|json_encode ~ ", 'DROPZONE_REMOVE_FILE': " ~ 'PLUGIN_FORM.DROPZONE_REMOVE_FILE'|t|json_encode ~ ", 'DROPZONE_REMOVE_FILE_CONFIRMATION': " ~ 'PLUGIN_FORM.DROPZONE_REMOVE_FILE_CONFIRMATION'|t|json_encode ~ ", 'DROPZONE_RESPONSE_ERROR': " ~ 'PLUGIN_FORM.DROPZONE_RESPONSE_ERROR'|t|json_encode ~ ", 'RESOLUTION_MIN': " ~ 'PLUGIN_FORM.RESOLUTION_MIN'|t|json_encode ~ ", 'RESOLUTION_MAX': " ~ 'PLUGIN_FORM.RESOLUTION_MAX'|t|json_encode ~ " } } }); ", { 'group': 'bottom', 'position': 'before' }) %} {% if not config.flex.pagemedia.dropzone.template %} {% do config.set('flex.pagemedia.dropzone.template', true) %} <div id="dropzone-media-template" style="display:none;"> {% include 'forms/fields/pagemedia/template.html.twig' %} </div> {% endif %} {% endblock %}