Optimize last images, add proof template, improve CSS

1 files changed, 13 insertions, 6 deletions

diff --git a/source/_includes/image.html b/source/_includes/image.html
index a9bc3fd..5b4f35f 100644
--- a/source/_includes/image.html
+++ b/source/_includes/image.html
@@ -12,22 +12,29 @@
 {% 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" %}
+ {% assign name_half = prefix | append: "half" %}
 {% else %}
-  {% assign name_half = name_full %}
+ {% assign name_half = name_full %}
 {% endif %}
 
 {% comment %} Insert the image, linking to the full-size version {% endcomment %}
+{% if include.class %}
+ {% assign add_class = 'class="' | append: include.class | append: '"' %}
+{% endif %}
+{% if include.style or include.width %}
+ {% assign set_width = "width:" | append: include.width %}
+ {% assign set_style = include.style | default: set_width %}
+ {% assign add_style = 'style="' | append: set_style | append: '"' %}
+{% endif %}
 <p>
 <a href="{{ name_full }}.{{ format }}">
- {% assign set_width = "width:" | append: include.width %}
- <picture markdown="0">
+ <picture>
   <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 }}">
+   <img src="{{ name_half }}.{{ format }}" {{ add_class }} {{ add_style }} 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 }}">
+   <img src="{{ name_half }}.jpg" {{ add_class }} {{ add_style }} alt="{{ include.alt }}" title="{{ include.alt }}">
   {% endif %}
  </picture>
 </a>