Reddit Style picture thumbnail on the left

Feature
41

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, that is very easy to do in the customize menu now.

2 Likes
42

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 :smiley:

43

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!

44

I think I may have addressed your question at a higher level in your other topic, but for the sake of completness, this is actually added under Customize in the admin panel using a script:

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

1 Like
45

We implemented this on our site www.smartwatch.me for the desktop theme but has anyone been able to do it on the mobile theme?

1 Like
46

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

47

I was asked a question about this here, so just making a few notes here as this feature seems to have a fair amount of interest.

  1. As @lightyear pointed out here, 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). The way you would change which image is used in the preview is also provided by @lightyear in the same topic here. i.e. you override the update_topic_image method in the CookedPostProcessor.

  2. As @rewphus points out in his nifty solution, 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. I’ve published an example plugin for this approach here 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.

Screen Shot 2016-02-26 at 9.24.37 AM.png2560×1388 448 KB

3 Likes
48

@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…

49

@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

I just committed the update example to the example repo.

https://github.com/angusmcleod/discourse-topic-previews/commit/f793a4795badff597d0326b127b6724a942a161c

4 Likes
50

Thanks!

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

{{#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

{{#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 :bug:

51

But Suggested in mobile seems to not be considered as being in mobile :bug:

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.

3 Likes
52

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

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.

7 Likes
53

We have the exact same scenario on Blender Artists, 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.

4 Likes
54

@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

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

edit: plugin topic: https://meta.discourse.org/t/topic-list-previews/41630

8 Likes
56

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.

1 Like
57

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:

1 Like
58

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

59

There’s a screenshot of it above. Give it a shot on try.discourse.org to see it yourself.

1 Like