Customizing post thumbnails

Support Themes & Styling
1

TwentyFifteen creates post thumbnails from the first image it finds in page media.

Blog_item_.html.twig:

<div class="post-thumbnail">
    {{ page.media.images|first.cropZoom(1038,437).html(page.title, page.title, 'attachment-post-thumbnail wp-post-image') }}
</div>

Is it possible to customize this theme so that the post thumbnail is an image stored in /pages/images and selected manually e.g. in frontmatter?

I suspect some of my posts may use the same image as a post thumbnail, so would like to avoid duplicating the same image file across different posts.

Thank you in advance!

2

You can add a filepicker field to your page template. Best way to do this is to create a sub-theme and to modify the blueprint(s) you use for your pages. What’s not clear to me: Normally you have to upload the images related with a post and in most use cases it’s quite uncommon to upload the same pictures for different pages. In most cases it should be enough to set the thumbnail image manually if I get you right. Once you have the filepicker field working you have to adapt the corresponding twig file to use the data of the new field (and, optionally, a fallback to the first image if no thumbnail image was set.)

header.thumbnail_media:
  label: Choose media
  type: filepicker
  preview_images: true
1 Like
3

To complement the first suggestion…

Tweaking the ‘/partials/blog_item.html.twig’ (in you child theme) could be like:

<div class="post-thumbnail">
  {% set image = page.header.thumbnail_media ? page.find('/images').media[page.header.thumbnail_media] : page.media.images|first %}
  {{ image.cropZoom(1038,437).html(page.title, page.title, 'attachment-post-thumbnail wp-post-image') }}
</div>
2 Likes