Responsive Image Mode Home.html

🖼️ Feature: Dynamic Post Image Light/Dark Mode Switching

1. YAML Front Matter Configuration

Add the following fields to the post’s YAML front matter:

light_image:
  path: /path/to/light-image.webp
  lqip: data:image/webp;base64,...
  alt: Alt text for light mode image
dark_image:
  path: /path/to/dark-image.webp
  lqip: data:image/webp;base64,...
  alt: Alt text for dark mode image

2.Layout Update

Inside the _layouts in home.html, within the {% if post.image %} block, insert the following code after {% assign card_body_col = '7' %} and before {% endif %}.

    {% elsif post.light_image and post.dark_image %}
      <div class="col-md-5">
        <div class="preview-img  blur">
          <img
            data-src="{{ post.light_image.path }}"
            alt="{{ post.light_image.alt}}"
            data-lqip="true"
            src="{{ post.light_image.lqip }}"
            class="popup img-link light shimmer"
            loading="lazy"
          >
          <img
            data-src="{{ post.dark_image.path }}"
            alt="{{ post.dark_image.alt}}"
            data-lqip="true"
            src="{{ post.dark_image.lqip }}"
            class="popup img-link dark"
            loading="lazy"
          >
        </div>
      </div>

      {% assign card_body_col = '7' %}
    {% endif %}

At the beginning of the post, use:

![Light mode only](/path/to/light-image.webp){: .light }
![Dark mode only](/path/to/dark-image.webp){: .dark }

Images can be PNG, not just WebP. Currently, this requires Liquid. If needed, it can be added in home.html.