Image Markdown Render Hook not working on Netlify

support
1

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 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. :frowning:

<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, 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. :slight_smile:

Any help would be appreciated, thanks!

2

What is the baseURL in the project config?

Are you publishing to a subdomain or subdirectory?

The file is called netlify.toml and you can find the documentation about it over here

1 Like
3

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

baseURL = “https://sdgsmanual.netlify.app/”

I’m not posting to any subdomain or subdirectory.

4

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 )

5

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

This is a page where the error happens: Logging in | sdgs.un.org manual

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!

6

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 should become:

![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 the images show up on my end.

7

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.

8

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.

2 Likes
9

This was the problem. My bad. I hadn’t specified the
HUGO_VERSION.

Thank you Joe and Alexandros for your help!

10

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