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

content/blog/shortcodes/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalitzats"
 date = 2023-02-19
-updated = 2024-05-03
+updated = 2024-05-18
 description = "Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran."
 
 [taxonomies]
@@ -17,11 +17,13 @@ social_media_card = "social_cards/ca_blog_shortcodes.jpg"
 
 ## Shortcodes d'imatge
 
-**Nota**: tots els shortcodes d'imatge tenen dos paràmetres opcionals: `full_width`, que té com a valor predeterminat `false` (vegeu [a sota](#imatge-d-amplada-completa)), i `lazy_loading`, que té com a valor predeterminat `true`.
+Tots els shortcodes d'imatge admeten rutes absolutes, rutes relatives, i fonts remotes en el paràmetre `src`.
 
-**Nota 2**: a partir del [PR #222](https://github.com/welpo/tabi/pull/222) (commit [7796162](https://github.com/welpo/tabi/commit/7796162e378cacb9b4d6129f95138121224714f1)), tots els shortcodes d'imatges suporten rutes relatives pel paràmetre `src`.
+Tots els shortcodes d'imatge tenen tres paràmetres opcionals:
 
-**Nota 3**: a partir del [PR #280](https://github.com/welpo/tabi/pull/280), tots els shortcodes d'imatges admeten imatges remotes pel paràmetre `src`.
+- `inline`. Valor predeterminat: `false`. Si s'estableix a `true`, la imatge es mostrarà en línia amb el text.
+- `full_width`. Valor predeterminat: `false` (vegeu [a sota](#imatge-d-amplada-completa)).
+- `lazy_loading`. Valor predeterminat: `true`.
 
 ### Imatges per a temes duals
 

content/blog/shortcodes/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2024-05-03
+updated = 2024-05-18
 description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más."
 
 [taxonomies]
@@ -17,11 +17,13 @@ social_media_card = "social_cards/es_blog_shortcodes.jpg"
 
 ## Shortcodes de imagen
 
-**Nota**: todos los shortcodes de imagen tienen dos parámetros opcionales: `full_width`, que tiene como valor predeterminado `false` (ver [más abajo](#imagen-a-ancho-completo)), y `lazy_loading`, que tiene como valor predeterminado `true`.
+Todos los shortcodes de imagen admiten rutas absolutas, rutas relativas, y fuentes remotas en el parámetro `src`.
 
-**Nota 2**: a partir del [PR #222](https://github.com/welpo/tabi/pull/222) (commit [7796162](https://github.com/welpo/tabi/commit/7796162e378cacb9b4d6129f95138121224714f1)), todos los shortcodes de imágenes admiten rutas relativas en el parámetro `src`.
+Todos los shortcodes de imagen tienen tres parámetros opcionales:
 
-**Nota 3**: a partir del [PR #280](https://github.com/welpo/tabi/pull/280), todos los shortcodes de imágenes admiten imágenes remotas en el parámetro `src`.
+- `inline`. Valor predeterminado: `false`. Si se establece `true`, la imagen se mostrará en línea con el texto.
+- `full_width`. Valor predeterminado: `false` (ver [más abajo](#imagen-a-ancho-completo)).
+- `lazy_loading`. Valor predeterminado: `true`.
 
 ### Imágenes de doble tema
 

content/blog/shortcodes/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2024-05-03
+updated = 2024-05-18
 description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
 
 [taxonomies]
@@ -17,11 +17,13 @@ social_media_card = "social_cards/blog_shortcodes.jpg"
 
 ## Image shortcodes
 
-**Note**: all image shortcodes have two optional parameters: `full_width`, which defaults to `false` (see [below](#full-width-image)), and `lazy_loading`, which defaults to `true`.
+All image shortcodes support absolute paths, relative paths, and remote sources in the `src` parameter.
 
-**Note 2**: as of [PR #222](https://github.com/welpo/tabi/pull/222) (commit [7796162](https://github.com/welpo/tabi/commit/7796162e378cacb9b4d6129f95138121224714f1)), all image shortcodes support relative paths in the `src` parameter.
+All image shortcodes have three optional parameters:
 
-**Note 3**: as of [PR #280](https://github.com/welpo/tabi/pull/280), all image shortcodes support remote images in the `src` parameter.
+- `inline`. Defaults to `false`. If set to `true`, the image will be displayed inline with the text.
+- `full_width`. Defaults to `false` (see [below](#full-width-image))
+- `lazy_loading`. Defaults to `true`.
 
 ### Dual theme images
 

sass/parts/_image-hover.scss

@@ -1,21 +1,22 @@
 .image-hover-container {
-    display: inline-block;
     position: relative;
     width: 100%;
 
     .image-default {
-        display: block;
+        display: inline;
     }
 
     .image-hovered {
         display: none;
     }
 
-    &:hover .image-hovered {
+    &:hover {
-        display: block;
+        .image-default {
-    }
+            display: none;
+        }
 
-    &:hover .image-default {
+        .image-hovered {
-        display: none;
+            display: inline;
+        }
     }
 }

sass/parts/_image.scss

@@ -37,11 +37,21 @@ figure h4::before {
 
 .img-dark {
     display: none;
+    &.inline{
+        display: none;
+    }
+}
+
+.img-light.inline {
+    display: inline;
 }
 
 [data-theme="dark"] {
     .img-dark {
         display: block;
+        &.inline {
+            display: inline;
+        }
     }
 
     .img-light {

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 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 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="{{ 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 %}">
+<{{ tag }} class="image-hover-container{% if full_width %} full-width{% endif %}">
-    <div class="image-default">
+    <{{ tag }} 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 %}>
+        <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 %}>
-    </div>
+    </{{ tag }}>
-    <div class="image-hovered">
+    <{{ tag }} 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 %}>
+        <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 %}>
-    </div>
+    </{{ tag }}>
-</div>
+</{{ 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">
+        <{{ tag }} 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 %}>
+            <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 %}>
-        </div>
+        </{{ tag }}>
-        <div class="image-toggled">
+        <{{ tag }} 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 %}>
+            <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 %}>
-        </div>
+        </{{ 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 -%}