Gallery images not appearing on live site

Support
1

Hello
Here are some details,
my single.html layout looks like:

                {{ range .Params.gallery }}
                    <li class="projects__gallery-list-slide">
                        <img src="{{ . }}">
                    </li>
                {{ end }}

The MD file has:

gallery:
  - image: https://res.cloudinary.com/dwpmwj4ba/image/upload/v1668535441/projects/Ayax%20y%20Prok/DREAMBEACH-3_zfwdjh.jpg
  - image: https://res.cloudinary.com/dwpmwj4ba/image/upload/v1668536918/projects/Ayax%20y%20Prok/IMG_20220723_023118_ottvao.jpg
  - image: https://res.cloudinary.com/dwpmwj4ba/image/upload/v1668535611/projects/Ayax%20y%20Prok/DREAMBEACH-12-min_ife006.jpg
  - image: https://res.cloudinary.com/dwpmwj4ba/image/upload/v1668535441/projects/Ayax%20y%20Prok/DREAMBEACH-2_syfqe6.jpg
  - image: https://res.cloudinary.com/dwpmwj4ba/image/upload/v1668535606/projects/Ayax%20y%20Prok/DREAMBEACH-14-min_zozk8s.jpg

And yet the images don’t appear:

When I inspect, they give me:
src=“#ZgotmplZ”

The rest of my code:
https://github.com/palomachiara/pascualdesigner

2

Screenshot 2023-05-17 at 2.58.38 PM
Screenshot 2023-05-17 at 2.58.38 PM1920Ă—1199 147 KB

Hi, I selected a few hyperlinks and the images are populating. Can you attach a screenshot where it’s not.

3

specifically the Gallery images, like in this page:

4

Ahh I see! Yeah so it seems there’s an audit issue for this page. This is what the console said to do: " To fix this issue, replace the usage of navigator.userAgent , navigator.appVersion , and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData ."

It might also be helpful to provide your code but this is not a Netlify issue.

1 Like
5

How do i do that?
It must be related to decap cms

Here is the code:

GitHub - palomachiara/pascualdesigner

6

@Paloma Your issue ultimately appears to be your level of understanding of the file format (md - markdown) and the template language (Go templates) that you’re working with.

It can be difficult to determine the cause of issues, but if you run your build locally and find the issue is occurring there, then it’s a good indication that it’s not Netlify specific.

Seeking assistance in the best-fit place, this question could have been directed to the Hugo community, as it’s ultimately their tooling that you’re encountering confusion with.

As I mentioned in another thread, I don’t work with Hugo myself and don’t want to install it, so I can’t test my assumptions from reading their documentation, but I think your issue/solution are…

You have an array of images defined as:

gallery:
  - image: https://res.cloudinary.com/dwpmwj4ba/image/upload/v1668535441/projects/Ayax%20y%20Prok/DREAMBEACH-3_zfwdjh.jpg

You’re then trying to show it in your template with:

{{ range .Params.gallery }}
  <li class="projects__gallery-list-slide">
    <img src="{{ . }}">
  </li>
{{ end }}

Checking the Hugo documentation for “the dot”, it indicates that it represents the current context, and that inside an iteration it will contain the current item from the loop.

You’re inserting the item directly into the src as if it is a string, however the way you have it defined in the markdown, the item on the first loop, would be:

image: https://res.cloudinary.com/dwpmwj4ba/image/upload/v1668535441/projects/Ayax%20y%20Prok/DREAMBEACH-3_zfwdjh.jpg

However that isn’t a string, it’s an object, where your string is stored on a key of image.

So you likely want to either:

  1. Change your array definition in the markdown
    FROM
---------
gallery:
  - image: https://res.cloudinary.com/...
  - image: https://res.cloudinary.com/...

Which is the equivalent of
[
  { image: 'https://res.cloudinary.com/...' },
  { image: 'https://res.cloudinary.com/...' }
] 

TO
---------
gallery:
  - https://res.cloudinary.com/...
  - https://res.cloudinary.com/...

Which is the equivalent of
[
  'https://res.cloudinary.com/...',
  'https://res.cloudinary.com/...'
]

OR

  1. Access the image key on the context within your template output

    {{ range .Params.gallery }}
  <li class="projects__gallery-list-slide">
    <img src="{{ .image }}">
  </li>
{{ end }}
1 Like
7

Thanks for your reply. However,
If I try solution 2, I get this deploy error:

11:51:11 AM: Error: Error building site: failed to render pages: render of “page” failed: “/opt/build/repo/themes/pascual-theme/layouts/projects/single.html:8:27”: execute of template failed: template: projects/single.html:8:27: executing “main” at <.image>: can’t evaluate field image in type string

And as for solution 1, I cannot change the markdown as it is the CMS that renders it like that. If I try to force it by changing it directly in the file, then it stops working for the CMS.

8

@Paloma Solution #2 was basically a “shot in the dark”, I don’t work with the system that you’ve chosen to work with, and it was my best guess as to the issue you’re experiencing and how you could get it to work.

It’s even possible that I’ve even interpreted the entire problem wrong.

You should read the documentation of the system you’re working with, (in this case Hugo, and the template language being used) or as I’ve mentioned raise the question with the Hugo community, as it’s not an issue being caused by anything Netlify specific.

9

Found the solution:

<ul class="projects__gallery-list">
    {{ range .Params.gallery }}
        <li class="projects__gallery-list-slide">
            <img src="{{ .image | absURL }}">
        </li>
    {{ end }}
</ul>
10

Excellent, looks like I was correct in my previous assessment and extremely close!