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

9 months ago · 27525fc13f
parent 6a4f4244e0
commit 27525fc13f
10 changed files with 101 additions and 39 deletions
--- a/content/blog/shortcodes/index.ca.md
+++ b/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

--- a/content/blog/shortcodes/index.es.md
+++ b/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

--- a/content/blog/shortcodes/index.md
+++ b/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

--- a/sass/parts/_image-hover.scss
+++ b/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 {
-        display: block;
-    }
+    &:hover {
+        .image-default {
+            display: none;
+        }

-    &:hover .image-default {
-        display: none;
+        .image-hovered {
+            display: inline;
+        }
    }
 }
--- a/sass/parts/_image.scss
+++ b/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 {
--- a/templates/shortcodes/dimmable_image.html
+++ b/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 -%}
--- a/templates/shortcodes/dual_theme_image.html
+++ b/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 -%}
--- a/templates/shortcodes/image_hover.html
+++ b/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 }}>
--- a/templates/shortcodes/image_toggler.html
+++ b/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 }}>
--- a/templates/shortcodes/invertible_image.html
+++ b/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 -%}