insert-colorbox-image.html.twig in Insert 8.2

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).
• class_colorbox: A set of classes assigned to the link.
• entity_type: The type of the entity inserted.
• field_type: The field type the rendered template belongs to, i.e. "file" or "image".
• gallery_id: The id of the colorbox gallery.
• 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.
• item: The complete item being inserted.
• 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.
• 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

modules/insert_colorbox/templates/insert-colorbox-image.html.twig

{#
/**
 * @file
 * 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).
 * - class_colorbox: A set of classes assigned to the link.
 * - entity_type: The type of the entity inserted.
 * - field_type: The field type the rendered template belongs to, i.e. "file" or
 *   "image".
 * - gallery_id: The id of the colorbox gallery.
 * - 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.
 * - item: The complete item being inserted.
 * - 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.
 * - 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.
 */
#}
{% spaceless %}

{% set classes = [] %}

{% if style_name != 'image' %}
  {% set classes = classes|merge(['image-' ~ style_name]) %}
{% endif %}

{% if class %}
  {% set classes = classes|merge([class]) %}
{% endif %}

<a href="{{ url_link }}" class="colorbox insert-colorbox" data-insert-type="{{ field_type }}"{% if gallery_id != '' %} data-colorbox-gallery="{{ gallery_id }}"{% endif %}>
  <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='{"id": "{{ id }}", "attributes": {"alt": ["alt", "description"], "title": ["title"]{% if insert_caption %}, "data-caption": ["title"]{% endif %}}}' />
</a>

{% endspaceless %}