Reddit Style picture thumbnail on the left

feature
37

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. I will at least post what I did here for the thumbnails.

I first started with Sam’s personal “minimal” topic list design and an example 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

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

###Header

<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

Image%202015-06-13%20at%209.51.11%20AM.png1257×719 162 KB

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.

16 Likes