summaryrefslogtreecommitdiff
path: root/source/_includes
diff options
context:
space:
mode:
authorPrefetch2022-10-23 22:18:11 +0200
committerPrefetch2022-10-23 22:18:11 +0200
commitbcae81336764eb6c4cdf0f91e2fe632b625dd8b2 (patch)
treebf353d26203b6792bb2ab5d7bbb5c65819c9e0a0 /source/_includes
parent16555851b6514a736c5c9d8e73de7da7fc9b6288 (diff)
Optimize and improve naming of all images in knowledge base
Diffstat (limited to 'source/_includes')
-rw-r--r--source/_includes/image.html34
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>