Optimize and improve naming of all images in knowledge base

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>