You are here

fine-image-widget.html.twig in Fine Image Upload 8.2

Same filename and directory in other branches
  1. 8 templates/fine-image-widget.html.twig

Default theme implementation for an image field widget.

Available variables:

  • attributes: HTML attributes for the containing element.
  • data: Render elements of the image widget.

File

templates/fine-image-widget.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation for an image field widget.
  5. *
  6. * Available variables:
  7. * - attributes: HTML attributes for the containing element.
  8. * - data: Render elements of the image widget.
  9. *
  10. * @see template_preprocess_fine_image_widget()
  11. *
  12. * @ingroup themeable
  13. */
  14. #}
  15. {% if info %}
  16. <div class="fiu-image-info" id="{{ data.id }}">
  17. <div class="fiu-full-image">
  18. <div class="inner-fiu-full-image">
  19. <img src="{{ info.url.value }}">
  20. <div class="fiu-img-description">
  21. <ul>
  22. {% for row in info|without('url') %}
  23. {% if row %}
  24. <li>
  25. <b>{{ row.title }} :</b>
  26. {{ row.value }}
  27. </li>
  28. {% endif %}
  29. {% endfor %}
  30. </ul>
  31. <div class="attr">
  32. {% if data.alt %}
  33. {{ data.alt }}
  34. {% endif %}
  35. {% if data.title %}
  36. {{ data.title }}
  37. {% endif %}
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. {% endif %}
  44. <div{{ attributes }}>
  45. {% if data.preview %}
  46. <div class="fine-image-preview">
  47. {{ data.preview }}
  48. </div>
  49. {% endif %}
  50. {% if file_name %}
  51. <div class="fine-image-file-name">
  52. <span>{{ file_name }}</span>
  53. </div>
  54. {% endif %}
  55. {# Render widget data without the image preview that was output already. #}
  56. <div class="fine-image-data">
  57. {% if details %}
  58. <span class="fiu-image-details" data-fiu-id="{{ data.id }}">
  59. {{ details }}
  60. </span>
  61. {% endif %}
  62. {{ data|without('preview', 'title', 'alt', 'id') }}
  63. </div>
  64. </div>