From 27525fc13fb1fd21aa8eff29cbbb455996930643 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar?= Date: Sat, 18 May 2024 14:52:39 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(shortcodes):=20add=20inline=20?= =?UTF-8?q?option=20to=20image=20shortcodes=20(#315)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/blog/shortcodes/index.ca.md | 10 +++++--- content/blog/shortcodes/index.es.md | 10 +++++--- content/blog/shortcodes/index.md | 10 +++++--- sass/parts/_image-hover.scss | 15 +++++------ sass/parts/_image.scss | 10 ++++++++ templates/shortcodes/dimmable_image.html | 7 +++++- templates/shortcodes/dual_theme_image.html | 12 +++++++-- templates/shortcodes/image_hover.html | 29 ++++++++++++++++------ templates/shortcodes/image_toggler.html | 29 ++++++++++++++++------ templates/shortcodes/invertible_image.html | 8 +++++- 10 files changed, 101 insertions(+), 39 deletions(-) diff --git a/content/blog/shortcodes/index.ca.md b/content/blog/shortcodes/index.ca.md index 071773f20..9c55f1421 100644 --- 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 diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md index 3aade5312..6dc8c0dfa 100644 --- 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 diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md index a525bb01d..f7f5a74a7 100644 --- 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 diff --git a/sass/parts/_image-hover.scss b/sass/parts/_image-hover.scss index e9c8a53c7..9f36f233e 100644 --- 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; + } } } diff --git a/sass/parts/_image.scss b/sass/parts/_image.scss index d5285465e..6960b898c 100644 --- 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 { diff --git a/templates/shortcodes/dimmable_image.html b/templates/shortcodes/dimmable_image.html index 125699a9a..327ff51d9 100644 --- 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 -%}
{%- endif -%} - + {%- if full_width -%}
{%- endif -%} diff --git a/templates/shortcodes/dual_theme_image.html b/templates/shortcodes/dual_theme_image.html index bad33d6e8..b73ae0390 100644 --- 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 -%}
{%- endif -%} - - + + {%- if full_width -%}
{%- endif -%} diff --git a/templates/shortcodes/image_hover.html b/templates/shortcodes/image_hover.html index dff7f728f..d00967af7 100644 --- 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 -%} -
-
- {{ default_alt }} -
-
- {{ hovered_alt }} -
-
+<{{ tag }} class="image-hover-container{% if full_width %} full-width{% endif %}"> + <{{ tag }} class="image-default"> + {{ default_alt }} + + <{{ tag }} class="image-hovered"> + {{ hovered_alt }} + + diff --git a/templates/shortcodes/image_toggler.html b/templates/shortcodes/image_toggler.html index 82c542b3b..2fd811bde 100644 --- 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 -%} -
+<{{ tag }} class="image-toggler-container {% if full_width %}full-width{% endif %}"> -
+ diff --git a/templates/shortcodes/invertible_image.html b/templates/shortcodes/invertible_image.html index 317d83606..b03626972 100644 --- 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 -%}
{%- endif -%} - + {%- if full_width -%}
{%- endif -%}