Skip to content

Commit

Permalink
✨ feat(shortcodes): add inline option to image shortcodes (#315)
Browse files Browse the repository at this point in the history
  • Loading branch information
welpo authored May 18, 2024
1 parent 6a4f424 commit 27525fc
Show file tree
Hide file tree
Showing 10 changed files with 101 additions and 39 deletions.
10 changes: 6 additions & 4 deletions content/blog/shortcodes/index.ca.md
Original file line number Diff line number Diff line change
@@ -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]
Expand All @@ -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

Expand Down
10 changes: 6 additions & 4 deletions content/blog/shortcodes/index.es.md
Original file line number Diff line number Diff line change
@@ -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]
Expand All @@ -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

Expand Down
10 changes: 6 additions & 4 deletions content/blog/shortcodes/index.md
Original file line number Diff line number Diff line change
@@ -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]
Expand All @@ -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

Expand Down
15 changes: 8 additions & 7 deletions sass/parts/_image-hover.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
10 changes: 10 additions & 0 deletions sass/parts/_image.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 6 additions & 1 deletion templates/shortcodes/dimmable_image.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -%}
12 changes: 10 additions & 2 deletions templates/shortcodes/dual_theme_image.html
Original file line number Diff line number Diff line change
@@ -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") -%}
Expand Down Expand Up @@ -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 -%}
29 changes: 21 additions & 8 deletions templates/shortcodes/image_hover.html
Original file line number Diff line number Diff line change
@@ -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") -%}
Expand Down Expand Up @@ -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 }}>
29 changes: 21 additions & 8 deletions templates/shortcodes/image_toggler.html
Original file line number Diff line number Diff line change
Expand Up @@ -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") -%}
Expand Down Expand Up @@ -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 }}>
8 changes: 7 additions & 1 deletion templates/shortcodes/invertible_image.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -%}

0 comments on commit 27525fc

Please sign in to comment.