# Reddit Style picture thumbnail on the left

**URL:** https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089
**Category:** Feature
**Created:** [26 februari 2014 om 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:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![katie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/katie/32/114266_2.png) [@katie](https://meta.discourse.org/u/katie)
#### Post date: [16 maart 2014 om 12:48 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/21 "2014-03-16T12:48:43Z")

</div>

> [@codinghorror](#):
>
> I don’t really like this on Reddit, and reddit is not a forum at all really. It is a place to post funny pictures (or links) as the first post and comment on them. Not the same thing as actual conversations.
> 
> Can you provide examples of other forums, real forums, that do this? Screenshots?

It is commonly used on forums. There is a plugin for a similar feature on Vbulletin, i use it, many forums uses it actually, the plugin works in a way that it shares a preview of the topic pic : )

Example [http://forum.nihonomaru.com/marus-fanclubs.59/](http://forum.nihonomaru.com/marus-fanclubs.59/)

Pic are small with a pop up when you hover over them. Visually appealing topics does encourage discussions for different communities.

> [@piotrek\_lisowsk](#):
>
> I would like to see thumbnails of images and movies youtube / vimeo / LiveLeak.

See Vbulletin plugin’s settings. It can grab a video thumbnail as well.

Settings:

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

 ![](https://global.discourse-cdn.com/meta/original/3X/7/2/7236e01c6efe0deb4d950ad5da9d21580925cf9a.png)

Plugin: [http://www.vbulletin.org/forum/showthread.php?t=270794&highlight=Chiplove.9xpro+-Thread+Thumbnails](http://www.vbulletin.org/forum/showthread.php?t=270794&highlight=Chiplove.9xpro+-Thread+Thumbnails)

---

<div class="post-metadata">

### Author: ![Greg\_Swallow](https://avatars.discourse-cdn.com/v4/letter/g/7ea924/32.png) [@Greg\_Swallow](https://meta.discourse.org/u/Greg_Swallow)
#### Post date: [25 april 2014 om 16:12 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/22 "2014-04-25T16:12:26Z")

</div>

I was looking for this feature too. I can see it being useful for a buy & sell section of a forum too, like this site for example: [http://www.dance.net/highlandforsaledresses.html?page=1](http://www.dance.net/highlandforsaledresses.html?page=1)

I’ve been looking at using Discourse or Xenforo. There is also a plugin for Xenforo that implements this: [http://xenforo.com/community/resources/thumbnails-by-waindigo.223/](http://xenforo.com/community/resources/thumbnails-by-waindigo.223/)

If there is someone out there that could write a plugin that would do this, I think there seem to be a few people here willing to chip in to fund the development of it.

---

<div class="post-metadata">

### Author: ![emini\_guy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/emini_guy/32/104835_2.png) [@emini\_guy](https://meta.discourse.org/u/emini_guy)
#### Post date: [10 augustus 2014 om 07:39 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/23 "2014-08-10T07:39:03Z")

</div>

Yes, I can see it very useful too. I like the way Xenforo implements it.

---

<div class="post-metadata">

### Author: ![piotrek\_lisowsk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piotrek_lisowsk/32/3325_2.png) [@piotrek\_lisowsk](https://meta.discourse.org/u/piotrek_lisowsk)
#### Post date: [11 augustus 2014 om 20:45 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/24 "2014-08-11T20:45:22Z")

</div>

any news? I think it’s a useful feature

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [7 oktober 2014 om 22:27 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/25 "2014-10-07T22:27:21Z")

</div>

If anything this is an extensibility request, this kind of behavior will not be in core.

---

<div class="post-metadata">

### Author: ![dogweather](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dogweather/32/116090_2.png) [@dogweather](https://meta.discourse.org/u/dogweather)
#### Post date: [11 mei 2015 om 07:28 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/26 "2015-05-11T07:28:05Z")

</div>

You’re describing one particular type of subreddit. But Reddit is really just infrastructure, and people have absolutely built real forums with real conversations. Two examples: MakeupAddiction (243K members / 321 simultaneously online), and SkincareAddiction (157K members / 331 online).

 ![](https://global.discourse-cdn.com/meta/original/3X/f/8/f88acc69e40791e32d8d5a8db4955e10d9e7a277.png) 

 ![](https://global.discourse-cdn.com/meta/original/3X/e/3/e3b26825269c028885913d081896fa4af6b00ac6.png) 

The photos and the prominence of content make the forums easy, interesting, and **fun** to participate in.

I chose two forums by and for women because I think this may be a blind spot in Discourse’s design. (It gives me pause on some planned implementations, especially since Discourse is “opinionated” software.) Here’s what I mean:

- It looks like the [list of model forums you surveyed](http://blog.discourse.org/2013/03/the-universal-rules-of-civilized-discourse/) weighs heavily towards male/geek/nerd culture. I was surprised to not see any sites explicitly targeting a female audience. I realize that the article was about TOS not UX design. But I see a “male” / geek aspect to the standard Discourse UX. E.g., the “Views” column which contributes to the topic list resembling an accountant’s spreadsheet. The bottom line is that Pinterest, Reddit and Slack are **fun**. Discourse is awesome, but it doesn’t have that fun aspect yet.
- Reddit shows a “# of users online now” indicator, similar to Slack. IIRC you’re also are not a fan of this, although it contributed to these communities’ growth and sense of human community.

Please take my critique in the most positive way possible. Discourse is amazing. To me, though, it feels unnecessarily prescriptive instead of flexible and open-minded.

---

<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: [11 mei 2015 om 07:37 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/27 "2015-05-11T07:37:32Z")

</div>

This analysis is nonsense and horribly sexist. _Women_ need images in topic lists? What about [http://community.americanpregnancy.org](http://community.americanpregnancy.org) ?

I agree that for some topics it might make sense, and makeup / skincare are highly visual, but I think you’re going in a really weird direction here with this “analysis”.

People have plenty of fun in Discourse. Slapping an image in a topic list is not the only way to have a good time. There are tons of images in topics, it’s very easy to paste or drag and drop images in Discourse. And there are plenty of people having fun with Discourse. For example on [http://community.imgur.com](http://community.imgur.com)

 ![](https://global.discourse-cdn.com/meta/original/3X/0/d/0dde1d61aa4f7452b4e0d2066fee9a95ad4a72c9.png) 

Go ahead, search for yourself. They had a bunch of topics like that. Many other Discourse instances do, too. (And a lot of women in the Imgur community, too, for the record.)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [11 mei 2015 om 11:41 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/28 "2015-05-11T11:41:49Z")

</div>

It was funny, I was just reading through this:

[http://allthesparkles.com/t/comments-suggestions-box/60](http://allthesparkles.com/t/comments-suggestions-box/60)

> I too am impressed with how intuitive this site is so far.

and

> again, like i’ve said many many times already – i love the site!

Nope, nobody seems to be complaining there about lack of reddit style.

# of users online has been done to death in another topic, feel free to dig it up and read it.

---

<div class="post-metadata">

### Author: ![purldator](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@purldator](https://meta.discourse.org/u/purldator)
#### Post date: [11 mei 2015 om 13:00 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/29 "2015-05-11T13:00:53Z")

</div>

If anything, it’s the _males_ that require pictures. Females have a very dominant verbal left brain. Males have a dominant right brain which focuses on visuals.

But even then individuality of a person trumps anything.

> [@dogweather](#):
>
> (It gives me pause on some planned implementations, especially since Discourse is “opinionated” software.)

Your far-reaching correlations for the sake of changing an _opinion_ have been noted.

Also, there _is_ a way to change it yourself if you grab the first image from each post and display it on the topic view.

> [@dogweather](#):
>
> The bottom line is that Pinterest, Reddit and Slack are fun.

To try and peg a specific website for a specific gender/sex now makes me realize why I get deprecating comments on my use of Pinterest to keep tabs on image-based writing help and fan art. (If I am to correlate your use of women as a whole as proof of need for your feature request).

And for the record, [Reddit is known as one of the biggest man caves on the internet](http://www.thewire.com/entertainment/2012/07/why-reddit-so-anti-women-epic-reddit-thread-counts-ways/55080/).

---

<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: [11 mei 2015 om 22:27 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/30 "2015-05-11T22:27:35Z")

</div>

Yeah it seems really strange to hold up Reddit as an example of a site that’s friendly to women.. at all.

That said, @dogweather I appreciate what you’re saying about some topics being more amenable to images in the topic list, and I can agree with that… but I disagree with the _way_ in which you said it.

---

<div class="post-metadata">

### Author: ![dogweather](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dogweather/32/116090_2.png) [@dogweather](https://meta.discourse.org/u/dogweather)
#### Post date: [12 mei 2015 om 00:03 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/31 "2015-05-12T00:03:10Z")

</div>

> [@codinghorror](#):
>
> I disagree with the way in which you said it

Help me understand. My comment still reads friendly, civil, and constructive to me, even though I was giving critique.

You probably won’t be surprised to find out that your replies came off as aggressive to me,

> This analysis is nonsense and horribly sexist.

…and dismissive because you didn’t respond to most of the content of my post.

> I appreciate what you’re saying about some topics being more amenable to images in the topic list, and I can agree with that

Thanks. My particular use case is people discussing restaurant health conditions; a topic that naturally lends to visual content.

And so I’m estimating the cost of building and maintaining a plugin to parse text and display a per-post icon/image.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [12 mei 2015 om 00:04 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/32 "2015-05-12T00:04:47Z")

</div>

> [@dogweather](#):
>
> And so I’m estimating the cost of building and maintaining a plugin to parse text and display a per-post icon/image.

The lucky thing here is that injecting templates is rather simple (see my theme for an example) the tricky thing is going to be to pick an image and store it in a custom field that is sent down with the list.

---

<div class="post-metadata">

### Author: ![dogweather](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dogweather/32/116090_2.png) [@dogweather](https://meta.discourse.org/u/dogweather)
#### Post date: [12 mei 2015 om 00:13 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/33 "2015-05-12T00:13:01Z")

</div>

Thanks! That helps. I just found your post about [custom user fields](https://meta.discourse.org/t/custom-user-fields-for-plugins/14956); that’s a piece of cake to use. Is there something analogous for posts?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [12 mei 2015 om 00:51 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/34 "2015-05-12T00:51:55Z")

</div>

Yes, but getting it in to the serializer is challenging especially if you are to avoid n+1

---

<div class="post-metadata">

### Author: ![Trevor\_Lyman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/trevor_lyman/32/115918_2.png) [@Trevor\_Lyman](https://meta.discourse.org/u/Trevor_Lyman)
#### Post date: [12 mei 2015 om 02:27 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/35 "2015-05-12T02:27:26Z")

</div>

This would be a great feature!

I think that when it comes to styling options it should be Discourse’s mission to give us as many options and as much flexibility as possible.

---

<div class="post-metadata">

### Author: ![piotrek\_lisowsk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piotrek_lisowsk/32/3325_2.png) [@piotrek\_lisowsk](https://meta.discourse.org/u/piotrek_lisowsk)
#### Post date: [20 mei 2015 om 18:59 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/36 "2015-05-20T18:59:39Z")

</div>

I use Discourse for several months and I love it, really! However option for thumbnails (YouTube videos and images), would be very useful for me and our users. [Our site](http://prawypas.leftlane.pl/) brings together a lot of content. With thumbnails would be much easier to navigate.

Please, can you do something about it?

---

<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: [13 juni 2015 om 15:30 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/37 "2015-06-13T15:30:00Z")

</div>

I started to play around with this idea recently and I was able to get the thumbnails working, but there are [a lot of things I’m still working on for it to fit my needs](https://meta.discourse.org/t/customize-topic-list-per-category/29974). I will at least post what I did here for the thumbnails.

I first started with [Sam’s personal “minimal” topic list design](https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552) and an [example](https://meta.discourse.org/t/how-to-determine-category-from-a-header-customization/24819) form @JSey . @sam provided a great starting point for a minimal layout that just so happens would more easily fit thumbnails, so i figured there was no reason to reinvent the wheel. His full customizations can be found in the linked topic, but for the most part I made the following additions to his code to get thumbnails:

###css

```css
.topic-thumbnail {
    background-position: center center;
    background-size: cover;
    border-radius: 3px;
    float: left;
    height: 90px;
    width: 130px;
    margin-right: 2em;
}

```

###Header

```js
<td class='main-link clearfix'>
   {{raw "topic-status" topic=topic}}
    {{#if topic.image_url}}
    <a href="{{topic.url}}" class=topic-thumbnail style="background-image: url({{topic.image_url}});"></a>
     {{topic-link topic}}
    {{else}}
     {{topic-link topic}}
    {{/if}}
//rest of code here

```

If you want to see it for yourself, this is what I have so far:

[http://talk.polygonalweave.com/c/games](http://talk.polygonalweave.com/c/games)

 ![](https://global.discourse-cdn.com/meta/original/3X/3/c/3c54dd6090f86096520bb50258ddc8d2c8fde1e2.png)

As you can see I removed many other elements that you would probably want to keep for most use cases, but that can easily be modified with Sam’s code. Since I am currently only doing this for my Games category (which brings a host of other problems), I can get away with showing less.

This is definitely not for everyone and it you aren’t comfortable applying manual customizations to your site, I don’t suggest you do this as it always has the chance to break with an update. I just like to experiment with what I can do with Discourse, and I’m willing to accept the consequences.

---

<div class="post-metadata">

### Author: ![Pablo\_Macaluso](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pablo_macaluso/32/107601_2.png) [@Pablo\_Macaluso](https://meta.discourse.org/u/Pablo_Macaluso)
#### Post date: [14 juni 2015 om 07:36 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/38 "2015-06-14T07:36:01Z")

</div>

Amazing, works only in one specific category?

---

<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: [14 juni 2015 om 13:26 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/39 "2015-06-14T13:26:10Z")

</div>

I only have it configured for one particular category, but the example code above will apply this to all categories.

I only wanted it on one category because from my understanding topic.image\_url will only pull an image from the first post of a topic and many of my topics don’t have images, except for games.

---

<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: [28 juni 2015 om 04:04 UTC](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/40 "2015-06-28T04:04:56Z")

</div>

First, i want to say that I love Discourse and I love the work you are doing.

I was looking for exactly this feature and I got a bit disappointed when I read this thread. I really think it’s a feature that could help boost community engagement by making the overall ux more visual.

For example, I read a few subreddits like Science, Futurology, or Technology, and since a lot of the things that are discussed there can be linked to a picture, it helps a lot to “preview” what they are talking about. Like if there is a thread discussing a new video about Google Self driving car, I can easily see if I already saw that video or if it is a nee one.

Anyway, I really do think it would be a great and beneficial feature for any community. It doesn’t has to look like pinterest, and i think it doesn’t go against the idea of using mainly text to communicate and have fun and share information, but it enriches it.

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?

It would be really cool if you could give it another thought. Maybe the future of forums is _just a bit_ more visual!

Thanks again for Discourse

Cheers!

[Vorige pagina](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089.md?page=1)

[Volgende pagina](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089.md?page=3)
