mirror of
https://github.com/welpo/tabi.git
synced 2026-01-26 06:27:48 +01:00
✨ feat(projects): support dark mode image variants (#590)
Co-authored-by: welpo <welpo@users.noreply.github.com>
This commit is contained in:
Poolitzer
GitHub
parent
689934edfe
commit
7118ae7283
5 changed files with 61 additions and 7 deletions
|
|
@ -1,7 +1,7 @@
|
|||
+++
|
||||
title = "Domina la configuració de tabi: guia completa"
|
||||
date = 2023-09-18
|
||||
updated = 2026-01-01
|
||||
updated = 2026-01-13
|
||||
description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
|
||||
|
||||
[taxonomies]
|
||||
|
|
@ -409,6 +409,9 @@ invertible_image = false
|
|||
- `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.
|
||||
- `local_image_dark` és una variant opcional per al mode fosc. Requereix que `local_image` estigui configurat.
|
||||
- `remote_image` és una URL a una imatge externa, com a alternativa a `local_image`.
|
||||
- `remote_image_dark` és una variant opcional per al mode fosc. Requereix que `remote_image` estigui configurat.
|
||||
- `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.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
+++
|
||||
title = "Domina la configuración de tabi: guía completa"
|
||||
date = 2023-09-18
|
||||
updated = 2026-01-01
|
||||
updated = 2026-01-13
|
||||
description = "Descubre las múltiples maneras en que puedes personalizar tabi."
|
||||
|
||||
[taxonomies]
|
||||
|
|
@ -410,6 +410,9 @@ invertible_image = false
|
|||
- `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.
|
||||
- `local_image_dark` es una variante opcional para el modo oscuro. Requiere que `local_image` esté configurado.
|
||||
- `remote_image` es una URL a una imagen externa, como alternativa a `local_image`.
|
||||
- `remote_image_dark` es una variante opcional para el modo oscuro. Requiere que `remote_image` esté configurado.
|
||||
- `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.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
+++
|
||||
title = "Mastering tabi Settings: A Comprehensive Guide"
|
||||
date = 2023-09-18
|
||||
updated = 2026-01-01
|
||||
updated = 2026-01-13
|
||||
description = "Discover the many ways you can customise your tabi site."
|
||||
|
||||
[taxonomies]
|
||||
|
|
@ -415,6 +415,9 @@ invertible_image = false
|
|||
- `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.
|
||||
- `local_image_dark` is an optional dark mode variant. Requires `local_image` to be set.
|
||||
- `remote_image` is a URL to an external image, as an alternative to `local_image`.
|
||||
- `remote_image_dark` is an optional dark mode variant. Requires `remote_image` to be set.
|
||||
- `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.
|
||||
|
|
|
|||
|
|
@ -97,15 +97,37 @@
|
|||
{% if post.extra.local_image or post.extra.remote_image %}
|
||||
<li class="post-thumbnail">
|
||||
<a href="{{ post.permalink }}">
|
||||
{% if post.extra.local_image_dark and not post.extra.local_image %}
|
||||
{{ throw(message="ERROR: `local_image_dark` requires `local_image` to be set in " ~ post.path) }}
|
||||
{% endif %}
|
||||
{% if post.extra.remote_image_dark and not post.extra.remote_image %}
|
||||
{{ throw(message="ERROR: `remote_image_dark` requires `remote_image` to be set in " ~ post.path) }}
|
||||
{% endif %}
|
||||
{% if post.extra.local_image %}
|
||||
{% if post.extra.local_image_dark %}
|
||||
{# Show light image only in light mode, dark image only in dark mode #}
|
||||
{% set meta_dark = get_image_metadata(path=post.extra.local_image_dark, allow_missing=true) %}
|
||||
<img class="thumbnail-image img-dark"
|
||||
alt="{{ post.extra.local_image_dark }}"
|
||||
src="{{ get_url(path=post.extra.local_image_dark) }}"
|
||||
{% if meta_dark.width %}width="{{ meta_dark.width }}"{% endif %}
|
||||
{% if meta_dark.height %}height="{{ meta_dark.height }}"{% endif %}>
|
||||
{% endif %}
|
||||
{% set meta = get_image_metadata(path=post.extra.local_image, allow_missing=true) %}
|
||||
<img class="thumbnail-image"
|
||||
<img class="thumbnail-image{% if post.extra.local_image_dark %} img-light{% endif %}"
|
||||
alt="{{ post.extra.local_image }}"
|
||||
src="{{ get_url(path=post.extra.local_image) }}"
|
||||
{% if meta.width %}width="{{ meta.width }}"{% endif %}
|
||||
{% if meta.height %}height="{{ meta.height }}"{% endif %}>
|
||||
{% elif post.extra.remote_image %}
|
||||
<img class="thumbnail-image"
|
||||
{% if post.extra.remote_image_dark %}
|
||||
{# Show light image only in light mode, dark image only in dark mode #}
|
||||
{% set meta_dark = get_image_metadata(path=post.extra.remote_image_dark, allow_missing=true) %}
|
||||
<img class="thumbnail-image img-dark"
|
||||
alt="{{ post.extra.remote_image_dark }}"
|
||||
src="{{ get_url(path=post.extra.remote_image_dark) }}">
|
||||
{% endif %}
|
||||
<img class="thumbnail-image{% if post.extra.remote_image_dark %} img-light{% endif %}"
|
||||
alt="{{ post.extra.remote_image }}"
|
||||
src="{{ post.extra.remote_image }}">
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -19,15 +19,38 @@
|
|||
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_dark and not page.extra.local_image %}
|
||||
{{ throw(message="ERROR: `local_image_dark` requires `local_image` to be set in " ~ page.path) }}
|
||||
{% endif %}
|
||||
{% if page.extra.remote_image_dark and not page.extra.remote_image %}
|
||||
{{ throw(message="ERROR: `remote_image_dark` requires `remote_image` to be set in " ~ page.path) }}
|
||||
{% endif %}
|
||||
{% if page.extra.local_image %}
|
||||
{% if page.extra.local_image_dark %}
|
||||
{# Show light image only in light mode, dark image only in dark mode #}
|
||||
{% set meta_dark = get_image_metadata(path=page.extra.local_image_dark, allow_missing=true) %}
|
||||
<img class="card-image img-dark"
|
||||
alt="{{ page.extra.local_image_dark }}"
|
||||
src="{{ get_url(path=page.extra.local_image_dark) }}"
|
||||
{% if meta_dark.width %}width="{{ meta_dark.width }}"{% endif %}
|
||||
{% if meta_dark.height %}height="{{ meta_dark.height }}"{% endif %}>
|
||||
{% endif %}
|
||||
{% set meta = get_image_metadata(path=page.extra.local_image, allow_missing=true) %}
|
||||
<img class="{{ card_image_class }}"
|
||||
<img class="{{ card_image_class }}{% if page.extra.local_image_dark %} img-light{% endif %}"
|
||||
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_class }}"
|
||||
{% if page.extra.remote_image_dark %}
|
||||
{# Show light image only in light mode, dark image only in dark mode #}
|
||||
{% set meta_dark = get_image_metadata(path=page.extra.remote_image_dark, allow_missing=true) %}
|
||||
<img class="card-image img-dark"
|
||||
alt="{{ page.extra.remote_image_dark }}"
|
||||
src="{{ page.extra.remote_image_dark }}">
|
||||
{% endif %}
|
||||
{% set meta = get_image_metadata(path=page.extra.remote_image, allow_missing=true) %}
|
||||
<img class="{{ card_image_class }}{% if page.extra.remote_image_dark %} img-light{% endif %}"
|
||||
alt="{{ page.extra.remote_image }}"
|
||||
src="{{ page.extra.remote_image }}">
|
||||
{% else %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue