In Page Bundle Images are not showing

support
1

Hi, I am trying to create an image gallery, but the markdown files are not showing any images.
I tried to get the image with {{ with .Page.Resources.ByType "img/*" }} and it shows absolutely nothing. then I tried {{ with .Params.gallery }} and this does show the names that you use in the markdown file but it also does not show any image, nothing seems to work idk what I am doing wrong.

gallery: 
    - './img/cr.jpg'

gallery: 
    - 'img/cr.jpg'

gallery: 
    - '/img/cr.jpg'

these are failed attempts of me trying to get the image to work, even when in the content area of the markdown file. ![Alt Text](img/cr.webp) this also doesn’t work even thou it’s a page bundle

content/
└── mypage/
    |  ├── dir/
    |      ├── _index.md
    |      └── img/
    |           └── cr.webp
    |           └── cr.jpg
    ├── _index.md

here is what my code looks like

    {{ with .Params.gallery }}
    <div class="masonry">
      {{ $index := 1 }}
      {{ range . }}
      {{- $imageurl := . -}}
      {{- $imagetitle := index (split (path.Base $imageurl) ".") 0 -}}
      <div class="grid masonry-item" data-index="{{ $index }}">
        <img src="{{ $imageurl | absURL }}" alt="{{ $imagetitle }}" title="{{ $imagetitle }}" class="img-fluid rounded-4">
        <div class="grid-body">
          <div class="relative">
            <a class="grid-link" href="{{ $imageurl | absURL }}" title="{{ $imagetitle }}"></a>
            <h1 class="grid-title fs-5">{{ $imagetitle }}</h1>
          </div>
        </div>
      </div>
      {{ $index = add $index 1 }}
      {{ end }}
    </div>
    {{ end }}
2

Check out the difference between branch and leaf bundles in the documentation. Hint: a leading underscore carries meaning with index.md!

3

check the dir structure again, I made a mistake there also, I have no idea what you mean, as I understand I am doing it according to the docs.

I have been stuck here for the past 4 hours, if you would just tell me what is wrong here, instead of giving a hint, it would be really really helpful.

4

You have an _index.md in dir. Which makes that a branch bundle. And you can’t have resources below a branch bundle. Please read the docs carefully.

I disagree, since I believe that people need to understand and learn. Having others simply fix it doesn’t help in that sense. And this issue (the difference between leaf and branch bundles) arises here regularly.

1 Like
5

totally agree with you on that, as I mentioned I was stuck on it for past 4 hours, that what I was doing trying to figure it out but couldn’t, asking for the answer the last thing I do. Now in the docs Page bundles | Hugo. They have the images directly in the branch bundle 1.

I also put the image directly in the dir and changed to markdown to

gallery: 
    - './cr.jpg'
    - './cr.webp'

gallery: 
    - 'cr.jpg'
    - 'cr.webp'

This didn’t work either, but if we put the image code in the markdown that works. ![Alt Text](./cr.webp)

6

If you need help, you need to post something that is complete. Best would be to post a link to a Github repository.

What I do, is something like this:

content/
└── blog/
    |  ├── page1/
    |      ├── index.md
    |      └── cr.jpg
    ├─_index.md

and in my template

{{$img := .Resources.GetMatch "cr.jpg"}}

and then convert that to WebP (no need to store both versions, imo). No reference to images in front matter, except to a featured image if need be:

featured_image: "image.jpg"
… 
{{$featured := .Resources.GetMatch .Params.featured_image}}

And if you have a gallery that displays all images in the bundle anyway, use .Resources.ByType "image" and range over the resulting map.

The more relevant issue here is: Why do you want your page1 to be a branch bundle if it doesn’t contain sub-pages?

7

I am referencing it in the front matter because they might change frequently, and the people who are going to change it don’t who any coding. So I integrated the frontmatter CMS, and now adjust my code according to it, if it’s in the frontmatter they can easily change it.

8

If the image changes, it changes on disk, too – doesn’t it? And if you’re displaying all the images anyway (like with your gallery front matter parameter), what’s the point in duplicating the information? Have Hugo find the images in the directory. And “the people who are going to change it” have to change only one thing, namely the image itself. Not the front matter as well.

9

what about alt text and short descriptions? I know I am going to be asked to add it. I do have a working method that does this. They just pull all the images, from the dirs in side. assets/album. but the people changing the image they will have to navigate outside, of content, go to, the corresponding dir, let’s facilities, because there are multiple pages with galleries.

{{ partial "common/masonry.html" (dict "context" . "gallery_dir" "facilities") }}

{{ $dir := string .gallery_dir }}
<div class="masonry">
  {{ $index := 1 }}
  {{ range resources.Match (printf "/%s/**" $dir) }}
  {{- $image := . -}}
  {{- $imageurl := .RelPermalink -}}
  {{- $imagetitle := index (split (path.Base .Name) ".") 0 -}}
  <div class="grid masonry-item" data-index="{{ $index }}">
    <img src="{{ $imageurl }}" alt="{{ $imagetitle }}" title="{{ $imagetitle }}" class="img-fluid rounded-4">
    <div class="grid-body">
      <div class="relative">
        <a class="grid-link" href="{{ ($image.Fit "1600x1600 q50").Permalink }}" title="{{ $imagetitle }}"></a>
        <h1 class="grid-title fs-5">{{ $imagetitle }}</h1>
      </div>
    </div>
  </div>
  {{ $index = add $index 1 }}
  {{ end }}
</div>

btw the images have lightbox here’s work page example Facilities

10

I take the alt text for images in galleries from the EXIF data. You can, of course, put everything in your front matter, as I hinted at above with the featured image.

OTOH: Your code simply uses the filename as alt text anyway. So have the people use good filenames and you’re all set.