# Thumbnails for posts on the tag collection page

**URL:** <https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913>\
**Category:** Themes\
**Created:** [January 6, 2024, 6:19pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913 "2024-01-06T18:19:11Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![barnabynagy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/barnabynagy/32/28464_2.png) [@barnabynagy](https://forum.ghost.org/u/barnabynagy)\
**Post date:** [January 6, 2024, 6:19pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/1 "2024-01-06T18:19:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [January 6, 2024, 6:48pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/2 "2024-01-06T18:48:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![barnabynagy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/barnabynagy/32/28464_2.png) [@barnabynagy](https://forum.ghost.org/u/barnabynagy)\
**Post date:** [January 6, 2024, 7:00pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/3 "2024-01-06T19:00:53Z")

</div>

Using the Edition theme

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [January 6, 2024, 7:17pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/4 "2024-01-06T19:17:35Z")

</div>

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? 🙂

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [January 6, 2024, 7:18pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/5 "2024-01-06T19:18:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![barnabynagy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/barnabynagy/32/28464_2.png) [@barnabynagy](https://forum.ghost.org/u/barnabynagy)\
**Post date:** [January 8, 2024, 5:34pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/7 "2024-01-08T17:34:17Z")

</div>

There is no feed layout setting:

> **[CleanShot 2024-01-08 at 11.33.52](https://share.cleanshot.com/zZ2s6wLZ)**
>
> Screenshot uploaded to CleanShot Cloud

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/](https://ghost8943234.pikapod.net/)

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [January 8, 2024, 5:56pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/8 "2024-01-08T17:56:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![barnabynagy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/barnabynagy/32/28464_2.png) [@barnabynagy](https://forum.ghost.org/u/barnabynagy)\
**Post date:** [January 8, 2024, 10:12pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/9 "2024-01-08T22:12:50Z")

</div>

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

 ![CleanShot 2024-01-08 at 16.11.13](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/9/6/9633909b350f2fa13fd83f1999123bfbc2c5ff81.png)

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [January 8, 2024, 10:21pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/10 "2024-01-08T22:21:13Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![barnabynagy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/barnabynagy/32/28464_2.png) [@barnabynagy](https://forum.ghost.org/u/barnabynagy)\
**Post date:** [January 9, 2024, 2:46am UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/11 "2024-01-09T02:46:28Z")

</div>

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

> **[Barnaby Nagy](https://ghost8943234.pikapod.net/)**
>
> Barnaby Nagy is an Artist, Singer-Songwriter, Public Speaker, Author, Mentor, Hustler, Survivor - Barnabas Nagy

> **[flat earth - Barnaby Nagy](https://ghost8943234.pikapod.net/tag/flat-earth/)**
>
> Barnaby Nagy is an Artist, Singer-Songwriter, Public Speaker, Author, Mentor, Hustler, Survivor - Barnabas Nagy

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [January 9, 2024, 10:28am UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/12 "2024-01-09T10:28:41Z")

</div>

> [@Cathy\_Sarisky](#):
>
> 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.

This will make it look like the homepage feed.

---

<div class="post-metadata">

**Author:** ![barnabynagy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/barnabynagy/32/28464_2.png) [@barnabynagy](https://forum.ghost.org/u/barnabynagy)\
**Post date:** [January 9, 2024, 2:20pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/13 "2024-01-09T14:20:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [January 9, 2024, 2:59pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/14 "2024-01-09T14:59:20Z")

</div>

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

In code injection footer:

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

```

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

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

```

---

<div class="post-metadata">

**Author:** ![barnabynagy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/barnabynagy/32/28464_2.png) [@barnabynagy](https://forum.ghost.org/u/barnabynagy)\
**Post date:** [January 9, 2024, 3:36pm UTC](https://forum.ghost.org/t/thumbnails-for-posts-on-the-tag-collection-page/43913/15 "2024-01-09T15:36:19Z")

</div>

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?

> **[Update: I Dropped the Bible, There Are Too Many Contradictions in it](https://ghost8943234.pikapod.net/update-i-dropped-the-bible-there-are-too-many-contradictions-in-it/)**
>
> Just a brief update what has been going on with me and an update about me dropping the Bible.