You are here

insert-image.html.twig in Insert 8.2

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

Template file for images inserted via the Insert module.

Available variables:

  • attributes: Additional attributes.
  • class: A set of classes assigned to this image (if any).
  • entity_type: The type of the entity inserted.
  • field_type: The field type the rendered template belongs to, i.e. "file" or "image".
  • height: The height of the image (if known).
  • id: A unique id that is used in templates and button for synchronisation.
  • insert_settings: Insert widget settings.
  • mime_type: The file's mime type.
  • style_name: The Image style being used.
  • url: The URL to the image being inserted visually; May be a styled image or the full size image.
  • url_link: URL of the image derivative, the inserted image shall link to (if specified).
  • url_original: The URL to the original (full size) image.
  • uuid: The file's UUID.
  • width: The width of the image (if known).

Available attachment keys for the data-insert-attach attribute:

  • alt: The text entered in the image field widget's ALT text box.
  • title: The text entered in the image field widget's title text box.
  • description: The text entered in the field's description text box (if the image is inserted using a generic file field).
  • filename: The file name.

See module documentation at https://www.drupal.org/docs/8/modules/insert on how to specify the data-insert-attach attribute.

File

templates/insert-image.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Template file for images inserted via the Insert module.
  5. *
  6. * Available variables:
  7. * - attributes: Additional attributes.
  8. * - class: A set of classes assigned to this image (if any).
  9. * - entity_type: The type of the entity inserted.
  10. * - field_type: The field type the rendered template belongs to, i.e. "file" or
  11. * "image".
  12. * - height: The height of the image (if known).
  13. * - id: A unique id that is used in templates and button for synchronisation.
  14. * - insert_settings: Insert widget settings.
  15. * - mime_type: The file's mime type.
  16. * - style_name: The Image style being used.
  17. * - url: The URL to the image being inserted visually; May be a styled image or
  18. * the full size image.
  19. * - url_link: URL of the image derivative, the inserted image shall link to (if
  20. * specified).
  21. * - url_original: The URL to the original (full size) image.
  22. * - uuid: The file's UUID.
  23. * - width: The width of the image (if known).
  24. *
  25. * Available attachment keys for the data-insert-attach attribute:
  26. * - alt: The text entered in the image field widget's ALT text box.
  27. * - title: The text entered in the image field widget's title text box.
  28. * - description: The text entered in the field's description text box (if the
  29. * image is inserted using a generic file field).
  30. * - filename: The file name.
  31. * See module documentation at https://www.drupal.org/docs/8/modules/insert
  32. * on how to specify the data-insert-attach attribute.
  33. */
  34. #}
  35. {% spaceless %}
  36. {% set classes = [] %}
  37. {% if style_name != 'image' %}
  38. {% set classes = classes|merge(['image-' ~ style_name]) %}
  39. {% endif %}
  40. {% if class %}
  41. {% set classes = classes|merge([class]) %}
  42. {% endif %}
  43. {% if url_link %}
  44. <a href="{{ url_link }}"{% if class %} class="{{ class }}"{% endif %} data-insert-type="{{ field_type }}">
  45. {% endif %}
  46. {%
  47. set attach = {
  48. id: id,
  49. attributes: {
  50. alt: [
  51. 'alt',
  52. 'description',
  53. ],
  54. title: [
  55. 'title',
  56. ],
  57. },
  58. }
  59. %}
  60. {% if insert_settings.caption %}
  61. {% set attach = attach|merge({attributes: {'data-caption': ['title']}}) %}
  62. {% endif %}
  63. <img src="{{ url }}"{{ attributes }} {% if width and height %}width="{{ width }}" height="{{ height }}" {% endif %}{% if classes|length %} class="{{ classes|join(' ') }}"{% endif %} data-insert-type="{{ field_type }}" data-entity-type="{{ entity_type }}" data-entity-uuid="{{ uuid }}" data-insert-attach='{{ attach|json_encode() }}' />
  64. {% if url_link %}
  65. </a>
  66. {% endif %}
  67. {% endspaceless %}