✨ feat(shortcodes): add inline option to image shortcodes (#315)

templates/shortcodes/dimmable_image.html

@@ -17,10 +17,15 @@
 
 {%- set lazy_loading = lazy_loading | default(value=true) -%}
 
+{%- set class_list = "dimmable-image" -%}
+{%- if inline -%}
+    {%- set class_list = class_list ~ " inline" -%}
+{%- endif -%}
+
 {%- if full_width -%}
     <div class="full-width">
 {%- endif -%}
-<img class="dimmable-image" src="{{ image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if meta.width %} width="{{ meta.width }}"{% endif %}{% if meta.height %} height="{{ meta.height }}" {% endif %}/>
+<img class="{{ class_list }}" src="{{ image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if meta.width %} width="{{ meta.width }}"{% endif %}{% if meta.height %} height="{{ meta.height }}" {% endif %}/>
 {%- if full_width -%}
     </div>
 {%- endif -%}

templates/shortcodes/dual_theme_image.html

@@ -1,5 +1,13 @@
 {%- set colocated_path = page.colocated_path | default(value="") -%}
 {%- set lazy_loading = lazy_loading | default(value=true) -%}
+{%- set inline = inline | default(value=false) -%}
+
+{%- set light_class_list = "img-light" -%}
+{%- set dark_class_list = "img-dark" -%}
+{%- if inline -%}
+    {%- set light_class_list = light_class_list ~ " inline" -%}
+    {%- set dark_class_list = dark_class_list ~ " inline" -%}
+{%- endif -%}
 
 {# Handling for light mode image #}
 {%- if light_src is starting_with("http") -%}
@@ -30,8 +38,8 @@
 {%- if full_width -%}
     <div class="full-width">
 {%- endif -%}
-<img src="{{ light_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if light_meta.width %} width="{{ light_meta.width }}"{% endif %}{% if light_meta.height %} height="{{ light_meta.height }}" {% endif %} class="img-light">
-<img src="{{ dark_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if dark_meta.width %} width="{{ dark_meta.width }}"{% endif %}{% if dark_meta.height %} height="{{ dark_meta.height }}" {% endif %} class="img-dark">
+<img class="{{ light_class_list }}" src="{{ light_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if light_meta.width %} width="{{ light_meta.width }}"{% endif %}{% if light_meta.height %} height="{{ light_meta.height }}" {% endif %}>
+<img class="{{ dark_class_list }}" src="{{ dark_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if dark_meta.width %} width="{{ dark_meta.width }}"{% endif %}{% if dark_meta.height %} height="{{ dark_meta.height }}" {% endif %}>
 {%- if full_width -%}
     </div>
 {%- endif -%}

templates/shortcodes/image_hover.html

@@ -1,5 +1,18 @@
 {%- set colocated_path = page.colocated_path | default(value="") -%}
 {%- set lazy_loading = lazy_loading | default(value=true) -%}
+{%- set inline = inline | default(value=false) -%}
+
+{#- Determine the tag for container elements -#}
+{#- Necessary for inline images -#}
+{%- set tag = "div" -%}
+{%- if inline -%}
+    {%- set tag = "span" -%}
+{%- endif -%}
+
+{%- set img_class_list = "" -%}
+{%- if inline -%}
+    {%- set img_class_list = img_class_list ~ " inline" -%}
+{%- endif -%}
 
 {#- Direct or relative URL handling for default image -#}
 {%- if default_src is starting_with("http") -%}
@@ -27,11 +40,11 @@
     {%- endif -%}
 {%- endif -%}
 
-<div class="image-hover-container{% if full_width %} full-width{% endif %}">
-    <div class="image-default">
-        <img src="{{ default_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if default_alt %} alt="{{ default_alt }}"{% endif %}{% if default_meta.width %} width="{{ default_meta.width }}"{% endif %}{% if default_meta.height %} height="{{ default_meta.height }}"{% endif %}>
-    </div>
-    <div class="image-hovered">
-        <img src="{{ hovered_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if hovered_alt %} alt="{{ hovered_alt }}"{% endif %}{% if hovered_meta.width %} width="{{ hovered_meta.width }}"{% endif %}{% if hovered_meta.height %} height="{{ hovered_meta.height }}"{% endif %}>
-    </div>
-</div>
+<{{ tag }} class="image-hover-container{% if full_width %} full-width{% endif %}">
+    <{{ tag }} class="image-default">
+        <img class="{{ img_class_list }}" src="{{ default_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if default_alt %} alt="{{ default_alt }}"{% endif %}{% if default_meta.width %} width="{{ default_meta.width }}"{% endif %}{% if default_meta.height %} height="{{ default_meta.height }}"{% endif %}>
+    </{{ tag }}>
+    <{{ tag }} class="image-hovered">
+        <img class="{{ img_class_list }}" src="{{ hovered_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if hovered_alt %} alt="{{ hovered_alt }}"{% endif %}{% if hovered_meta.width %} width="{{ hovered_meta.width }}"{% endif %}{% if hovered_meta.height %} height="{{ hovered_meta.height }}"{% endif %}>
+    </{{ tag }}>
+</{{ tag }}>

templates/shortcodes/image_toggler.html

@@ -4,6 +4,19 @@
 {%- set random_id = get_random(end=100000) -%}
 {%- set colocated_path = page.colocated_path | default(value="") -%}
 {%- set lazy_loading = lazy_loading | default(value=true) -%}
+{%- set inline = inline | default(value=false) -%}
+
+{#- Determine the class for the images -#}
+{#- Necessary for inline images -#}
+{%- set tag = "div" -%}
+{%- if inline -%}
+    {%- set tag = "span" -%}
+{%- endif -%}
+
+{%- set img_class_list = "" -%}
+{%- if inline -%}
+    {%- set img_class_list = img_class_list ~ " inline" -%}
+{%- endif -%}
 
 {# Direct or relative URL handling for default image #}
 {%- if default_src is starting_with("http") -%}
@@ -31,14 +44,14 @@
     {%- endif -%}
 {%- endif -%}
 
-<div class="image-toggler-container {% if full_width %}full-width{% endif %}">
+<{{ tag }} class="image-toggler-container {% if full_width %}full-width{% endif %}">
     <input type="checkbox" id="toggle-img-{{ random_id }}" class="image-toggler-toggle">
     <label for="toggle-img-{{ random_id }}" class="image-label">
-        <div class="image-default">
-            <img src="{{ default_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if default_alt %} alt="{{ default_alt }}"{% endif %}{% if default_meta.width %} width="{{ default_meta.width }}"{% endif %}{% if default_meta.height %} height="{{ default_meta.height }}"{% endif %}>
-        </div>
-        <div class="image-toggled">
-            <img src="{{ toggled_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if toggled_alt %} alt="{{ toggled_alt }}"{% endif %}{% if toggled_meta.width %} width="{{ toggled_meta.width }}"{% endif %}{% if toggled_meta.height %} height="{{ toggled_meta.height }}"{% endif %}>
-        </div>
+        <{{ tag }} class="image-default">
+            <img class="{{ img_class_list }}" src="{{ default_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if default_alt %} alt="{{ default_alt }}"{% endif %}{% if default_meta.width %} width="{{ default_meta.width }}"{% endif %}{% if default_meta.height %} height="{{ default_meta.height }}"{% endif %}>
+        </{{ tag }}>
+        <{{ tag }} class="image-toggled">
+            <img class="{{ img_class_list }}" src="{{ toggled_image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if toggled_alt %} alt="{{ toggled_alt }}"{% endif %}{% if toggled_meta.width %} width="{{ toggled_meta.width }}"{% endif %}{% if toggled_meta.height %} height="{{ toggled_meta.height }}"{% endif %}>
+        </{{ tag }}>
     </label>
-</div>
+</{{ tag }}>

templates/shortcodes/invertible_image.html

@@ -16,11 +16,17 @@
 {%- endif -%}
 
 {%- set lazy_loading = lazy_loading | default(value=true) -%}
+{%- set inline = inline | default(value=false) -%}
+
+{%- set class_list = "invertible-image" -%}
+{%- if inline -%}
+    {%- set class_list = class_list ~ " inline" -%}
+{%- endif -%}
 
 {%- if full_width -%}
     <div class="full-width">
 {%- endif -%}
-<img class="invertible-image" src="{{ image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if meta.width %} width="{{ meta.width }}"{% endif %}{% if meta.height %} height="{{ meta.height }}" {% endif %}/>
+<img class="{{ class_list }}" src="{{ image_url }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if meta.width %} width="{{ meta.width }}"{% endif %}{% if meta.height %} height="{{ meta.height }}" {% endif %}/>
 {%- if full_width -%}
     </div>
 {%- endif -%}