Set post thumbnail image file from page bundles

[solrayc]

We manage our content structure with hugo page bundle functionality.

It is a convenient way to organize article assets.
It also allows us to make use of image processing build in hugo. We use image processing in hugo to automatically resize and compress images.

We got image processing working with a schortcode from this article.

It appears that setting image = "main_image.jpg" in article front matter only works with image files stored in static/images/ folder.
Front matter does not recognize images that are bundled with the article, like this:

├── posts
│   ├── my-post
│   │   ├── main_image1.jpg
│   │   └── index.md
│   └── my-other-post
│        ├── images
│        │   └── main_image2.jpg
│        └── index.md

Is there a way to get post thumbnail and main image working with files from page bundle?
Perhaps we need to update layouts/index.html and layouts/_default/single.html` to make it work.

I am very new to Go and Hugo template, so I need your help.
Not sure, but perhaps the issues are somewhere here:

newsroom/layouts/index.html

Line 13 in 4886891

{{ $bg := (absURL (printf "images/%s" $image)) }}

newsroom/layouts/_default/single.html

Line 10 in 4886891

<img src = '{{ absURL (printf "images/%s" .) }}' alt = '{{ . }}' class = 'post_thumbnail'>

Would appreciate your help.

[onweru]

@solrayc, I'll look into it and advise accordingly.

[onweru]

@solrayc, I'll look into it and advise accordingly.

After a bit of research, I came across something that could help https://discourse.gohugo.io/t/solved-media-in-separate-folder-and-accessing-with-page-resources/11756. It may take me a while to go through the repo making the necessary changes. If you need this urgently, you could apply this to your instance of the theme.

[solrayc]

If you need this urgently, you could apply this to your instance of the theme.

I'll try to apply it and will let you know if it worked out. Thanks for pointing me in the right direction.

[solrayc]

you could apply this to your instance of the theme.

After some research and inspiration from this post, I managed to get it working in single.html layout.

I replaced

newsroom/layouts/_default/single.html

Lines 9 to 11 in 4886891

	{{ with .Params.image }}
	<img src = '{{ absURL (printf "images/%s" .) }}' alt = '{{ . }}' class = 'post_thumbnail'>
	{{ end }}

with this:

        {{ $img := (.Resources.ByType "image").GetMatch "*headimg*" }}
        {{ with $img }}
          {{ $big := $img.Resize "x800" }}
          {{ $small := $big.Resize "x500" }}
          <img
            alt="{{ $img.Title }}"
            src="{{ $big.RelPermalink }}"
            srcset="{{ $small.RelPermalink }} 500w, {{ $big.RelPermalink }} 800w"
            sizes="(min-width: 1570px) 822px, (max-width: 1569px) and (min-width: 960px) 50vw, 93vw"
            width="{{ $big.Width }}"
            class="post_thumbnail"
          >
        {{ end }}

Exact sizing need to be worked on. Inspired by code from gohugoio theme:

@onweru Can you please advise what sizes work best for this theme?

index.html looks more complicated than single.html. Not sure if I'll get it. Will let you know if I can make it work.

newsroom/layouts/index.html

Lines 7 to 13 in 4886891

	{{ if isset .Params "image" }}
	{{ $scratch.Set "image" .Params.image }}
	{{ else }}
	{{ $scratch.Set "image" "thumbnail.svg" }}
	{{ end }}
	{{ $image := $scratch.Get "image" }}
	{{ $bg := (absURL (printf "images/%s" $image)) }}

[solrayc]

Finally got index.html layout working. See my code below.
The biggest downside of my approach is front matter image param no longer works.
I have to rename every featured image to a specific name. .GetMatch "*topimg*" in my case.
I wish I could still use front matter image param and keep the original name of the file.

Feel free to close this issue, as I found solution to my issue.
However, I still have two questions. Would appreciate your input greatly.
What is the appropriate image size for this theme?
Is it possible to combine default front matter image param with this image resizing approach?

Thank you for this great theme.

layouts/index.html

{{ define "main" }}
<div class = 'wrap pt-2 mt-2'>
  {{- $size := .Paginator.PageSize }}
  {{ $pages := .Paginate (where .Site.RegularPages "Section" "!=" "").ByPublishDate.Reverse }}
  {{ $scratch := newScratch }}
  {{- range $index, $value := $pages.Pages }}
  {{ $img := (.Resources.ByType "image").GetMatch "*topimg*" }}
  {{ with $img }}
    {{ $big := $img.Resize "x800" }}
    {{ $small := $big.Resize "x500" }}
    {{ $bg := $small.RelPermalink }}
  <article class = 'article mb-2'>
    <a href = '{{ $value.Permalink }}' {{ if eq $index 0 }} class = 'grid-reverse' {{ end }}>
      <div class = 'article_thumb' style='background-image: url({{ $bg }})'></div>
      {{ end }}
      <div class = 'article_meta {{ if eq $index 0 }} center_y {{ end }}'>
        <time class = 'pale'>{{ .Date.Day }} {{ index $.Site.Data.rudates (printf "%d" .Date.Month) }} {{ .Date.Year }}</time>
        <h3 class = 'article_title'>{{ $value.Title }}</h3>
        <div class = 'article_excerpt {{ if eq $index 0 }} visible {{ end }}'>
        <p>{{ $value.Summary | truncate 100 }}</p>
        </div>
      </div>
    </a>
  </article>
  {{- if and (eq $index 0) (gt $size 1)  }}<div class = 'grid-2 article_showcase'>{{ end }}
  {{- if and (eq $index (add $size -1)) (gt $size 1) }}</div>{{ end }}
  {{- end }}
</div>
<a href = '{{ absURL (printf "post/%s" "") }}' class = 'post_nav'><span class = 'post_next'>{{ i18n "viewArchive" }}</span></a>
{{ end }}

[onweru]

Finally got index.html layout working. See my code below.

Awesome.

The biggest downside of my approach is front matter image param no longer works. I have to rename every featured image to a specific name. .GetMatch "*topimg*" in my case. I wish I could still use front matter image param and keep the original name of the file.

That must suck.

Feel free to close this issue, as I found a solution to my issue.

I will keep this issue open until I find the time to wholy solve it.

What is the appropriate image size for this theme?

As of now, there are no recommended sizes of images. I use this theme for my blog and my approach towards image sizing is rather simplistic. I stick to a max-width of 1440px (720~1440). As such there's a massive room for improvement.

Thank you for this great theme.

You're most welcome, thanks for contributing.

[solrayc]

A bit off topic

We use image processing in hugo to automatically resize and compress images.

You can find the shortcode we use to resize images in text body here.

[onweru]

A bit off topic

We use image processing in hugo to automatically resize and compress images.

You can find the shortcode we use to resize images in text body here.

Awesome, thanks

[metal3d]

Is there any chance to have this merged one day ?

[onweru]

Is there any chance to have this merged one day ?

It's not a PR, so I guess no.

[danihazler]

I have this same issue but with your other theme @onweru
https://github.com/onweru/hugo-swift-theme

[onweru]

I have this same issue but with your other theme @onweru
https://github.com/onweru/hugo-swift-theme

I was to reference this issue actually. The thing is, I haven’t yet had the time to work on page bundles. We discussed it in this other theme chipzoller/hugo-clarity#72 (comment) and I haven’t moved on it yet. Let me see if I can squeeze in some time in the coming days and add support.