Skip to content
● Meet Grav Guard: keep every Grav site you run secure and up to date, all from one place. Free for up to 3 sites. Read more →
Themes & Styling

Customizing post thumbnails

Solved by Uli Hake View solution

Started by Radoslaw 8 years ago · 2 replies · 1798 views
8 years ago

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

Blogitem.html.twig:

HTML
<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!

8 years ago Solution

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.)

YAML
header.thumbnail_media:
  label: Choose media
  type: filepicker
  preview_images: true
👍 1
8 years ago

To complement the first suggestion...

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

TWIG
<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

Suggested topics

Topic Participants Replies Views Activity
Inheriting a Theme does not quite work correctly
Themes & Styling · by themetman, 7 days ago
1 110 3 days ago
Grav2 with Quark2 – All pages in the hamburger-menu of a one-pager
Themes & Styling · by AH, 3 weeks ago
1 229 4 days ago
[quark] mobile menu as the modular page menu
Themes & Styling · by Bruno, 4 years ago
6 1394 4 days ago
Modular Page Background Image Display
Themes & Styling · by TomW, 3 weeks ago
2 232 6 days ago
Is it a way to get the "content - summary" in a twig template ?
Themes & Styling · by FrViPofm, 2 months ago
4 690 2 months ago