# Reddit Style picture thumbnail on the left

**URL:** https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089
**Category:** Feature
**Created:** [Février 26, 2014, 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:** 37

<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: [Juin 13, 2015, 3: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.

---

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