<!– Liquid function –>

<!– Take inputs from page front matter and calculate the coordinates of the svg elements –> {% assign image_handle = include.image_handle %}

<!– get image dimensions –> {%- assign imageX = page.images.size | split: ', ' | first -%} {%- assign imageY = page.images.size | split: ', ' | last -%}

<!– pre-assign arrays for circle centers and line ends –> {% assign cX = '' | split: ',' %} {% assign cY = '' | split: ',' %}

<!– loop over all the requested labels –> {% for item in page.images.labels %}

<!-- x(i) and y(i) -->
{% assign ix = item.coord | split: ', ' | first %}
{% assign iy = item.coord | split: ', ' | last %}

<!-- calculate circle centers as percentage of image size -->
{% assign cx = ix | times: 100 | divided_by: imageX | append: ', ' %}
{% assign cy = iy | times: 100 | divided_by: imageY | append: ', ' %}
<!-- push into arrays -->
{% assign cX = cX | push: cx %}
{% assign cY = cY | push: cy %}

{% endfor %}

<!– in: [imageX, imageY] pixels

[x, y] pixels

out: cX = [cx_1, cx_2, … , cx_n]

cY = [cy_1, cy_2, ... , cy_n]

–>