image_figure.html

{# <!--
    Displays an image with a legend.

    Example usage:
        {{ image_figure(
            alt="image/GIF description"
            src="image link"
            caption="image caption") }}
    
    Note that the caption can contain markdown:
        {{ image_figure(
            alt="image/GIF description"
            src="image link"
            caption="image caption with some **strong** text") }}

    But careful! Link references don't work:
        This doesn't work: 
            {{ image_figure(
                alt="image/GIF description"
                src="image link"
                caption="[image caption][link]") }}
            [link]: https://example.com
        Use this instead:
            {{ image_figure(
                alt="image/GIF description"
                src="image link"
                caption="[image caption](https://example.com)") }}
--> #}

{% if src != "image link" %}
    {# Only validate against placeholders if we're not in the example #}
    {% if alt == "image/GIF description" %}
        {{ throw(message="Don't forget to write your own image description :)") }}
    {% endif %}

    {% if caption and caption == "image caption" %}
        {{ throw(message="Don't forget to write your own image caption ^^") }}
    {% endif %}
{% endif %}

<figure>
    {% if link %}<a href="{{link}}">{% endif %}
    <img src="{{get_url(path=page.colocated_path ~ src)}}" alt="{{alt}}">
    {% if link %}</a>{% endif %}

    {% if caption %}
        <figcaption>{{caption | markdown(inline=true) | safe}}</figcaption>
    {% else %}
        <figcaption>{{alt}}</figcaption>
    {% endif %}
</figure>