Anatole theme question: how to display Post Thumbnails?

Hosting on Micro.blog
4

If you’re up for some custom theming, we could just fetch the post’s first image and display that as a thumbnail.

In the template layouts/index.html you should find a handful of lines looking like this:

{{ if .Params.thumbnail }}
  <div class="post__thumbnail-wrapper">
    <a href="{{ .RelPermalink }}">
      <img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" loading="lazy" />
    </a>
  </div>

{{ end }}

Replace those lines with the ones below:

{{ if .Params.photos_with_metadata }}
  {{ $thumbnail := index .Params.photos_with_metadata 0 }}
  <div class="post__thumbnail-wrapper">
    <a href="{{ .RelPermalink }}">
      <img class="post__thumbnail" src="{{ $thumbnail.url }}" width="{{ $thumbnail.width }}" height="{{ $thumbnail.height }}" alt="" loading="lazy" />
    </a>
  </div>
{{ end }}

And you should be good to go. :blush: By default, the theme crops thumbnails. If you don’t like that behavior, add the following custom CSS:

.post__thumbnail {
  height: auto;
}