# Reddit Style picture thumbnail on the left

**URL:** https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089
**Category:** Feature
**Created:** [2014年二月26日 10:11 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089 "2014-02-26T10:11:21Z")
**Posts on this page:** 1
**Showing post:** 47

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [2016年二月26日 14:35 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/47 "2016-02-26T14:35:26Z")

</div>

I was asked a question about this [here](https://meta.discourse.org/t/show-topic-excerpt-for-all-post-on-latest-page/7368/23), so just making a few notes here as this feature seems to have a fair amount of interest.

1. As @lightyear pointed out [here](https://meta.discourse.org/t/give-discourse-social-media-look/23711/51), the server creates this attribute by pulling the image from the first post (his link is a out of date now, the relevant code is [here](https://github.com/discourse/discourse/blob/master/lib/cooked_post_processor.rb#L251)). The way you would change which image is used in the preview is also provided by @lightyear in the same topic [here](https://meta.discourse.org/t/give-discourse-social-media-look/23711/55). i.e. you override the `update_topic_image` method in the CookedPostProcessor.

2. As @rewphus points out in [his nifty solution](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/37), if you override a template you’re prone to issues with changes to that template in Discourse core in the future.

3. The way to achieve this, or adding anything else to topic list items, in a plugin without overriding `topic-list-item.raw.hbs` is by using the topic-list-tags plugin outlet in the `topic-list-item.raw.hbs` template and adding a handlebars helper that gives you the raw html to insert. The model for this approach is the tagging plugin. [See here](https://github.com/discourse/discourse-tagging/blob/master/assets/javascripts/discourse/initializers/extend-for-tagging.js.es6#L72). I’ve published [an example plugin for this approach here](https://github.com/angusmcleod/discourse-topic-previews/tree/master) which adds the topic.image\_url to each topic list item.

Note that the topic list item properties are available in your new connected view through the `context` object. [See further here](https://github.com/discourse/discourse/blob/0f7aaf5ab19f593416a0012f223e2f91e6cb0329/app/assets/javascripts/ember-addons/reusable-list-item-view.js.es6#L12).

 ![](https://global.discourse-cdn.com/meta/original/3X/1/5/15b42fda5edead125b26575222ae506c39fd00ae.png)

---

_[View the full topic](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089)._