✨ feat: add option to invert images in project cards (#600)

content/blog/mastering-tabi-settings/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2025-08-07
+updated = 2025-12-27
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -402,12 +402,14 @@ weight = 1
 
 [extra]
 local_image = "img/tabi.webp"
+invertible_image = false
 ```
 
 - `title` és el títol del projecte.
 - `description` és la descripció del projecte.
 - `weight` determina l'ordre en què es mostren els projectes. Com menor sigui el pes, més amunt apareixerà el projecte.
 - `local_image` és la ruta de la imatge del projecte. Aquesta imatge es mostra a la pàgina de projectes.
+- `invertible_image` inverteix els colors de la imatge en mode fosc. Útil per a logotips o icones en blanc i negre.
 
 Quan un usuari faci clic a la imatge o al títol d'un projecte, serà portat a la pàgina del projecte. Si prefereixes que els usuaris vagin a un enllaç extern, pots establir `link_to = "https://example.com"` a la secció `[extra]` del fitxer `.md` del projecte.
 

content/blog/mastering-tabi-settings/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2025-08-07
+updated = 2025-12-27
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -403,12 +403,14 @@ weight = 1
 
 [extra]
 local_image = "img/tabi.webp"
+invertible_image = false
 ```
 
 - `title` es el título del proyecto.
 - `description` es la descripción del proyecto.
 - `weight` determina el orden en el que se muestran los proyectos. Cuanto menor sea el peso, más arriba aparecerá el proyecto.
 - `local_image` es la ruta de la imagen del proyecto. Esta imagen se muestra en la página de proyectos.
+- `invertible_image` invierte los colores de la imagen en modo oscuro. Útil para logotipos o iconos en blanco y negro.
 
 Cuando un usuario haga clic en la imagen o el título de un proyecto, será llevado a la página del proyecto. Si prefieres que los usuarios vayan a un enlace externo, puedes establecer `link_to = "https://example.com"` en la sección `[extra]` del archivo `.md` del proyecto.
 

content/blog/mastering-tabi-settings/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2025-08-07
+updated = 2025-12-27
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -408,12 +408,14 @@ weight = 1
 
 [extra]
 local_image = "img/tabi.webp"
+invertible_image = false
 ```
 
 - `title` is the title of the project.
 - `description` is the description of the project.
 - `weight` determines the order in which the projects are shown. The lower the weight, the higher the project will appear.
 - `local_image` is the path to the image of the project. This image is shown on the projects page.
+- `invertible_image` inverts the image colours in dark mode. Useful for black and white logos/icons.
 
 When a user clicks on the image or title of a project, they will be taken to the project's page. If you'd rather have users go to an external link, you can set `link_to = "https://example.com` in the `[extra]` section of the project's `.md` file.
 

templates/partials/cards_pages.html

@@ -18,15 +18,16 @@
             {% if page.taxonomies %}
             data-tags="{% for tax_name, terms in page.taxonomies %}{% for term in terms | unique %}{{ term | lower }}{% if not loop.last %},{% endif %}{% endfor %}{% endfor %}"
             {% endif %}>
+            {% if page.extra.invertible_image %}{% set card_image_class = "card-image invertible-image" %}{% else %}{% set card_image_class = "card-image" %}{% endif %}
             {% if page.extra.local_image %}
                 {% set meta = get_image_metadata(path=page.extra.local_image, allow_missing=true) %}
-                <img class="card-image"
+                <img class="{{ card_image_class }}"
                     alt="{{ page.extra.local_image }}"
                     src="{{ get_url(path=page.extra.local_image) }}"
                     {% if meta.width %}width="{{ meta.width }}"{% endif %}
                     {% if meta.height %}height="{{ meta.height }}"{% endif %}>
             {% elif page.extra.remote_image %}
-                <img class="card-image"
+                <img class="{{ card_image_class }}"
                     alt="{{ page.extra.remote_image }}"
                     src="{{ page.extra.remote_image }}">
             {% else %}