Thumbnails for posts on the tag collection page

Themes
1

The tag collection page on the Edition theme does not show the thumbnail for each post only the title, why? How do I add the thumbnail like it shows on the home page?

2

That’s 100% theme-dependent. What theme? If you can upload a custom theme (not in ghost.io starter), then you can probably compare tag.hbs with index.hbs to figure it out. :)

3

Using the Edition theme

4

Edition /should/ be showing thumbnails, as long as you’ve got featured images on your posts. Do you?

Featured images get added ABOVE the post title in the editor. My first guess is that either you don’t have featured images loaded for your posts OR that you’ve added some code injection that’s hiding them accidentally OR that you’re running some older version of Edition. Any of those sound right? :slight_smile:

5

Oh, hang on - under design > customize > site wide, what do you have your ‘feed layout’ set to?

7

There is no feed layout setting:

On the link above you can see the version of the theme as well

I have a code injection to hide cover photos on posts. But I do have cover photos for each post and they show up on the home page.

This is the site: https://ghost8943234.pikapod.net/

8

Look under the home page tab visible in the picture you uploaded.

9

It’s set to expanded. But that effects only the homepage

CleanShot 2024-01-08 at 16.11.13
CleanShot 2024-01-08 at 16.11.13383×844 26.7 KB

10

Well, that’s weird. There’s some css that prevents the images from displaying. Try this in code injection:

<style>
.post-feed:not(.expanded) .feed-image {
    display: block!important;
}
</style>

Or if you want it to look exactly like the homepage feed, add the expanded class to the post-feed div in the tag.hbs file.

11

Thanks, well it did add the thumbnails but not as I wanted. I just want it to look like on the homepage

12

This will make it look like the homepage feed.

13

I don’t know how. Can I do that via code injection? What do I need to change/add?

14

Remove the existing code injection (<style>…).

In code injection footer:

<script>
document.querySelector('.tag-template .post-feed')?.classList.add('expanded')
</script>

Or to make it apply to all feeds site-wide:

<script>
document.querySelector('.post-feed')?.classList.add('expanded')
</script>
15

Perfect, thank you so much! Do you know how could I make the thumbnails be HD ratio so that they don’t crop? All my images are made 16:9

And if we are at aspect ratio how do I make my video embeds 16:9?