Gallery images not appearing on live site

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

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…

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.

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”?

2 Likes

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

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.

Thank you so much!!! This works perfectly.

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