<!–

insert an augmented image located in assets/images/content/

Usage:

<div class="wrapping-class" >
{% comment %}
{%  include image.html
    image="handle"
    alt="Description"
    class="image-class"
    caption="Optional caption"
    %}
{% endcomment %}

We close the wrapping div before the caption.

–>

{% capture path %} {{ page.images.file | prepend: 'content/' }} {% endcapture %}

{% picture {{ path }}

--img class="{{ include.class }}"
--alt {{ include.alt }} %}

{% if page.images.labels %}

{% include functions/calc-svg-coord.html image_handle=include.image %}

<svg class=“svg__augment” width=“100%” height=“100%” xmlns=“www.w3.org/2000/svg”>

{% for item in page.images[include.image].labels %}
<svg class="svg__labels hidden" x="{{ cX[forloop.index0] | remove: ", " }}%" y="{{ cY[forloop.index0] | remove: ", " }}%" style="overflow: visible">

  <circle class="svg--elem svg--circle" cx="0%" cy="0%" r="6" />

  <line class="svg--elem svg--line" x1="0"  y1="0" y2="0" />

  <text class="svg--elem svg--text trans-{% if item.reverse %}right{% else %}left{% endif %}" >{{ item.text }}</text>

</svg>
{% endfor %}

</svg> {% endif %}

<!– closing wrapping div –> </div>

{% if include.caption %} <p class=“image–caption”>{{ include.caption }}</p> {% endif %}