You are here

image-widget.html.twig in Open Social 8.9

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

themes/socialbase/templates/file/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_image_widget()
  11. *
  12. * @ingroup themeable
  13. */
  14. #}
  15. {{ attach_library('socialbase/image-widget') }}
  16. {{ attach_library('image_widget_crop/cropper') }}
  17. {% set in_post = data.upload['#id'] starts with "edit-field-post-image-0-upload" %}
  18. {% if data.preview %}
  19. <div{{ attributes.addClass('image-widget').removeClass('clearfix') }}>
  20. <div class="preview">
  21. {{ data.preview }}
  22. </div>
  23. <div class="data image-widget-data">
  24. {% if in_post %}
  25. {# Render widget data for photo's in posts without the file fields, image preview and remove button. #}
  26. {{ data|without('preview', 'image_crop', 'file_' ~ data.fids['#value'][0], 'remove_button' ) }}
  27. {% else %}
  28. {# Render widget data without the image preview that was output already. #}
  29. {{ data|without('preview', 'image_crop') }}
  30. {% endif %}
  31. </div>
  32. </div>
  33. {% if in_post %}
  34. {# Render a "fake" remove button that triggers the actual (hidden) remove button. #}
  35. <div class="hidden">{{ data.remove_button }}</div>
  36. <button type="button" id="post-photo-remove" class="btn--post-remove-image">
  37. <svg class="btn-icon">
  38. <title>{% trans %}Remove image{% endtrans %}</title>
  39. <use id="btnicon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use>
  40. </svg>
  41. </button>
  42. {% else %}
  43. {{ data.image_crop }}
  44. {% endif %}
  45. {% else %}
  46. {% if in_post %}
  47. {# Render a "fake" image add button that triggers the actual (hidden) upload field. #}
  48. <div{{ attributes.addClass(classes, 'hidden') }}>
  49. {{ data }}
  50. </div>
  51. <button type="button" id="post-photo-add" class="btn btn-default">
  52. <svg class="btn-icon" aria-hidden="true">
  53. <use id="btnicon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-plus"></use>
  54. </svg>
  55. <span>
  56. {% trans %}Add image{% endtrans %}
  57. </span>
  58. </button>
  59. {% else %}
  60. <div{{ attributes.addClass(classes) }}>
  61. {{ data }}
  62. </div>
  63. {% endif %}
  64. {% endif %}