diff options
Diffstat (limited to 'source/_includes/image.html')
-rw-r--r-- | source/_includes/image.html | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/source/_includes/image.html b/source/_includes/image.html new file mode 100644 index 0000000..a9bc3fd --- /dev/null +++ b/source/_includes/image.html @@ -0,0 +1,34 @@ +{% assign name_dot_format = include.file | split: "." %} +{% assign name = name_dot_format | first %} +{% assign format = name_dot_format | last %} + +{% comment %} Let 'suffix' = last 4 chars of 'name', 'prefix' = the rest {% endcomment %} +{% assign suffix = name | slice: -4, 4 %} +{% assign rname = name | split: "" | reverse | join: "" %} +{% assign rsuffix = suffix | split: "" | reverse | join: "" %} +{% assign rprefix = rname | remove_first: rsuffix %} +{% assign prefix = rprefix | split: "" | reverse | join: "" %} + +{% comment %} If 'name' ends in "full", half-size image must exist {% endcomment %} +{% assign name_full = name %} +{% if suffix == "full" %} + {% assign name_half = prefix | append: "half" %} +{% else %} + {% assign name_half = name_full %} +{% endif %} + +{% comment %} Insert the image, linking to the full-size version {% endcomment %} +<p> +<a href="{{ name_full }}.{{ format }}"> + {% assign set_width = "width:" | append: include.width %} + <picture markdown="0"> + <source srcset="{{ name_half }}.avif" type="image/avif"> + {% if name_full == name_half %} + <img src="{{ name_half }}.{{ format }}" style="{{ include.style | default: set_width }}" alt="{{ include.alt }}" title="{{ include.alt }}"> + {% else %} + <source srcset="{{ name_half }}.webp" type="image/webp"> + <img src="{{ name_half }}.jpg" style="{{ include.style | default: set_width }}" alt="{{ include.alt }}" title="{{ include.alt }}"> + {% endif %} + </picture> +</a> +</p> |