Gallery images not appearing on live site

[Paloma_M]

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:

pascualdesigner.netlify.app

Ayax y Prok - Pascual Designer

Programación parcial y operación en gira

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

The rest of my code:

GitHub

GitHub - palomachiara/pascualdesigner

[chrillek]

Why not first have a look in your browser’s developer tools? There, you’d see

<li class="projects__gallery-list-slide" style="position: static;">
                        <img src="#ZgotmplZ">
</li>

Obviously, the img URL is very wrong. If you search for ‘ZgotmplZ’ in the forum or in the documentation, you’ll surely find some pointers…

[Paloma_M]

Thanks for your reply.
Yes, I did inspect it and mentioned in my original post.
I searched for it, but no luck. I found a forum suggesting tu use SafeURL but that didn’t work either.

[talopine]

If you’re using

{{ range .Params.gallery }}
<img src="{{ . }}">
{{ end }}

then isn’t the {{ . }} going to return “image: imgsource” each time rather than just “imgsource”?

[Paloma_M]

What else can I use though?{{ .image}} gives me a deploy error and the cms automatically renders the images with “image:” before the link

[frjo]

Tested your code locally and this works:

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

If you want to use the caption value for let say the image alt attribute you can do this:

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

You should always set the alt attribute on images. For purely decorative images it can be set to empty, but important to set none the less.

[Paloma_M]

Thank you so much!!! This works perfectly.