Clean way to link images to their own sources?

support
1

In my content files I have images, and I want to make it so when you click the image it opens the source file.

I can do this successfully with [![](img-path)](img-path)

However, writing the img-path twice every time I place an image seems like wasted energy.

Is there a universal way to set all of my images to become links to their own source paths?

EDIT: SOLUTION FOR ANYONE WITH A SIMILAR QUESTION:

Per MunifTanjim’s suggestion, I implemented a shortcode for this.

In a file called linked-img.html, place the following:

{{ $path := .Get 0 }}
<a href={{ $path }}>
    <img src={{ $path }} />
</a>

You can add extra attributes as you please.

Depending on your setup, you may need to change the first line to include your site’s baseURL. In that case swap it with:

{{ $path := printf "%s%s" .Site.BaseURL (.Get 0) }}

Again, as needed you can tweak the string there as needed until Hugo is generating the paths the way you want with your setup.

Then when you want to place an image in your .md file just type:

{{< linked-img "/path/to/image.png" >}}

And keep in mind that if you screw up any of your shortcodes in your .md file, all of the other shortcodes will fail too.

2

Short answer, no. There’s no built-in/universal way for doing what you want.

However, if you really really want to do that, you can make a Hugo Shortcode for it.

2 Likes
3

I read the shortcode guide, but I’m having further issues.

I can’t get any shortcodes to render properly. When I include them in my posts they just get displayed as normal text.

Even for the built-in shortcodes; if I type {{< tweet spf13 666616452582129664 >}} in my .md post, it just gets displayed as {{< tweet spf13 666616452582129664 >}} on my page. I even left line breaks above and below the shortcode call.

Is there some fundamental aspect of shortcodes that I’m misunderstanding?

4

It works for me. Btw, the built-in twitter shortcode doesn’t need the username. Just including {{< tweet 666616452582129664 >}} works.
If your site is in a repository, sharing it would help to track down what’s wrong.

5

I figure out the problem. And perhaps this is a bug.

As long as you put a bad shortcode in a post, all other shortcodes on the page break too.

Example, if you write:

{{< tweet spf13 666616452582129664 >}}
{{< nonexistent-shortcode >}}

then both with just appear as plain text on your page.

So when I made my custom linked-image shortcode, I must have coded it wrong. That made it an improper shortcode, so even when I tried the twitter shortcode it would just show up broken.

Once I tried the twitter shortcode on its own, it worked. So all I have to do is fix my linked-image shortcode.

I may submit that as an issue.

6

I don’t think this is a bug. Besides Hugo tells you exactly where the problem lies especially with the --verbose flag.

7

Oh right, I didn’t think to check the console. I was just looking at the web output.

It still seems odd that it can’t just ignore improper shortcode usage.

I fixed my linked image shortcode, I’ll add that in an edit to my original post in case anyone else has a similar question in the future.