How to set the blog list to display thumbnails? Where does an image go and how to reference it?

[heihahehe]

[h-enk]

Set it: https://github.com/gethyas/doks/blob/main/config/_default/params.toml#L64-L65

Use it by just adding an image to a blog post's page bundle. The image name needs to contain featured, cover, or thumbnail. The image will also be added as an Open Graph image.

Example: https://github.com/gethyas/getdoks.org/tree/main/content/blog/doks-1-2

[h-enk]

however by default the thumbnails resolution is too large

Not sure what you mean by that — could you share your repo?

[h-enk]

Make sure your image has a substantial size — for example 1600x900px or 2100x900px

[nopedawn]

You can check my configuration here

• params.toml
• content/blog/example
• Live blog

[h-enk]

That helps — comment out this line (you need the scss): https://github.com/nopedawn/nopedawn.github.io/blob/da97a6a9ae86432a833c3438175e2589e57c25d5/config/_default/module.toml#L19

And you're good!

[nopedawn]

Ah I see, Thanks for helping me

[heihahehe]

Thank you.

[zentala]

For others visiting this place looking for answer about how to set blog list to display thumbnails?:

You need to place image in the folder with blog post and name it so it would contain one of following phrases: feature, cover or thumbnail. So it can be named e.g. cover.png, featured-whatever.jpg, this-is-thumbnail.webp. No need to reference image any way. Just place in folder with blog post and name it correctly and it will be displayed automagicaly.

For reference here is a part of code implementing this functionality:

{{ if site.Params.doks.imageList -}}
  {{- $images := .Resources.ByType "image" -}}
  {{- $featured := $images.GetMatch "*feature*" -}}
  {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
  {{- if $featured -}}
    {{ partial "img" (dict
    "page" .
    "src" $featured
    "alt" .Title
    "class" "rounded-top-1"
    )}}
  {{ end -}}
{{ end -}}
      {{ end -}}

Notice, that in params.toml you must have set keyimageList as true.

Source of the code: https://github.com/gethyas/getdoks.org/blob/main/layouts/partials/main/blog-meta.html

You can also overwrite blog-meta.html and set your own mechanism of loading thumbs. I implemented loading images from external servers if you provide key "thumb" as post's Front Matter param.

[pranavdhawale]

Getting this error when trying to set cover image for the blog

hugo.toml

# Images (@hyas/images)
[hyas_images]
  [hyas_images.defaults]
    decoding = "async" # sync, async, or auto (default)
    fetchpriority = "auto" # high, low, or auto (default)
    loading = "lazy" # eager or lazy (default)
    widths = [480, 576, 768, 1025, 1200, 1440] # [640, 768, 1024, 1366, 1600, 1920] for example
    sizes = "auto" # 100vw (default), 75vw, or auto for example
    process = "" # "fill 1600x900" or "fill 2100x900" for example
    lqip = "16x webp q20" # "16x webp q20" or "21x webp q20" for example

layouts/partials/main/blog-meta.html

{{ $last := sub (len .Params.contributors) 1 -}}
<p>
  <small>
    {{- time.Format (default ":date_long" .Site.Params.dateFormat) .PublishDate -}}
    {{- with .Params.categories -}}
      &nbsp;in&nbsp;
      {{- range $index, $category := . -}}
        {{ if gt $index 0 }}, {{ end -}}
        <a class="stretched-link position-relative link-muted" href="{{ "/categories/" | relLangURL }}{{ . | urlize }}/">{{ . }}</a>
      {{- end }}
    {{- end }}
    {{- with .Params.contributors -}}
      &nbsp;by&nbsp;
      {{- range $index, $contributor := . -}}
        {{- if gt $index 0 }}{{ if eq $index $last }} and {{ else }}, {{ end }}{{ end -}}
        {{- with $.Site.GetPage "taxonomyTerm" (printf "contributors/%s" (urlize .)) -}}
          {{ if .Params.avatar -}}
            {{ $image := .Resources.GetMatch (printf "**%s" .Params.avatar) -}}
            {{ $i := $image.Process "fill 168x168" -}}
            {{ $l := $image.Resize "14x webp q20" -}}
            <img class="lazyload blur-up rounded-circle d-inline ms-1" src="{{ $l.RelPermalink }}" data-src="{{ $i.RelPermalink }}" alt="{{ .Title }}" width="42" height="42" loading="lazy" decoding="async" fetch-priority="auto">
          {{ end -}}
        {{- end -}}
        <a class="stretched-link position-relative ms-1" href="{{ "/contributors/" | relLangURL }}{{ . | urlize }}/">{{ . }}</a>
      {{- end }}
    {{- end -}}
    <span class="mx-2">—</span>
    {{- /* NOTE: classes 'stretched-link position-relative' are necessary to properly display the title attribute on hover */ -}}
    <span class="ms-0 stretched-link position-relative reading-time" title="{{ i18n "reading_time" }}">{{/* trim subsequent whitespace */ -}}
      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
        <path d="M12 7v5l3 3"></path>
      </svg>
      {{- .ReadingTime }}&nbsp;{{ i18n "minute" .ReadingTime -}}
    </span>{{/* trim subsequent whitespace */ -}}
  </small>
</p>

directory structure

~/github/byteblogs/content/blog/example$ ls -a
.  ..  cover.jpg  index.md

[pranavdhawale]

For reference here is a part of code implementing this functionality:

{{ if site.Params.doks.imageList -}}
  {{- $images := .Resources.ByType "image" -}}
  {{- $featured := $images.GetMatch "*feature*" -}}
  {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
  {{- if $featured -}}
    {{ partial "img" (dict
    "page" .
    "src" $featured
    "alt" .Title
    "class" "rounded-top-1"
    )}}
  {{ end -}}
{{ end -}}
      {{ end -}}

where is the part of code present @zentala ??

[h-enk]

What version of Hugo are you using? You should use the extended version — v0.125.0 or higher.

[pranavdhawale]

hugo v0.126.1-3d40aba512931031921463dafc172c0d124437b8 linux/amd64 BuildDate=2024-05-15T10:42:34Z VendorInfo=gohugoio

should i install v0.126.0_extended ??

[h-enk]

Yes you should!

[pranavdhawale]

I there any way to add the animation of poping up the blog when hover just like in blog list page into the latest post?

[h-enk]

[..] into the latest post?

What do you mean by that/which latest post?

[pranavdhawale]

As you can see here #205 (comment)

We added latest blog section on the home page along with cover image. I want an animation just like in blog list page where on hover the blog gets popup animation.
Want same animation on hover in the latest blog section also

[h-enk]

I thought that should be working out of the box (but probably not)

Could you try adding to assets/scss/common/_custom.scss:

.home .card {
    transition: transform 0.3s;
}

.home .card:hover {
    transform: scale(1.025);
}