zloy_linux/blog.zlinux.ru
3
0
Fork 0
Code Issues Pull Requests Activity

✨ feat(projects): support dark mode image variants (#590)

Browse Source
This commit is contained in:
Zloy Linux
2026-01-16 14:40:11 +07:00
parent 432ba628a7
commit 56afdb5a3a
2 changed files with 49 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
themes/tabi/templates/macros/list_posts.html
View File

@@ -97,15 +97,37 @@
{% if post.extra.local_image or post.extra.remote_image %} {% if post.extra.local_image or post.extra.remote_image %}
<li class="post-thumbnail"> <li class="post-thumbnail">
<a href="{{ post.permalink }}"> <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 %}
{% 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) %} {% 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 }}" alt="{{ post.extra.local_image }}"
src="{{ get_url(path=post.extra.local_image) }}" src="{{ get_url(path=post.extra.local_image) }}"
{% if meta.width %}width="{{ meta.width }}"{% endif %} {% if meta.width %}width="{{ meta.width }}"{% endif %}
{% if meta.height %}height="{{ meta.height }}"{% endif %}> {% if meta.height %}height="{{ meta.height }}"{% endif %}>
{% elif post.extra.remote_image %} {% 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 }}" alt="{{ post.extra.remote_image }}"
src="{{ post.extra.remote_image }}"> src="{{ post.extra.remote_image }}">
{% endif %} {% endif %}

27
themes/tabi/templates/partials/cards_pages.html
View File

@@ -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 %}" data-tags="{% for tax_name, terms in page.taxonomies %}{% for term in terms | unique %}{{ term | lower }}{% if not loop.last %},{% endif %}{% endfor %}{% endfor %}"
{% endif %}> {% 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.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 %}
{% 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) %} {% 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 }}" alt="{{ page.extra.local_image }}"
src="{{ get_url(path=page.extra.local_image) }}" src="{{ get_url(path=page.extra.local_image) }}"
{% if meta.width %}width="{{ meta.width }}"{% endif %} {% if meta.width %}width="{{ meta.width }}"{% endif %}
{% if meta.height %}height="{{ meta.height }}"{% endif %}> {% if meta.height %}height="{{ meta.height }}"{% endif %}>
{% elif page.extra.remote_image %} {% 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 }}" alt="{{ page.extra.remote_image }}"
src="{{ page.extra.remote_image }}"> src="{{ page.extra.remote_image }}">
{% else %} {% else %}