Why is my '.Parent.Resources.GetMatch...' image not showing on live?

support
1

Hello. I’m using a Github repository in conjunction with Cloudflare Pages to deploy my website.

I have a few images on a page I’m setting up, each are configured slightly differently for various reasons. For some reason, the one that utilises ‘.Parent.Resources.GetMatch’ isn’t showing at all on the deployed version of the website, however it appears fine on the localhost version of the website. I’ve also checked that the asset actually exists on the live directory, and the asset is accessible, so I’m not sure why it wouldn’t be ‘finding’ it.

Here’s the code I’m using.

This is the one that doesn’t work on live:

      {{- $image := .Parent.Resources.GetMatch "about-bubble.webp" -}}

      {{- /* The following is is used as a fallback if the image is not found or if it's a GIF. */ -}}
      {{- $default := printf "<img src=\"%s\"alt=\"%s\" title=\"%s\" />" (.Params.Image | safeURL) $.Title -}}
      
      {{- if $image -}}
              {{- $imageOriginalWidth := $image.Width -}}
              {{- $sizes := slice 180 -}}
              {{- $srcset := slice -}}
              {{- $sizestag := slice -}}
              {{- range $sizes -}}
                  {{- if lt (mul . 1.2) $imageOriginalWidth -}}
                      {{- $thumb := $image.Resize (printf "%dx webp q65" .) -}}
                      {{- $srcset = $srcset | append (printf ("%s %dw") $thumb.RelPermalink . ) -}}
                      {{- $sizestag = $sizestag | append (printf ("(max-width: %dpx) 100vw") . ) -}}
                  {{- end -}}
              {{- end -}}
      
              {{- if ne (len $srcset) 3 -}}
                  {{- $thumb := $image.Resize (printf "%dx webp q65" $imageOriginalWidth) -}}
                  {{- $srcset = $srcset | append (printf ("%s %dw") $thumb.RelPermalink $imageOriginalWidth ) -}}
                  {{- $sizestag = $sizestag | append (printf ("%dpx") $imageOriginalWidth ) -}}
              {{- end -}}
              <figure class="bubble-mask">
                  <img
                      src="{{ $image.RelPermalink }}"
                      class="bubble-image"
                      alt="Photo of Charlie & Emily"
                      {{- if gt (len $srcset) 0 -}}
                          {{- (printf " srcset=\"%s\"" (delimit $srcset ", ")) | safeHTMLAttr -}}
                          {{- (printf " sizes=\"%s\"" (delimit $sizestag ", ")) | safeHTMLAttr -}}
                      {{- end -}}
                  />
              </figure>
          {{- end -}}

However, this code works fine on both live and my local. The only difference is line 1 and the number of slices I’m generating for responsive images:

  {{- $image := .Page.Resources.GetMatch .Params.Image -}}

  {{- /* The following is is used as a fallback if the image is not found or if it's a GIF. */ -}}
  {{- $default := printf "<img src=\"%s\"alt=\"%s\" title=\"%s\" />" (.Params.Image | safeURL) $.Title -}}
  
  {{- if $image -}}
          {{- $imageOriginalWidth := $image.Width -}}
          {{- $sizes := slice 480 540 720 960 -}}
          {{- $srcset := slice -}}
          {{- $sizestag := slice -}}
          {{- range $sizes -}}
              {{- if lt (mul . 1.2) $imageOriginalWidth -}}
                  {{- $thumb := $image.Resize (printf "%dx webp q100" .) -}}
                  {{- $srcset = $srcset | append (printf ("%s %dw") $thumb.RelPermalink . ) -}}
                  {{- $sizestag = $sizestag | append (printf ("(max-width: %dpx) 100vw") . ) -}}
              {{- end -}}
          {{- end -}}
  
          {{- if ne (len $srcset) 3 -}}
              {{- $thumb := $image.Resize (printf "%dx webp q100" $imageOriginalWidth) -}}
              {{- $srcset = $srcset | append (printf ("%s %dw") $thumb.RelPermalink $imageOriginalWidth ) -}}
              {{- $sizestag = $sizestag | append (printf ("%dpx") $imageOriginalWidth ) -}}
          {{- end -}}
          <figure class="bubble-mask">
              <img
                  src="{{ $image.RelPermalink }}"
                  class="bubble-image"
                  alt="{{ .Title }}"
                  {{- if gt (len $srcset) 0 -}}
                      {{- (printf " srcset=\"%s\"" (delimit $srcset ", ")) | safeHTMLAttr -}}
                      {{- (printf " sizes=\"%s\"" (delimit $sizestag ", ")) | safeHTMLAttr -}}
                  {{- end -}}
              />
          </figure>
      {{- end -}}
2

This is difficult to troubleshoot without more information.

You are more likely to receive a prompt and accurate response if you post a link to your project’s Git repository.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

Hi Joe, no problem, here’s a direct link to the file (link omitted) that contains the above code on Github.

4

Which version are using locally? I suspect you are using v0.123.0 or later.

Which version are you using remotely? I suspect you are using v0.122.0 or earlier.

Also, set the baseURL in your site configuration to the base URL of your live site.

5

Thank you Joe, I think you might be right about the version there. I upgraded my local version of Hugo as I realised I needed the extended version for WEBP processing.

Apologies for my incompetence, but I’m not sure how to do that, I was under the impression that each time I pushed to my remote repository, Hugo also gets pushed so I thought the version would be the same, clearly not! Is there a way to update it on Github or Cloudflare pages, I’m sifting through the settings pages and not finding anything related to Hugo directly.

I’ve also noticed that although I’ve downloaded Hugo Extended locally, I haven’t updated the version number in my hugo.toml file, I should probably do that, right?

6

https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#use-a-specific-or-newer-hugo-version

7

That’s worked brilliantly, thanks Joe! The image is now appearing on both the local and live websites.

Regarding the BaseURL, you’re right, I need to update that, but it was causing issues in my local environment where the tags would link to the live site rather than the local environment. Just my own crude workaround until I figure out why the tags are behaving in this way! :slight_smile:

8

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