Show "topic-excerpt" for all post on Latest Page


#14

How about just a simple tooltip on mouseover of the topic title?


(Tom Newsom) #15

No good on touch screens


#16

[quote=“Tom_Newsom, post:15, topic:7368, full:true”]
No good on touch screens
[/quote]Duh. But how about adding tooltip previews as a desktop only feature until a better solution is found/implemented?


(Angus McLeod) #17

Just playing around with this now, it’s relatively simple to ‘turn on’ excerpts for all topics in the discovery stream.

Please note, this is just the basic way to make all items in the discovery stream have an excerpt. I make no promises about performance (or anything else) :smile:

I’m assuming you’re already familiar with the basics of how to write a plugin.

  1. Add this to your plugin.rb file

    ``
    after_initialize do

     require 'listable_topic_serializer'
    
     class ::ListableTopicSerializer
    
       def include_excerpt?
         true
       end
    
     end
    

    end
    ``

    Basically, this reopens the ListableTopicSerializer class and overwrites the include_excerpt property to always return true (see further here). Normally ‘include_excerpt’ is defined as pinned, hence excerpts are only included in pinned posts.

  2. Overwrite /templates/list/topic-list-item.raw.hbs by copying the template (with the same file path) into your plugin.

  3. Remove the {{#if expandPinned}} {{/if}} wrapped around {{raw "list/topic-excerpt" topic=topic}} in the main-link

Viola, you now have topic excerpts for all items in the discovery stream.


Show excerpt for all topics via a theme
(Kane York) #18

Okay, now taking that it’s pretty easy to turn this into a core feature.

  def include_excerpt?
    SiteSetting.excerpts_for_all_topics || original_condition
  end

and

  expandPinned: function() {
    return this.siteSettings.excerpts_for_all_topics || this.get('something');
  }.property('something'),

(Jay Pfaffman) #19

Is it possible to do something similar to this to include the username of the poster before the topic?


(Angus McLeod) #20

Hey. Not similar, but it’s definitely possible. It looks like that info is already included in the topic data sent to the client (see attached). So what you need to do is write a plugin that changes the appropriate topic list template to display that data. This is probably doable by just overriding a handlebars template, but you may need to reopen a controller or somesuch and add a method that decorates the template with the appropriate data. You won’t need to change any server logic (which was required for the topic-excerpt).


(Pad Pors) #21

I couldn’t make it work yet. nochanges happen after i follow the recepie. any clue?

just to make sure i got it right, i’ve a excerpt-plugin folder with 2 files:

  1. plugin.rb with the mentioned code in it.
  2. topic-list-item.raw.hbs with omitted if + /if lines.

anything wrong?


(Angus McLeod) #22

Hey,

  1. Are you sure the plugin is being picked up on your instance properly?

  2. Have a re-read of the plugin tutorials to make sure you haven’t missed anything about making a plugin (e.g. right folder structure)

  3. Take a look at how quick messages adds an excerpt to private messages.

  4. Publish your plugin repo so I can take a look.


(Pad Pors) #23

thanks for the guide. I found the mistake: i haven’t overwritten the topic-list.raw.hbs ; and i just put the second version of this file without if+/if in the plugin folder.

now it works, and thanks for the simple line. the plugin has nothing to publish, just a plugin.rb in a folder into the /plugin folder. and the code is just as you told:

#PLUGIN_NAME = "topic_excerpt".freeze

after_initialize do
  require 'listable_topic_serializer'
  class ::ListableTopicSerializer

    def include_excerpt?
      true
    end

  end
end

do you have any idea how one can also add the simple images as a thumbnail in this excerpt lines?

or showing parts of the chosen answer in the excerpt rather than the topic itself?


Reddit Style picture thumbnail on the left
(Angus McLeod) #24

I just added some notes on the existing topic for this question.

or showing parts of the chosen answer in the excerpt rather than the topic itself?

The way you would do this is by overriding the excerpt method in the listable topic serializer and making an excerpt from the post the is_accepted_answer post custom field set as true (I’m assuming you’re using Discourse Solved). See the example of a similar change I made in quick messages in the screenshot I added to my previous post.


(Pad Pors) #25

thanks for your nice sharing, though still not successful in making them work :wink:

the preview plugin doesn’t work. should one change it of is there anything particular about the posts or the images so that it may work?

the second suggestion about the accepted answer in the excerpt seems great, but i just don’t have any ruby knowledge. may you give some more direct hint?

will work on both to see if i can make it :slight_smile:


(Angus McLeod) #26

the preview plugin doesn’t work. should one change it of is there anything particular about the posts or the images so that it may work?

Hm looks like it’s working for me. Are you running it on your local using vagrant? If so, make sure you’re running sidekiq (see here). Some of the post processing is done by sidekiq so it won’t work if it’s not running.

the second suggestion about the accepted answer in the excerpt seems great, but i just don’t have any ruby knowledge. may you give some more direct hint?

I’m no ruby master either :slight_smile: But if you piece together the code from quick messages and the solved plugin itself you get:

Then you just need to stick the excerpt itself in the topic-list-tags connector view in the topic-previews example plugin

Which seems to work: http://quick.as/PvkoizDXO

I committed that to the topic preview example for you.


(Pad Pors) #27

thanks to your helps and lines of codes, I merged the topic-except and thumbnail image plugin and put it here:

here is a screenshot of how it works, it’s in Persian language, but i think it can still show how the excerpt and the thumbnail image are working:

so far, we’ve seen only one bug with this method: in the suggested list at the bottom of topic pages, the excerpt is also being shown and make it noisy. currently we reduced the noise by limiting the number of suggested topics to one. will try to find a better solution for future :wink:


(Pad Pors) #28

questions on the excerpt and image thumbnail:

  1. when there’s an image in the topic, in the excerpt it replaces the image with text “[image]” in the main page and shows the image on top of the text. is there a way to remove this text?

  2. whatever i do, i can’t make “overflow: hidden;” work in the css style of image, as a result my images become bad shaped when they are not the same size of what i’ve set. is there a way to crop that dimension of the image which is larger than the set so that the image aspect ratio remains fixed?

  3. is there a way to have this excerpt code affect only the main page (the topic list) and not any other places? i noted and it seems that the excerpt is everywhere with the topic subject line, as i use the excerpt-code.
    thanks in advance,


(Angus McLeod) #29

when there’s an image in the topic, in the excerpt it replaces the image with text “[image]” in the main page and shows the image on top of the text. is there a way to remove this text?

This is normal behavior for Discourse excerpts. What you are seeing is the [text] part of the image markdown. The rest of the markdown is stripped away unless the PrettyText option markdown_images is turned on (see the excerpt_parser). There isn’t built in way to remove this text, but you could just slice it out in your excerpt method in the ListableTopicSerializer with

excerpt.slice! "[image]"

whatever i do, i can’t make “overflow: hidden;” work in the css style of image, as a result my images become bad shaped when they are not the same size of what i’ve set. is there a way to crop that dimension of the image which is larger than the set so that the image aspect ratio remains fixed?

Set a max-width or max-height on the <img> element instead of width or height.

is there a way to have this excerpt code affect only the main page (the topic list) and not any other places? i noted and it seems that the excerpt is everywhere with the topic subject line, as i use the excerpt-code.
thanks in advance,

The suggested_topic_serializer extends the listable_topic_serializer. This makes it relatively easy to distinguish topics list in the ‘discovery’ part of the app from those listed in the suggested topics list. We just have to add a property to the suggested_topic_serializer that identifies listed topics from that source.

Within the after_initialize block in the server code add this

add_to_serializer(:suggested_topic, :is_suggested) {true}

This will add the property is_suggested to all topics appearing in suggested topic lists. Then it’s just a matter of excluding excerpts from topic list items containing this property, i.e. wrap the topic-list-preview html in

{{#unless context.topic.is_suggested}}...{{/unless}}

I’ve updated the example repo to demonstrate solutions to 1, 2 and 3.


(Pad Pors) #30

many thanks Angus,
for the image, i’m trying to use something like this:

width: 100%;
max-height: 140px;
overflow: hidden !important;

the image became reshaped this way & so far your suggestion works better .

p.s: i had to remove this line from topic-list-preview.raw.hbs:

{{raw "list/topic-excerpt" topic=context.topic}}

otherwise it was showing me a duplicated excerpt text.

@angus


(Angus McLeod) #31

Overflow has to be set on the div containing the img element, not on the img element itself, whereas width and max-height should, in this case, be set on the img element. But I don’t think that setting overflow is necessary here.

p.s: i had to remove this line from topic-list-preview.raw.hbs:
{{raw “list/topic-excerpt” topic=context.topic}}

otherwise it was showing me a duplicated excerpt text.

Are you using my example plugin or a modified version?

edit: I’m going to turn the ‘example’ into a proper plugin: Topic List Previews


(Pad Pors) #32

well perhaps something else was wrong in my side, it worked without removing that line!


(Régis Hanol) split this topic #33

A post was split to a new topic: Show excerpt for all topics via a theme