templates/components/image_input.html.twig line 1

Open in your IDE?
  1. {% set options = {
  2.     formWidgetField: null,
  3.     imagePath: null,
  4.     required: true,
  5.     maxSizeKb: 2 * 1024 * 1024,
  6.     canRemove: false,
  7.     form: null,
  8.     mediaType: 'image',
  9. }|merge(options|default({})) %}
  11. <div class="bg-white py-2 border p-2 rounded">
  12.     {% if options.imagePath %}
  13.         {% if options.mediaType == 'image' %}
  14.             <img class="mb-2" src="{{ asset(options.imagePath) }}" width="250px" data-remove-image alt="image preview">
  15.         {% elseif options.mediaType == 'video' %}
  16.             <video class="mb-2" width="250px" controls data-remove-image>
  17.                 <source src="{{ asset(options.imagePath) }}" type="video/mp4">
  18.                 Ваш браузер не поддерживает видео.
  19.             </video>
  20.         {% endif %}
  21.         {% if options.canRemove %}
  22.             <div class="remove-file-btn mb-2">
  23.                 <a href="javascript:void(0)" data-remove-image-button>Удалить медиа файл</a>
  24.             </div>
  25.             {# Формируем имя скрытого поля удаления. Для вложенных полей используем full_name и вставляем 'Remove' перед последней ']' #}
  26.             {% if options.formWidgetField.vars.full_name is defined %}
  27.                 {% set full = options.formWidgetField.vars.full_name %}
  28.                 {% set remove_name = full|slice(0, -1) ~ 'Remove]' %}
  29.             {% else %}
  30.                 {% set remove_name = options.form.vars.name ~ '[' ~ options.formWidgetField.vars.name ~ 'Remove]' %}
  31.             {% endif %}
  32.             <input name="{{ remove_name }}" type="hidden" data-remove-image-flag>
  33.         {% endif %}
  34.     {% endif %}
  36.     <div class="new-file-input{{ options.imagePath ? " mb-2" }}"{{ options.imagePath ? " hidden" }}>
  37.         {{ form_widget(options.formWidgetField, {'attr': {'
  38.             required': options.required,
  39.             'onchange': "Utils.validateFileSize(this, " ~ options.maxSizeKb ~ ")",
  40.         }}) }}
  41.     </div>
  43.     {% if options.imagePath %}
  44.         <a class="upload-new-file-btn" href="javascript:void(0)">Загрузить новый медиа файл</a>
  45.     {% endif %}
  46. </div>