image_hotspots-8.x-1.x-dev/templates/image-formatter-with-hotspots.html.twig

{#
/**image_hotspots
 * @file
 * Theme implementation for a hotspots UI.
 */
#}

<div class="image-hotspots-wrapper" data-field-name="{{ info.field_name }}"  data-image-style="{{ info.image_style }}" data-fid="{{ info.fid }}" data-hotspots-style="{{ info.hotspots_style }}" data-langcode="{{ info.langcode }}">
  <div class="image-wrapper">
    {{ image }}
  </div>
  <div class="labels"></div>
  {% if info.editable %}
    {% if info.translatable == false %}
      <div class="add-button action" title="{% trans %}Add new hotspot to image{% endtrans %}">Add hotspot</div>
    {% endif %}
    <div class="edit-form-wrapper">
      <div class="form-header">
        <div class="close-button"></div>
      </div>
      <form class="edit-form">
        <div class="form-messages"></div>
        <input type="text" name="hotspots-title" placeholder="{% trans %}Title{% endtrans %}" required>
        <textarea name="hotspots-description" rows="3" placeholder="{% trans %}Description{% endtrans %}"></textarea>
        <input type="text" name="hotspots-link" placeholder="{% trans %}Link{% endtrans %}">
        <div>
          <input type="checkbox" name="hotspots-target" id="target" value="_blank">
          <label for="target">{% trans %}Open in a new window{% endtrans %}</label>
        </div>
        <button type="submit" name="save">{% trans %}Save{% endtrans %}</button>
      </form>
    </div>
  {% endif %}
</div>