Get image from page bundles to display in list page

support
1

I recognize this is probably a common question, but I really can’t figure out the right things to search and I fear it might be different from theme to theme.

My directory looks like this:
image

The engineering is the branch, and example_1 and example_2 are “leaves” and are page bundles.
Currently, the engineering page lists examples 1 and 2, but only their titles, not the images.

I think I would add an image by specifying a parameter at the top of index.md for each of example 1 and 2, but from there I don’t know how to access the parameter properly.

What I’ve tried:

I’m using the congo theme, and I figured out that the branch code that lists the leaf pages is here:

That renders this partial for each article:

I believe I need to insert an image tag at line 2

I tried adding the following code:

{{ with .Params.coverphoto }}
        <div>
            <img src="{{ . }}" class="h-auto" alt="..." />
        </div>
{{ end }}

But {{ . }} is just the file name of the image, and I’m not sure if passing the full path would change anything anyway. I don’t want to put my images in static, that would kind of defeat the purpose of a page bundle.

2

It would be a bit simpler if you were to identify one of the images in each bundle as the cover image.

content/
└── engineering/
    ├── example_1/
    │   ├── index.md
    │   ├── cover.jpg
    │   └── wibble.jpg
    └── example_2/
        ├── index.md
        ├── cover.jpg
        └── wubble.jpg

Then override the theme’s layout:

mkdir layouts/partials
cp themes/congo/layouts/partials/article-link.html layouts/partials/

Then modify layouts/partials/article-link.html

<article>
  <h3 class="flex items-center mt-6 text-xl font-semibold">
    ...
  </h3>

  {{ with .Resources.GetMatch "cover.*" }}
    {{ with .Resize "200x" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}

  ...
</article>
1 Like
3

Worked great, thank you

4

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