Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Customizing post thumbnails

Solved by Uli Hake View solution

Started by Radoslaw 8 years ago · 2 replies · 1320 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

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3127 posts

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>

Suggested topics

Topic	Replies	Views	Activity
Grav 2 + Admin2: custom page blueprint fields not showing in Admin Themes & Styling · by Pedro M, 2 months ago	4	198	2 months ago
Change page background colour Themes & Styling · by Ian, 2 months ago	3	94	2 months ago
Customizing Blog Post Layout Using "Summary Size and Separator" Themes & Styling · by Norbert, 2 years ago	11	456	3 months ago
Fork of the Knowledge Base theme Themes & Styling · by Lukáš Findeis, 3 months ago	0	48	3 months ago
Oxygen theme not working right Themes & Styling · by Sebadamus, 4 months ago	5	128	3 months ago