✨ feat: add full-width image option to shortcodes

Closes #85

content/blog/shortcodes.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalitzats"
 date = 2023-02-19
-updated = 2023-06-05
+updated = 2023-07-05
 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]
@@ -45,6 +45,20 @@ Les imatges amb massa brillantor o contrast poden ser molestes en un fons fosc.
 {{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") */}}
 ```
 
+### Imatge d'amplada completa
+
+La imatge s'expandirà per coincidir amb l'amplada de la capçalera, que normalment és més ampla que el text de l'article (excepte en mòbil/finestres petites).
+
+Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant `true` al paràmetre opcional `full_width`.
+
+{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }}
+
+#### Ús
+
+```
+{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}}
+```
+
 ## Cites
 
 ### Cites multillenguatge

content/blog/shortcodes.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2023-06-05
+updated = 2023-07-05
 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]
@@ -46,6 +46,20 @@ Las imágenes con demasiado brillo o contraste pueden ser demasiado discordantes
 {{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") */}}
 ```
 
+### Imagen a ancho completo
+
+La imagen se expandirá para coincidir con el ancho del encabezado, que generalmente es más ancho que el texto del artículo (excepto en móvil/ventanas pequeñas).
+
+Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando el valor `true` al parámetro opcional `full_width`.
+
+{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") }}
+
+#### Uso
+
+```
+{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") */}}
+```
+
 ## Citas
 
 ### Citas multilenguaje

content/blog/shortcodes.md

@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2023-06-05
+updated = 2023-07-05
 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]
@@ -45,6 +45,20 @@ Images with too much brightness or contrast can be jarring against a dark backgr
 {{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") */}}
 ```
 
+### Full-width image
+
+The image will expand to match the width of the header, which is usually wider than the article text (except on mobile/small windows).
+
+All other image shortcodes can be made into full-width by setting the optional parameter `full_width` to `true`.
+
+{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }}
+
+#### Usage
+
+```
+{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}}
+```
+
 ## Quotes
 
 ### Multilingual quotes

sass/main.scss

@@ -120,13 +120,24 @@ body {
 }
 
 article {
-    max-width: calc(var(--max-layout-width) - 12rem);
+    $base-margin: 6rem;
+
+    max-width: calc(var(--max-layout-width) - 2*$base-margin);
     margin: 0 auto;
 
     p,
     li {
         font-family: var(--serif-font);
     }
+
+    .full-width {
+        width: auto;
+        height: auto;
+        max-width: calc(100% + 2*$base-margin);
+        margin-left: -$base-margin;
+        margin-right: -$base-margin;
+        display: flex;
+    }
 }
 
 .section-title {
@@ -254,3 +265,13 @@ p {
         font-size: 20px;
     }
 }
+
+@media only screen and (max-width: 1000px) {
+    article .full-width {
+        width: auto;
+        max-width: none;
+        margin-left: 0;
+        margin-right: 0;
+        display: block;
+    }
+}

templates/shortcodes/dimmable_image.html

@@ -1,2 +1,8 @@
 {% set meta = get_image_metadata(path=src, allow_missing=true) %}
+{% if full_width | default(value=false) %}
+    <div class="full-width">
+{% endif %}
 <img class="dimmable-image" src="{{ get_url(path=src) }}" {% if alt %}alt="{{ alt }}" {% endif %} {% if meta.width %}width="{{ meta.width }}" {% endif %} {% if meta.height %}height="{{ meta.height }}" {% endif %}/>
+{% if full_width | default(value=false) %}
+    </div>
+{% endif %}

templates/shortcodes/dual_theme_image.html

@@ -1,4 +1,10 @@
 {% set light_meta = get_image_metadata(path=light_src, allow_missing=true) %}
 {% set dark_meta = get_image_metadata(path=dark_src, allow_missing=true) %}
+{% if full_width | default(value=false) %}
+    <div class="full-width">
+{% endif %}
 <img src="{{ get_url(path=light_src) }}" {% 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="{{ get_url(path=dark_src) }}" {% 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">
+{% if full_width | default(value=false) %}
+    </div>
+{% endif %}

templates/shortcodes/full_width_image.html

@@ -0,0 +1,4 @@
+{% set meta = get_image_metadata(path=src, allow_missing=true) %}
+<div class="full-width">
+<img {% if src %}src="{{ get_url(path=src) }}" {% endif %} {% if alt %}alt="{{ alt }}" {% endif %} {% if meta.width %}width="{{ meta.width }}" {% endif %} {% if meta.height %}height="{{ meta.height }}" {% endif %}/>
+</div>

templates/shortcodes/invertible_image.html

@@ -1,2 +1,8 @@
 {% set meta = get_image_metadata(path=src, allow_missing=true) %}
+{% if full_width | default(value=false) %}
+    <div class="full-width">
+{% endif %}
 <img class="invertible-image" {% if src %}src="{{ get_url(path=src) }}" {% endif %} {% if alt %}alt="{{ alt }}" {% endif %} {% if meta.width %}width="{{ meta.width }}" {% endif %} {% if meta.height %}height="{{ meta.height }}" {% endif %}/>
+{% if full_width | default(value=false) %}
+    </div>
+{% endif %}