Adding a link to an image in a .md file that opens another .md file

support
1

I am using the casper theme. In there the folder structure is like this:

-website
----archetypes
----content
--------post
----data
----layouts
----static
----themes

All the .md files in post folder are pages.
in the post folder I have two .md files, let’s call them A.md and B.md.
In the A.md I have an image, let’s call it image.png.

I want to add a link to image.png such that when the image is clicked, it opens B.md and shows its content i.e I want the webpage address to become www.mywebsite.com/B when image in A.md is pressed.

How can I do that? Thanks in advance for your help.

2

For clarification, are you asking how to write an HTML link? Have you tried doing it, and it is failing?

Just want to know if you are asking an HTML question, or a Hugo question. :slight_smile:

<a href="www.mywebsite.com/b"><img src="/image.png" /></a>
3

Just to clarify: you want to make an image in one page link to a second page? That’s just a combination of the markdown syntaxes for links and images:

Link: [Text](URL)
Image: ![Alt Text](URL)

Linked image: [![Alt Text](Image URL)](Link URL)

And, for bonus points, you can use the ref and relref shortcodes to generate the link to the other page. So, for your example:

[![This is my image](/path/to/image.png)]({{< relref "post/B.md" >}})
3 Likes
4

Thanks for the response, I was asking about markdown, not HTML. I appreciate your answer.

1 Like
5

Thank you very much, this is exactly what I was looking for :slightly_smiling: