You are here

file-managed-file.html.twig in Drupal 10

Theme override to display a file form widget.

Available variables:

  • main_items: Main render elements of the file or image widget: file name, upload input, upload and remove buttons and hidden inputs.
  • data: Other render elements of the image widget like preview, alt or title, or the description input and the display checkbox of the file widget.
  • display: A flag indicating whether the display field is visible.
  • attributes: HTML attributes for the containing element.
  • multiple: Whether this widget is the part of a multi-value file widget or not.
  • upload: Whether the file upload input is displayed or not.
  • has_value: true if the widget already contains a file.
  • has_meta: true when the display checkbox or the description, alt or title inputs are enabled and at least one of them is visible.

File

core/themes/claro/templates/content-edit/file-managed-file.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Theme override to display a file form widget.
  5. *
  6. * Available variables:
  7. * - main_items: Main render elements of the file or image widget:
  8. * file name, upload input, upload and remove buttons and hidden inputs.
  9. * - data: Other render elements of the image widget like preview, alt or title,
  10. * or the description input and the display checkbox of the file widget.
  11. * - display: A flag indicating whether the display field is visible.
  12. * - attributes: HTML attributes for the containing element.
  13. * - multiple: Whether this widget is the part of a multi-value file widget or
  14. * not.
  15. * - upload: Whether the file upload input is displayed or not.
  16. * - has_value: true if the widget already contains a file.
  17. * - has_meta: true when the display checkbox or the description, alt or title
  18. * inputs are enabled and at least one of them is visible.
  19. *
  20. * @see template_preprocess_file_managed_file()
  21. * @see claro_preprocess_file_managed_file()
  22. */
  23. #}
  24. {%
  25. set classes = [
  26. 'js-form-managed-file',
  27. 'form-managed-file',
  28. multiple ? 'is-multiple' : 'is-single',
  29. upload ? 'has-upload' : 'no-upload',
  30. has_value ? 'has-value' : 'no-value',
  31. has_meta ? 'has-meta' : 'no-meta',
  32. ]
  33. %}
  34. <div{{ attributes.addClass(classes).removeClass('clearfix') }}>
  35. <div class="form-managed-file__main">
  36. {{ main_items.filename }}
  37. {{ main_items|without('filename') }}
  38. </div>
  39. {% if has_meta or data.preview %}
  40. <div class="form-managed-file__meta-wrapper">
  41. <div class="form-managed-file__meta">
  42. {% if data.preview %}
  43. <div class="form-managed-file__image-preview image-preview">
  44. <div class="image-preview__img-wrapper">
  45. {{ data.preview }}
  46. </div>
  47. </div>
  48. {% endif %}
  49. {% if data.description or display or data.alt or data.title %}
  50. <div class="form-managed-file__meta-items">
  51. {{ data.description }}
  52. {% if display %}
  53. {{ data.display }}
  54. {% endif %}
  55. {{ data.alt }}
  56. {{ data.title }}
  57. </div>
  58. {% endif %}
  59. </div>
  60. </div>
  61. {% endif %}
  62. {# Every third-party addition will be rendered here. #}
  63. {{ data|without('preview', 'alt', 'title', 'description', 'display') }}
  64. </div>