# Image Markdown Render Hook not working on Netlify

**URL:** <https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876>\
**Category:** support\
**Tags:** netlify\
**Created:** [May 13, 2021, 4:18pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876 "2021-05-13T16:18:33Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![elneto](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/elneto/32/14348_2.png) [@elneto](https://discourse.gohugo.io/u/elneto)\
**Post date:** [May 13, 2021, 4:18pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876/1 "2021-05-13T16:18:33Z")

</div>

Hello, my **markdown render hook** works perfectly in local, with `hugo serve` , with `hugo` and with `hugo --gc --minify`. I am using the [ace-documentation](https://github.com/vantagedesign/ace-documentation) theme, and adding the ‘render-image’ on the root folder (not in the theme).

But it does not work on Netlify.

Here is my `layout/_default/_markup/render-image.html`

```
{{ if .Title }}
  <figure class="d-block text-center">
    <img class="screenshot img-fluid" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
    <figcaption class="figure-caption text-center">{{ .Title }}</figcaption>
  </figure>
{{ else }}
  <img class="screenshot img-fluid" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
{{ end }}

```

And this is how I call it:

`![logging in image](/uploads/100002010000023d00000192013962b736bbcad0.png "Fig. 1: Log in page")`

It generates this on my local computer, works well! (hugo v0.83.1-5AFE0A57+extended linux/amd64 BuildDate=2021-05-02T14:38:05Z VendorInfo=gohugoio)

```
<p>

  <figure class="d-block text-center">
    <img class="screenshot img-fluid" src="/uploads/100002010000023d00000192013962b736bbcad0.png" alt="logging in image" title="Fig. 1: Log in page" />
    <figcaption class="figure-caption text-center">Fig. 1: Log in page</figcaption>
  </figure>
</p>

```

It generates this on Netlify. **It does not add the figure or the class, the markdown render hook is not applied**. ☹

`<p><img src="/uploads/100002010000023d00000192013962b736bbcad0.png" alt="logging in image" title="Fig. 1: Log in page"></p>`

I have this in config.toml (among other settings):

```
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

```

There are no errors on the build, and this is the build/deploy log:

```
11:48:49 AM: Build ready to start
11:48:51 AM: build-image version: 0582042f4fc261adc7bd8333f34884959c577302
11:48:51 AM: build-image tag: v3.7.6
11:48:51 AM: buildbot version: d3b46eed9a3db45474c8cf94296b8a366d780a85
11:48:51 AM: Fetching cached dependencies
11:48:51 AM: Starting to download cache of 83.2MB
11:48:52 AM: Finished downloading cache in 636.232395ms
11:48:52 AM: Starting to extract cache
11:48:54 AM: Finished extracting cache in 1.993257192s
11:48:54 AM: Finished fetching cache in 2.646683267s
11:48:54 AM: Starting to prepare the repo for build
11:48:54 AM: Preparing Git Reference refs/heads/master
11:48:55 AM: Parsing package.json dependencies
11:48:56 AM: Starting build script
11:48:56 AM: Installing dependencies
11:48:56 AM: Python version set to 2.7
11:48:57 AM: Started restoring cached node version
11:48:59 AM: Finished restoring cached node version
11:49:00 AM: v12.18.0 is already installed.
11:49:00 AM: Now using node v12.18.0 (npm v6.14.4)
11:49:00 AM: Started restoring cached build plugins
11:49:00 AM: Finished restoring cached build plugins
11:49:01 AM: Attempting ruby version 2.7.1, read from environment
11:49:02 AM: Using ruby version 2.7.1
11:49:02 AM: Using PHP version 5.6
11:49:02 AM: Started restoring cached go cache
11:49:02 AM: Finished restoring cached go cache
11:49:02 AM: go version go1.14.4 linux/amd64
11:49:02 AM: go version go1.14.4 linux/amd64
11:49:02 AM: Installing missing commands
11:49:02 AM: Verify run directory
11:49:04 AM: ​
11:49:04 AM: ────────────────────────────────────────────────────────────────
11:49:04 AM: Netlify Build                                                 
11:49:04 AM: ────────────────────────────────────────────────────────────────
11:49:04 AM: ​
11:49:04 AM: ❯ Version
11:49:04 AM: @netlify/build 11.14.0
11:49:04 AM: ​
11:49:04 AM: ❯ Flags
11:49:04 AM: deployId: 609d4a61d0dcbe00087d0ed6
11:49:04 AM: ​
11:49:04 AM: ❯ Current directory
11:49:04 AM: /opt/build/repo
11:49:04 AM: ​
11:49:04 AM: ❯ Config file
11:49:04 AM: No config file was defined: using default values.
11:49:04 AM: ​
11:49:04 AM: ❯ Context
11:49:04 AM: production
11:49:04 AM: ​
11:49:04 AM: ────────────────────────────────────────────────────────────────
11:49:04 AM: 1. Build command from Netlify app                             
11:49:04 AM: ────────────────────────────────────────────────────────────────
11:49:04 AM: ​
11:49:04 AM: $ hugo --gc --minify
11:49:04 AM: Building sites …
11:49:04 AM: | EN
11:49:04 AM: +------------------+----+
11:49:04 AM: Pages | 15
11:49:04 AM: Paginator pages | 0
11:49:04 AM: Non-page files | 0
11:49:04 AM: Static files | 28
11:49:04 AM: Processed images | 2
11:49:04 AM: Aliases | 0
11:49:04 AM: Sitemaps | 1
11:49:04 AM: Cleaned | 7
11:49:04 AM: Total in 453 ms
11:49:04 AM: ​
11:49:04 AM: (build.command completed in 689ms)
11:49:04 AM: ​
11:49:04 AM: ────────────────────────────────────────────────────────────────
11:49:04 AM: 2. Deploy site                                                
11:49:04 AM: ────────────────────────────────────────────────────────────────
11:49:04 AM: ​
11:49:04 AM: Creating deploy upload records
11:49:04 AM: Starting to deploy site from 'public'
11:49:04 AM: Creating deploy tree 
11:49:05 AM: 0 new files to upload
11:49:05 AM: 0 new functions to upload
11:49:05 AM: Site deploy was successfully initiated
11:49:05 AM: ​
11:49:05 AM: (Deploy site completed in 137ms)
11:49:05 AM: ​
11:49:05 AM: ────────────────────────────────────────────────────────────────
11:49:05 AM: Netlify Build Complete                                        
11:49:05 AM: ────────────────────────────────────────────────────────────────
11:49:05 AM: ​
11:49:05 AM: (Netlify Build completed in 907ms)
11:49:05 AM: Starting post processing
11:49:05 AM: Post processing - HTML
11:49:05 AM: Post processing - header rules
11:49:05 AM: Post processing - redirect rules
11:49:05 AM: Post processing done
11:49:05 AM: Caching artifacts
11:49:05 AM: Started saving build plugins
11:49:05 AM: Finished saving build plugins
11:49:05 AM: Started saving pip cache
11:49:05 AM: Finished saving pip cache
11:49:05 AM: Started saving emacs cask dependencies
11:49:05 AM: Site is live ✨
11:49:05 AM: Finished saving emacs cask dependencies
11:49:05 AM: Started saving maven dependencies
11:49:05 AM: Finished saving maven dependencies
11:49:05 AM: Started saving boot dependencies
11:49:05 AM: Finished saving boot dependencies
11:49:05 AM: Started saving rust rustup cache
11:49:05 AM: Finished saving rust rustup cache
11:49:05 AM: Started saving go dependencies
11:49:05 AM: Finished saving go dependencies
11:49:05 AM: Build script success
11:49:16 AM: Finished processing build request in 24.912903947s

```

What I tried:

Delete browser cookies, deploy again but deleting the cache first.

I checked [this discussion](https://discourse.gohugo.io/t/render-hooks-not-hooking/23605), tried their workaround adding `{{ $c := .}}` at the beginning of the hook, but still does not work.

I think Netlify is using hugo v0.82 but or v.081 but I can’t find that config anymore. 🙂

Any help would be appreciated, thanks!

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [May 13, 2021, 4:31pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876/2 "2021-05-13T16:31:24Z")

</div>

What is the baseURL in the project config?

Are you publishing to a subdomain or subdirectory?

> [@elneto](#):
>
> I think Netlify is using hugo v0.82 but or v.081 but I can’t find that config anymore.

The file is called `netlify.toml` and you can find the documentation about it over [here](https://docs.netlify.com/configure-builds/file-based-configuration/)

---

<div class="post-metadata">

**Author:** ![elneto](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/elneto/32/14348_2.png) [@elneto](https://discourse.gohugo.io/u/elneto)\
**Post date:** [May 13, 2021, 4:39pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876/3 "2021-05-13T16:39:20Z")

</div>

Thanks, this is the baseURL, the first line in the config.

baseURL = “[https://sdgsmanual.netlify.app/](https://sdgsmanual.netlify.app/)”

I’m not posting to any subdomain or subdirectory.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [May 13, 2021, 4:57pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876/4 "2021-05-13T16:57:16Z")

</div>

Using a forward slash at the beginning of a URL will point to the host root, therefore the image will 404 when publishing to either a subdomain or sub-directory.

However I am not quite sure why the HTML for the `figure` element is not outputted without seeing the project context.

Also the `baseURL` value must match the one that is going to be used in reality.

I think that it would be best if you could share a minimal project with dummy content that reproduces the issue.

P.S. Impressive to see Hugo being used for the manual of a UN Agency’s website (cc: @bep )

---

<div class="post-metadata">

**Author:** ![elneto](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/elneto/32/14348_2.png) [@elneto](https://discourse.gohugo.io/u/elneto)\
**Post date:** [May 13, 2021, 5:12pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876/5 "2021-05-13T17:12:35Z")

</div>

I’ll just make the repo public ([GitHub - elneto/sdgsmanual: hugo generated website for the manual of the sdgs.un.org website](https://github.com/elneto/sdgsmanual))

This is a page where the error happens: [Logging in | sdgs.un.org manual](https://sdgsmanual.netlify.app/login/logging-in/)

I don’t think I’m sharing any private info. I’m using forestry as well, if it helps.

Yes, I was exploring Gatsby but I’m starting to like how fast are the builds in Hugo, just getting into it, thanks for the great work guys!

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [May 13, 2021, 5:26pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876/6 "2021-05-13T17:26:10Z")

</div>

Try removing the forward slash from the `.Destination` of the Markdown Render Image Hook and see if that fixes the issue.

For example [line 9 of content/login/logging-in.md](https://github.com/elneto/sdgsmanual/blame/master/content/login/logging-in.md#L9) should become:

```auto
![logging in image](uploads/100002010000023d00000192013962b736bbcad0.png "Fig. 1: Log in page")

```

Repeat for the other images as well.

**EDIT**  
When I visit: [Logging in | sdgs.un.org manual](https://sdgsmanual.netlify.app/login/logging-in/) the images show up on my end.

---

<div class="post-metadata">

**Author:** ![elneto](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/elneto/32/14348_2.png) [@elneto](https://discourse.gohugo.io/u/elneto)\
**Post date:** [May 13, 2021, 6:04pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876/7 "2021-05-13T18:04:23Z")

</div>

Thanks Alexandros. Unfortunately that didn’t solve the issue. Now the image doesn’t load. Haven’t inspected the page though, I’m on mobile.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 13, 2021, 6:14pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876/8 "2021-05-13T18:14:47Z")

</div>

Markdown render hooks for links and images were added with Hugo v0.62.0.

I suspect that you have not specified a Hugo version in your Netlify configuration, and it is using v0.54.

See [https://docs.netlify.com/configure-builds/common-configurations/hugo/#hugo-version](https://docs.netlify.com/configure-builds/common-configurations/hugo/#hugo-version).

---

<div class="post-metadata">

**Author:** ![elneto](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/elneto/32/14348_2.png) [@elneto](https://discourse.gohugo.io/u/elneto)\
**Post date:** [May 13, 2021, 6:36pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876/9 "2021-05-13T18:36:13Z")

</div>

This was the problem. My bad. I hadn’t specified the  
HUGO\_VERSION.

Thank you Joe and Alexandros for your help!

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [May 15, 2021, 6:36pm UTC](https://discourse.gohugo.io/t/image-markdown-render-hook-not-working-on-netlify/32876/10 "2021-05-15T18:36:54Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.