Can you set cover image for the article

support
1

I’d like to display the articles as a list of cards with the image and the article excerpt. I’ve figured out the except part , but I have no clue whether you can assign the image as the “article cover image” (or whatever that should be called).
Any ideas how to do that?
I’ve been looking through the docs but all I can find atm is the article about optimizing image processing…
Not much about using images inside articles. Any help greatly appreciated :slight_smile:

2

Any repo link you could offer? There are multiple ways this can be done, but it would help to see what you already have.

3

It’s probably easiest to use a page resource.

content/
├── articles/
│   └── article-1/
│       ├── cover.jpg
│       └── index.md
└── _index.md

layouts/articles/single.html

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ with .Resources.GetMatch "cover.*" }}
    {{ with .Fill "300x200 webp" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}
  {{ .Content }}
{{ end }}
4 Likes
4

Thank you, but I can’t figure it out - this part is super confusing to me. Assuming I have such structure:

content/
|-──blog
|      └──article1
|                 ├── cover.jpg 
|                 └── article1.md
|      └──article2
|                 ├── cover.jpg 
|                 └── article2.md

– how do I access those images? I’ve tried something along those lines with a couple of variants, but it didn’t work:

<section class="container">
  {{ .Content }}

  <div class="container">

<div class="columns is-mobile is-multiline is-centered">
  {{ range.Data.Pages }}
  <div class="column is-narrow">

    <div class="card" style="max-width: 280px;">

        <div class="card-image">
            <a href="{{ .RelPermalink }}">
              {{ with .Resources.GetMatch "cover.jpg" }}
              <img src="data:{{ .MediaType }};base64,{{ .Content | base64Encode }}" alt="">
              {{ end }}
            </a>
        </div>
        <div class="card-content">
            <div class="content">
                <p class="title is-4"><a class="has-text-black" href="{{ .RelPermalink }}">{{ .Title }}</a></p>
            </div>
            <div class="content">
                {{ .Summary | truncate 120 }}
            </div>
        </div>
    </div>

  </div>
  {{ end }}

</div>

@bwintx : don’t have a repo atm, its a personal, local development so far. I’ll be happy to paste revelanat bits though :slight_smile: .

I’ve tried a “brutal” approach:

        <div class="card-image">
            <a href="{{ .RelPermalink }}">
              <img src="{{ .RelPermalink }}cover.jpg" alt="">
            </a>
        </div>

– not ideal, as it does not allow me to get any image processing / scaling etc. But at least I see the “img src” tag in the resulting code… But the resulting link (RelPermalink) is not directing to the folder, it contains article name as well… so obviously it’s not working.
I’ve tried this approach on both single and list pages.

5

Please look again, carefully, at the file structure in my previous response.

No:

content/
└── blog/
    └── article1/
        ├── article1.md 
        └── cover.jpg

Yes:

content/
└── blog/
    └── article1/
        ├── index.md 
        └── cover.jpg

See https://gohugo.io/content-management/page-bundles/

6

So do I have to name the file with the article as index.md ? Is there other way to achieve this, as this seems like a bad practice, I’ll end up with a bunch of identically names files which will mess search (and I don’t mean web search, just looking for the article I’ve written locally) and managing articles.
I can stand duplicate cover.jpg files, but for article itself I’d love to avoid this.

7

Yes.

No.

I suppose that depends on your authoring tool. With VS Code, when I press Ctrl+P it searches for matching files and directories.

You create the bundle with:

hugo new post/my-first-post/index.md
8

ouch, that sucks big time. Seems like super weird limitation - I’m having issues trying to wrap my head around logic behind managing content in Hugo.

But thank you for your time @jmooring :slight_smile: . You rock!

So yeah, I’ll keep playing with this, trying to brute force it with path to folder containing the article (if that’s possible somehow).

I’m not talking about fancy stuff - just day to day handling of the blog via file manger and a markdown editor.

9

It is quite the opposite.

Read the documentation on page bundles, and make sure you understand the difference between leaf and branch bundles. The proper use of index.md and _index.md files enables you to quickly and logically associate resources (images, videos, data, other markdown files) with a page or section.