From 2291932a6afbea985d87c8871f6882d0d1ae4941 Mon Sep 17 00:00:00 2001 From: poolitzer Date: Wed, 26 Nov 2025 23:07:27 +0100 Subject: [PATCH 1/4] :sparkles: feat(local_image): introduce dark option for local_image --- content/blog/mastering-tabi-settings/index.md | 1 + templates/macros/list_posts.html | 11 ++++++++++- templates/partials/cards_pages.html | 11 ++++++++++- 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md index 74290127..1adfa5b1 100644 --- a/content/blog/mastering-tabi-settings/index.md +++ b/content/blog/mastering-tabi-settings/index.md @@ -415,6 +415,7 @@ 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 path to an alternative image to be shown in dark mode. When set, `local_image` is shown in light mode only. - `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. diff --git a/templates/macros/list_posts.html b/templates/macros/list_posts.html index 20761948..0de34be7 100644 --- a/templates/macros/list_posts.html +++ b/templates/macros/list_posts.html @@ -98,8 +98,17 @@
  • {% 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) %} + {{ post.extra.local_image_dark }} + {% endif %} {% set meta = get_image_metadata(path=post.extra.local_image, allow_missing=true) %} - {{ post.extra.local_image }} {% 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 %} + {% 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) %} + {{ page.extra.local_image_dark }} + {% endif %} {% set meta = get_image_metadata(path=page.extra.local_image, allow_missing=true) %} - {{ page.extra.local_image }} Date: Thu, 1 Jan 2026 23:54:22 +0100 Subject: [PATCH 2/4] Also support remote_image_dark --- templates/macros/list_posts.html | 13 +++++++++---- templates/partials/cards_pages.html | 10 +++++++++- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/templates/macros/list_posts.html b/templates/macros/list_posts.html index 0de34be7..ae7584a0 100644 --- a/templates/macros/list_posts.html +++ b/templates/macros/list_posts.html @@ -97,6 +97,7 @@ {% if post.extra.local_image or post.extra.remote_image %}
  • + {% if post.extra.local_image %} {% if post.extra.local_image_dark %} {# Show light image only in light mode, dark image only in dark mode #} @@ -114,13 +115,17 @@ {% if meta.width %}width="{{ meta.width }}"{% endif %} {% if meta.height %}height="{{ meta.height }}"{% endif %}> {% elif post.extra.remote_image %} - {{ post.extra.remote_image_dark }} + {% endif %} + {{ post.extra.remote_image }} {% endif %} - -
    • - {% endif %} {% if post.draft %}
  • {{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}
    • diff --git a/templates/partials/cards_pages.html b/templates/partials/cards_pages.html index c03a7d98..246a5e25 100644 --- a/templates/partials/cards_pages.html +++ b/templates/partials/cards_pages.html @@ -36,7 +36,15 @@ {% if meta.width %}width="{{ meta.width }}"{% endif %} {% if meta.height %}height="{{ meta.height }}"{% endif %}> {% elif page.extra.remote_image %} - {{ page.extra.remote_image_dark }} + {% endif %} + {% set meta = get_image_metadata(path=page.extra.remote_image_dark, allow_missing=true) %} + {{ page.extra.remote_image }} {% else %} From ddb06f36deab40e42f4f1d539ca3ff4e0e9d5472 Mon Sep 17 00:00:00 2001 From: poolitzer Date: Thu, 1 Jan 2026 23:59:56 +0100 Subject: [PATCH 3/4] And a take on the documentation --- content/blog/mastering-tabi-settings/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md index c7dffe55..49781782 100644 --- a/content/blog/mastering-tabi-settings/index.md +++ b/content/blog/mastering-tabi-settings/index.md @@ -416,6 +416,7 @@ invertible_image = false - `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 path to an alternative image to be shown in dark mode. When set, `local_image` is shown in light mode only. + - `remote_image` and `remote_image_dark` is an alternative which you can use when you want to set an URL instead. - `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. From c1840dfd3694efa5378fd94d2020544aae3eaf2b Mon Sep 17 00:00:00 2001 From: poolitzer Date: Wed, 7 Jan 2026 12:57:02 +0100 Subject: [PATCH 4/4] Fix: Missing close statement + wild ) --- templates/macros/list_posts.html | 1 + templates/partials/cards_pages.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/templates/macros/list_posts.html b/templates/macros/list_posts.html index ae7584a0..4e2eec91 100644 --- a/templates/macros/list_posts.html +++ b/templates/macros/list_posts.html @@ -126,6 +126,7 @@ alt="{{ post.extra.remote_image }}" src="{{ post.extra.remote_image }}"> {% endif %} + {% endif %} {% if post.draft %}
  • {{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}
    • diff --git a/templates/partials/cards_pages.html b/templates/partials/cards_pages.html index 246a5e25..3f944108 100644 --- a/templates/partials/cards_pages.html +++ b/templates/partials/cards_pages.html @@ -41,7 +41,7 @@ {% set meta_dark = get_image_metadata(path=page.extra.remote_image_dark, allow_missing=true) %} {{ page.extra.remote_image_dark }} + src="{{ page.extra.remote_image_dark }}"> {% endif %} {% set meta = get_image_metadata(path=page.extra.remote_image_dark, allow_missing=true) %}