Images and links in markdown

support
1

Hi,

I have the following HTML codes for links and images on my website:

<img class="lazy" src="https://example.com/images/placeholder.png" data-src="https://example.com/images/image.png" alt="Image">

<a href="" target="_blank" rel="noopener noreferrer"></a>

<a href="" target="_blank" rel="nofollow noopener noreferrer"></a>

<a href="" target="_blank" rel="nofollow noopener noreferrer" class="btn">Buy now</a> (this is a button)

How can I convert all this to markdown.

On this moment, all my pages are HTML but I want to start using markdown.

Is there any way to make it work?

Btw… I search on Google and this forum but I cannot find a solution.

2

Markdown isn’t made to accommodate all HTML features; it’s geared towards writing content. It isn’t the answer to every hyperlink possible. To find what you can do, read the Goldmark docs, and if you can’t accomplish your hyperlink put it in a shortcode.

3

How can I add shortcodes to images and links?

4

Please read the docs at https://gohugo.io/documentation/ and you will find many of your answers. :slight_smile:

5

I know how shortcodes work. Been using them for years in HTML, but I don’t know how to use them in markdown for images and links.

6

There’s a disconnect here.

If you know how shortcodes work, then you should know how to use them in markdown. If you know how to use them in markdown, then I don’t understand the question.

There are several examples of shortcodes in in the docs. Some of them are even specifically around images.

1 Like
7

I use shortcodes to add ads on a page the same way I do in HTML pages.

But I don’t know how to use them within images and links in markdown.

And if you look at my examples then you can see that these are not normal images and links (e.g., data-src="", class="lazy", etc.).

Do you understand now what I mean?

8

The docs about creating shortcodes has an example using images. Here’s another one. Here’s one you can modify for links.

Please read the docs thoroughly and try the examples.

Once you have tried the examples, if you still have questions, please read Requesting Help and follow the advice there.

1 Like
9

I created the following shortcodes for images and links:

/layouts/shortcodes/img.html:

<img class="lazy" src="placeholder-image.png" data-src="{{ .Get "data-src" }}" alt="{{ .Get "alt"}}">

For the placeholder image I use the following base64png image:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

Image in markdown file:

{{< img data-src="/images/example-image.png" alt="Image description">}}

/layouts/shortcodes/follow-link.html:

<a href="{{ .Get 1 }}" target="_blank" rel="noopener noreferrer">{{ .Get 0 }}</a>

Outbound follow link markdown file:

{{< follow-link "Example.com" "https://www.example.com" >}}

/layouts/shortcodes/nofollow-link.html:

<a href="{{ .Get 1 }}" target="_blank" rel="nofollow noopener noreferrer">{{ .Get 0 }}</a>

Nofollow link in markdown file:

{{< nofollow-link "Example.com" "https://www.example.com" >}}

10

I would use Render Hooks. That way you can change the default behavior of the markdown link and image tags.

Here is an example:

I have recently set this up on a Hugo site where the image is hosted on Cloudinary, and then I use the transformations there to generate a srcset of webp images that are lazyloaded.

1 Like
11

Does this work with the following?

normal loading images
lazy loading images
links with target="blank" rel="nofollow noopener noreferrer"
links with target="blank" rel="noopener noreferrer"
normal links

All on a single page.

So there are no default images and links. 1 page can contain a mix of the before mentioned links and images.

So not all images are lazy loading, not all links are outgoing links, not all outgoing links have nofollow, etc…

Does your solution work for this?

And why do you think your solution is better than shortcodes?

12

Go check out the docs: Configure markup | Hugo

It probably does all the stuff you want, but you’ll need to code it.

13

Ussually images use this format:

![Name of Caption or ref](https:\\www.location.com\image)

But I see that some pointed out the documentation to you as well. Look it over