# 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:** 19
**Page:** 3

<div class="post-metadata">

### Author: ![rewphus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rewphus/32/115836_2.png) [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [2015年六月28日 12:47 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/41 "2015-06-28T12:47:18Z")

</div>

> [@Santiago\_Sarceda](#):
>
> Only to “detect” the first image used in a thread and have that URL available on the topics view would be enough; do you think that would be doable?

Isn’t that what `topic.image_url` is already doing? I believe it may only be the first image in the first post, but that should still serve most of your purposes. You would just have to modify the template to put the thumbnail somewhere, but as [Sam has shown](https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552), that is very easy to do in the customize menu now.

---

<div class="post-metadata">

### Author: ![Santiago\_Sarceda](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/santiago_sarceda/32/116346_2.png) [@Santiago\_Sarceda](https://meta.discourse.org/u/Santiago_Sarceda)
#### Post date: [2015年六月28日 16:19 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/42 "2015-06-28T16:19:14Z")

</div>

Oh Great, I thought that was only for category listings.

Yes, topic.image\_url would be enough for most cases, although it would be best to search the whole topic for images.

But again, that will work so thanks for pointing that out 😃

---

<div class="post-metadata">

### Author: ![AlexTemina](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alextemina/32/116368_2.png) [@AlexTemina](https://meta.discourse.org/u/AlexTemina)
#### Post date: [2015年七月5日 16:34 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/43 "2015-07-05T16:34:18Z")

</div>

Thanks for the solution for thumbnails, @rewphus.  
Sorry to ask this newbie question, but I still don’t understand how to add the “Header” code into my forum. I don’t think it goes in “Customize” because you are editing html that already exists, and not adding it, right?  
I don’t really know how to do this, can I get some help? I’ve been looking around the internet about how to edit files but I haven’t get any good documentation. Thanks!

---

<div class="post-metadata">

### Author: ![rewphus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rewphus/32/115836_2.png) [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [2015年七月6日 02:27 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/44 "2015-07-06T02:27:31Z")

</div>

I think I may have addressed your question at a higher level in your [other topic](https://meta.discourse.org/t/edit-existing-source-of-the-forum/30809/9), but for the sake of completness, this is actually added under Customize in the admin panel using a script:

```js
<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

```

I didn’t put all of the code here because Sam does a much better job of explaining that part in [his topic](https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552).

---

<div class="post-metadata">

### Author: ![smartwatchme](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/smartwatchme/32/41275_2.png) [@smartwatchme](https://meta.discourse.org/u/smartwatchme)
#### Post date: [2015年七月31日 14:47 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/45 "2015-07-31T14:47:10Z")

</div>

We implemented this on our site [www.smartwatch.me](http://www.smartwatch.me) for the desktop theme but has anyone been able to do it on the mobile theme?

---

<div class="post-metadata">

### Author: ![Fabio\_Machado\_de\_Oli](https://avatars.discourse-cdn.com/v4/letter/f/48db29/32.png) [@Fabio\_Machado\_de\_Oli](https://meta.discourse.org/u/Fabio_Machado_de_Oli)
#### Post date: [2015年九月20日 21:54 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/46 "2015-09-20T21:54:20Z")

</div>

Is it possible to have a topic.image\_url that looks inside oneboxes? It’s related to this topic because @rewphus customization use it.

---

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

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2016年二月27日 02:15 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/48 "2016-02-27T02:15:46Z")

</div>

@angus

Currently there are 2 topic-list-tags plugin-outlets  
…/list/topic-list-item.raw.hbs  
and  
…/mobile/list/topic-list-item.raw.hbs

Have you found a way to differentiate between desktop view and mobile view ?

I imagine in many cases it would not make a difference, but I would like to know if it’s possible to take advantage of this in some way if it were so desired to do so..

---

<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年二月27日 03:03 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/49 "2016-02-27T03:03:13Z")

</div>

@Mittineague Good point. I often, in my folly, neglect mobile web.

I’m not sure about differentiating between the outlets _per se_ as I think they are effectively the same(?).

But within the connected view itself you can add a `{{#if context.site.mobileView}}{{else}}{{/if}}` to show different content on mobile web; e.g.

```
{{#if context.topic.image_url}}
  {{#if context.site.mobileView}}
    I AM THE MOBILE VIEW
  {{else}}
    <div class="topic-preview">
     {{preview-unbound context.topic.image_url}}
    </div>
  {{/if}}
{{/if}}

```

Here’s a screencast of that at work: [http://quick.as/B0abIDjg8](http://quick.as/B0abIDjg8)

I just committed the update example to the example repo.

[https://github.com/angusmcleod/discourse-topic-previews/commit/f793a4795badff597d0326b127b6724a942a161c](https://github.com/angusmcleod/discourse-topic-previews/commit/f793a4795badff597d0326b127b6724a942a161c)

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2016年二月27日 03:40 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/50 "2016-02-27T03:40:46Z")

</div>

Thanks!

I must have tried at least 3 dozen “guess” variations, none of which worked.  
“site” was the charm.

```handlebars
{{#if context.site.mobileView}}
...
{{/if}}

```

works perfectly.

In my case I’m wanting to have both separate, so instead of one with an else, this works for targetting desktop

```handlebars
{{#unless context.site.mobileView}}
...
{{/unless}}

```

EDIT

> works perfectly

Maybe not so perfect

Fine for

- Latest
- New
- Unread
- Top

But Suggested in mobile seems to not be considered as being in mobile 🐛 ![](https://global.discourse-cdn.com/meta/original/3X/0/3/03de9189d55868b42b39c727f488ac850942b8ee.gif)

---

<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年二月27日 16:29 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/51 "2016-02-27T16:29:14Z")

</div>

> But Suggested in mobile seems to not be considered as being in mobile 🐛

Yes, this seems to be due to the different way/context in which the `topic-list` used for Suggested is instantiated. I tried a few different approaches, but wasn’t able to come up with a solution. Unless I’m missing something, it’s perhaps more of an issue with Suggested topics itself… I’ll give it another shot later this weekend.

---

<div class="post-metadata">

### Author: ![keith1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keith1/32/178982_2.png) [@keith1](https://meta.discourse.org/u/keith1)
#### Post date: [2016年三月6日 03:08 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/52 "2016-03-06T03:08:43Z")

</div>

I know this is an extremely old conversation, but I wanted to provide a few other counter points for @codinghorror for massively successful communities that require images for header posts: Art communities. Perhaps the best one I’ve encountered is the multi-million $$ community CG Society, which uses the thumbnails on select sub-threads, usually competitions, where each new thread is an artist submission. For example:

CG Society:  
[http://forums.cgsociety.org/forumdisplay.php?f=121](http://forums.cgsociety.org/forumdisplay.php?f=121)

This concept exists in many many different concepts and styles, some more discussion based, some more image only based. Many fall on the same side of the discussion as you’ve stated - no header images. While I agree that it usually leads to ugly garbage, in scenarios where it is manicured (art competitions, etc) it leads to quite beautiful, easy to browse glimpses of the entire community at hand.

I’ve only just joined the conversation because I’m looking to use discourse for a new cg community, and will want solutions for the exact listed scenario described above.

---

<div class="post-metadata">

### Author: ![carter2422](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/carter2422/32/114730_2.png) [@carter2422](https://meta.discourse.org/u/carter2422)
#### Post date: [2016年三月24日 17:35 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/53 "2016-03-24T17:35:12Z")

</div>

We have the exact same scenario on [Blender Artists](http://blenderartists.org), which we are in the process of migrating to Discourse. We need the thumbnails explicitly for, and _only_ for the artwork forums, whereby the thumbnails are very helpful for grabbing viewers initial attention towards the shared artwork.

---

<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年三月27日 20:09 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/54 "2016-03-27T20:09:38Z")

</div>

@keith1 @carter2422 Guys, a plugin already exists for this feature. You just need to change the CSS.

If you have any specific feature requests, I’d be happy to add them.

[https://github.com/angusmcleod/discourse-topic-previews](https://github.com/angusmcleod/discourse-topic-previews)

I guess I should just turn this ‘example’ into a listed plugin…

edit: plugin topic: [https://meta.discourse.org/t/topic-list-previews/41630](https://meta.discourse.org/t/topic-list-previews/41630)

---

<div class="post-metadata">

### Author: ![goindeep](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/goindeep/32/71140_2.png) [@goindeep](https://meta.discourse.org/u/goindeep)
#### Post date: [2017年四月25日 11:59 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/56 "2017-04-25T11:59:23Z")

</div>

I agree. Great feature.

Am building a discount discussion forum and am asking users to try and post images where applicable. So when my users are browsing the forum its the images that may take their fancy. This would be a great feature but I dont see why we need to argue over it. Just build a plugin or have someone build one. Thats the great thing about plug ins, not everyone will use them but they will be very valuable to some.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年四月25日 19:53 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/57 "2017-04-25T19:53:49Z")

</div>

> [@codinghorror](#):
>
> And in the case of a website link as the first post, are we going to generate a thumbnail of the website and show that as the image?

We ended up doing this with improved auto oneboxing and pasting a link into the title of a new topic.

But the thumbnail is in the topic itself; the topic list shows a link domain source and glyph like so:

![](https://global.discourse-cdn.com/meta/original/3X/9/2/9267428f55e98a744a45b653aaf939faecbe8ad6.JPG)

---

<div class="post-metadata">

### Author: ![goindeep](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/goindeep/32/71140_2.png) [@goindeep](https://meta.discourse.org/u/goindeep)
#### Post date: [2017年四月26日 22:51 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/58 "2017-04-26T22:51:20Z")

</div>

Can you show me a real world example of this on an existing site? Thanks

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年四月26日 22:52 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/59 "2017-04-26T22:52:04Z")

</div>

There’s a screenshot of it above. Give it a shot on [try.discourse.org](http://try.discourse.org) to see it yourself.

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2025年十二月4日 11:09 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/60 "2025-12-04T11:09:23Z")

</div>



[上一頁](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089.md?page=2)