Add a Hyperlinked Image with CSS Classes in Jekyll Chirpy Theme

I want to add hyperlinks to the images in a blockquote that are switched by the dark/light mode toggle. I am using the modified template, generated from Jekyll chirpy-starter.

I have two cases:

Case 1 (Markdown Syntax)

[![Alt Text](/assets/images/header/image-dark.png){: .dark .w-25 }](https://example.com/source)

In the Case 1 output:

❌ Hyperlink appears
✅ CSS classes (.dark w-25) don't appear

Case 2 (HTML Syntax)

<a href="https://example.com/source">
    <img src="/assets/images/header/image-dark.png" class="dark w-25" alt="Alt Text">
</a>

In the Case 2 output:

❌ Hyperlink does not appear
✅ CSS classes (.dark w-25) appear

Desired behavior:

Hyperlink should appear.
- Clicking the image will open the hyperlink on a new tab instead of the usual image pop-up in the chirpy theme.
CSS classes of the image (.dark .w-25) should appear.
- .dark: The image should appear in dark mode only.
- .w-25: The image width will be reduced to 25%.

Operations I already tried

To have both working hyperlink and CSS styling, I tried:

<a href="https://example.com/source">
    <img src="/assets/images/header/image-dark.png" class="dark-mode-img w-25" alt="Alt Text">
</a>

Then, in _sass/layout/urlimage.scss, I defined:

.mode-dark .dark-mode-img {
    content: url('/assets/images/header/image-dark.png');
}

But I couldn't get my desired output. What can I do?

As an example page _pages/testing.md:

---
layout: page
title: Testing
permalink: /testing/
---

Click the image to go to the source.  

1.
[![Alt Text](/assets/images/header/image-dark.png){: .dark .w-25 }](https://example.com/source)

2.
<a href="https://example.com/source">
    <img src="/assets/images/header/image-dark.png" class="dark w-25" alt="Alt Text">
</a>

Solution (?)

<a href="https://example.com/source">
    <img src="/assets/images/header/image-dark.png" class="dark-mode-img w-25" alt="Alt Text">
</a>

The HTML conversion of the body content is like:

<div class="content" style="text-align: justify;">
  <style>
    .content ul, .content ol {
      text-align: left !important;
    }
  </style>

  <p>Click the image to go to the source.</p>

  <p>
    1.
    <a href="https://example.com/source" class="img-link" target="_blank" rel="noopener noreferrer">
      <img src="/website-theme/assets/images/header/image-dark.png" alt="Alt Text" loading="lazy">
    </a>
  </p>

  <p>
    2.
    <a href="https://example.com/source" target="_blank" rel="noopener noreferrer"> </a>
    <a href="/website-theme/assets/images/header/image-dark.png" class="popup img-link dark w-25">
      <img src="/website-theme/assets/images/header/image-dark.png" alt="Alt Text" loading="lazy">
    </a>
  </p>

  <p>Solution (?)</p>

  <p>
    <a href="https://example.com/source" target="_blank" rel="noopener noreferrer"> </a>
    <a href="/website-theme/assets/images/header/image-dark.png" class="popup img-link dark-mode-img w-25">
      <img src="/website-theme/assets/images/header/image-dark.png" alt="Alt Text" loading="lazy">
    </a>
  </p>
</div>

Solution

My issue is solved. I get my desired output if I simply use:

[![Alt Text](/assets/images/header/image-dark.png)](https://example.com/source)
{: .dark .w-25 }

✅ Hyperlink appears
✅ CSS classes (.dark .w-25) appear