Anatole theme question: how to display Post Thumbnails?

Apparently this is a feature of Anatole: * Post Thumbnails (optional)

How do I get them to display? I’ve installed the theme on https://wowwaikawa.micro.blog which only has 1 post so far. What I thought I’d be able to see is that on the Home page there would be a post with some text and one of the photos from the post.

I don’t see any option to enable the post thumbnails. Have I misunderstood things?

it requires setting custom front matter to a field called thumbnail, which is not a thing that micro.blog allows.

Ah, thanks Jason. That solves that then!

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;
}

Thank you so much Sven. That was simple to implement and works perfectly. Gives the page the lift it needed and reflects what happened on the blog system I was using previously.

Zoomed out screenshot of the new look.

2 Likes