How to Add a Hyperlinked Image with CSS Classes

Help
1

I want to add hyperlinks to the images in a blockquote that are switched by the dark/light mode toggle. Here’s the modified template I am using.

Desired behavior:

  • Hovering the image with the cursor won’t show the image path or the usual popup cursor.
  • Clicking the image will open the hyperlink instead of the usual image pop-up.

I have two cases:

Case 1 (Markdown Syntax)

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

:white_check_mark: Hyperlink works
:x: CSS classes (.dark .w-25) don’t work

Case 2 (HTML Syntax)

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

:x: Hyperlink does not work
:white_check_mark: CSS classes (.dark w-25) work

Operations you have already tried

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

<a href="https://example.com/source">
    <img src="/assets/images/header/dark.webp" 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/dark.webp');
}

But I couldn’t get my desired output. How to solve this issue?

1 Like
3

Here I have kept the details including the converted html output:

1 Like
4

Case 1: the classes don’t work, or it doesn’t even add the classes to the final html?
Case 2: try to use the src like this: src="{{ /assets/images/header/dark.webp | relative_url }}". For more info about relative_url check the docs.

1 Like
5

In case 1, it doesn’t even add the classes in the processed html. Kindly check the details of the GitHub discussion (How to Add a Hyperlinked Image with CSS Classes · cotes2020/jekyll-theme-chirpy · Discussion #2257 · GitHub).
If the cases are like:

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>

Here’s how they are processed (inspected from the browser):

  <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>

I am unsure if there is anything to do with the relative path/URL. As you can see, the image paths are working okay for both cases. But hyperlinks are not applied to the image in this 2nd case.

1 Like
6

Case 1 might be a limitation of Jekyll itself when dealing with converting the markdown, not sure though. Does it work to use it outside an hyperlink, just creating the image with the classes, like ![Alt Text](/assets/images/header/dark.webp){: .dark .w-25 }?

The generated html for case 2 is really weird, the fact that it is creating an additional a tag. Maybe the template uses a plugin that modifies how it handles the images? Idk.

1 Like
7

Yes, I resolved Case 1 today, forgot to mention it here.
I get my desired output if I simply use:

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

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

1 Like
8

I am confused with this too. I have shared the template Github link. Can you please check if you get to understand?

1 Like