1{%- comment -%}
 2Reusable light/dark theme image include.
 3
 4Usage:
 5{% include theme-image.html
 6   light="/assets/model-images/figure-4.1-light.png"
 7   dark="/assets/model-images/figure-4.1-dark.png"
 8   alt="Figure 4.1 — The complete model"
 9   caption="Figure 4.1 — The complete model"
10   class="optional-extra-class"
11   width="1200"
12   height="800"
13%}
14{%- endcomment -%}
15
16{%- assign light_src = include.light   | default: "" -%}
17{%- assign dark_src  = include.dark    | default: light_src -%}
18{%- assign caption   = include.caption | default: "" -%}
19{%- assign alt_text  = include.alt     | default: include.caption -%}
20
21<figure class="theme-image{% if include.class %} {{ include.class }}{% endif %}">
22  <img
23    class="theme-image__img theme-image__img--light"
24    src="{{ light_src | relative_url }}"
25    alt="{{ alt_text | escape }}"
26    loading="lazy"
27    decoding="async"
28    {%- if include.width %} width="{{ include.width | escape }}"{% endif -%}
29    {%- if include.height %} height="{{ include.height | escape }}"{% endif -%}
30  />
31  <img
32    class="theme-image__img theme-image__img--dark"
33    src="{{ dark_src | relative_url }}"
34    alt="{{ alt_text | escape }}"
35    loading="lazy"
36    decoding="async"
37    {%- if include.max-width %} style="max-width: {{ include.max_width | escape }}"{% endif -%}
38    {%- if include.width %} width="{{ include.width | escape }}"{% endif -%}
39    {%- if include.height %} height="{{ include.height | escape }}"{% endif -%}
40  />
41  {%- if include.caption -%}
42  <figcaption class="theme-image__caption">{{ include.caption }}</figcaption>
43  {%- endif -%}
44</figure>
45