Topic List Previews


(Angus McLeod) #426

Also, if anyone is familiar with Ruby on Rails, I need some help with optimizing the performance of this plugin :smile:

As far as I understand, the key thing we need to do is move the Active Record lookups out of the serializer. See further here.

Simply put we need to compute less when the topic list is being called and more when the topic is being created.

I attempted to start this process on the weekend on this branch.

Some notes:

  1. The basic move I’m trying to make is save more in custom fields at the time of the post creation, then use those saved values in the serializer rather than look them up.

  2. The reason there is a distinction between the ‘first post’ and the ‘topic post’ is that the post being featured in the topic list may not be the first post of the topic. Currently the other possibility is a post flagged as a solution in the solved plugin. There will be more in the future no doubt.

  3. The ‘dynamic’ values, such as the excerpt and topic_post_can_like, need to be saved whenever relevant changes are made to the ‘topic post’. This needs to be done using the event system (I think), like I’ve done with the first post id.

  4. The reason there’s this code block at the start of the after_initialize which seems to be an attempt to ‘clean’ the thumbnails custom field is that you’ll find that you keep getting ‘no implicit conversion of string to object’ errors if the thumbnails custom field object has any nil values, (or anything other than a valid JSON object). Strictly speaking it shouldn’t be there. It’s inclusion probably stems from my lack of understanding about ruby objects.


#427

Yes, I will take a look at reorganizing the plugin settings. Will start by outlining the plan in a Github issue first, so we’re on the same page.


(Anton) #428

@angus, if we start using the plugin intensively now, do you think the update to the updated plugin will be smooth?

Also, may you update the very first message of the topic with the current view of the topic lists and setting pages? This would be helpful for newcomers and for us to keep track of the summary of the plugin. Many thanks

Tags in topic lists with preview thumbnails and excerpts

Here are two more improvement requests:


(Anton) #429

Another quick question:

I just noticed that in my PM list excerpts are shown.
Is this just a new feature in Discourse, or is it something that your plugin does?


(Joe Fedric) #430

I have noticed, after installing FF mobile on my Nexus 7 (2013), the thumbnail disappears after a moment or two.

Chrome Mobile

[details=Firefox Mobile]

[/details]

I tried tracking down the behavior in Firefox’s inspector, but I can’t recreate the behavior on desktop like I usually can through Chrome’s devtools.

Thoughts on where to look?


(Angus McLeod) #431

@meglio @Joe_Fedric Thanks for the bug reports guys. Will look at them later today / tomorrow morning.

@meglio I just updated the first post with a better description of the functionality of the plugin.


(Daniela) #432

Submitted a PR for italian translation


(Zhiyu Liu) #433

I want to show the thumbnail in the mobile categories page, how should I do that?


(Алексей Копаев) #434

Crash when creating thumbnails and error logs, what could be the Problem?

Could not find file in the store located at url:

/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/logster-1.2.5/lib/logster/logger.rb:76:in `add_with_opts'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/logster-1.2.5/lib/logster/logger.rb:37:in `add'
/usr/local/lib/ruby/2.3.0/logger.rb:507:in `error'
/var/www/discourse/app/models/optimized_image.rb:37:in `block in create_for'
/var/www/discourse/lib/distributed_mutex.rb:21:in `synchronize'
/var/www/discourse/lib/distributed_mutex.rb:5:in `synchronize'
/var/www/discourse/app/models/optimized_image.rb:16:in `create_for'
/var/www/discourse/app/models/upload.rb:41:in `create_thumbnail!'
/var/www/discourse/plugins/discourse-topic-previews/plugin.rb:40:in `thumbnail_url'
/var/www/discourse/plugins/discourse-topic-previews/plugin.rb:31:in `create_thumbnails'
/var/www/discourse/plugins/discourse-topic-previews/plugin.rb:68:in `create_topic_thumbnails'
/var/www/discourse/plugins/discourse-topic-previews/plugin.rb:79:in `update_topic_image'
/var/www/discourse/lib/cooked_post_processor.rb:87:in `post_process_images'
/var/www/discourse/lib/cooked_post_processor.rb:33:in `block in post_process'
/var/www/discourse/lib/distributed_mutex.rb:21:in `synchronize'
/var/www/discourse/lib/distributed_mutex.rb:5:in `synchronize'
/var/www/discourse/lib/cooked_post_processor.rb:31:in `post_process'
/var/www/discourse/app/jobs/regular/process_post.rb:24:in `execute'
/var/www/discourse/app/jobs/base.rb:154:in `block (2 levels) in perform'

Job exception: undefined method `url’ for nil:NilClass

/var/www/discourse/plugins/discourse-topic-previews/plugin.rb:41:in `thumbnail_url'
/var/www/discourse/plugins/discourse-topic-previews/plugin.rb:31:in `create_thumbnails'
/var/www/discourse/plugins/discourse-topic-previews/plugin.rb:68:in `create_topic_thumbnails'
/var/www/discourse/plugins/discourse-topic-previews/plugin.rb:79:in `update_topic_image'
/var/www/discourse/lib/cooked_post_processor.rb:87:in `post_process_images'
/var/www/discourse/lib/cooked_post_processor.rb:33:in `block in post_process'
/var/www/discourse/lib/distributed_mutex.rb:21:in `synchronize'
/var/www/discourse/lib/distributed_mutex.rb:5:in `synchronize'
/var/www/discourse/lib/cooked_post_processor.rb:31:in `post_process'
/var/www/discourse/app/jobs/regular/process_post.rb:24:in `execute'
/var/www/discourse/app/jobs/base.rb:154:in `block (2 levels) in perform'

(Angus McLeod) #435

hm.

I’ve added a fallback, which should prevent this error.

However, I’m not yet sure what the root cause here is.

Is this image uploaded via file upload or linked via url?

Is this setting, in Settings > Files turned off?


(Angus McLeod) #436

There is no setting to do this yet. I will put it on the agenda.


(Joe Fedric) #437

Edit: False alarm. I ran out of space on my install, and rebuilt Discourse. When I was back up and running, the plugin appeared to be not working. I just rebuilt, and the previews are back, though it looks like some of my CSS is not being applied correctly. Gonna have to look into that.


(EW 👌) #438

I did installed the above plugin but after rebuild, my Discourse instance (DO droplet) couldn’t work at all. I did restarted the server and rebuild again, the result is same. So I took it out then things started to work again!

Is there is anything I’m missing?


(Joe Fedric) #439

@angus, I have been messing with the CSS for hours today trying to get things fixed on my forum, and have found something interesting that is creating the problem I’m encountering. Here was my forum yesterday:

Here it is today:

Ignore the banner change, here’s what’s happening. When I look at entries where the .topic-category and .post-actions are correctly displayed, I see something like this:

Correct HTML
<td class="main-link clearfix" colspan="1">
<div class="topic-thumbnail">
  <a href="/path/to/post/">
    <img class="thumbnail" src="image.jpg">
  </a>
</div>
<div class="topic-details">
  <div class="topic-title">
    <a href="/path/to/post/" class="title">Home of the She Wolf of France</a>
    <span class="topic-post-badges">
      <a href="/path/to/post/" class="badge badge-notification new-topic" title="new topic">new</a>
    </span>
  </div>
  <div class="topic-category">
    <a class="badge-wrapper bullet" href="/c/showoff-spot/scenery-and-architecture">
      <span class="badge-category-parent-bg" style="background-color: #652D90;"></span>
      <span class="badge-category-bg" style="background-color: #9EB83B;"></span>
      <span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge" title="Works of man and nature.">Scenery and Architecture</span>
    </a>
  </div>
  <div class="topic-excerpt" style="max-height: 37px;">
    <a data-download-href="/path/to/img/" href="/path/to/img/" class="lightbox" title="castle rising 011_filtered.jpg"></a>
This is Castle Rising. After <a href="/path/to/external/url/">Edward III deposed Roger Mortimer</a>, in1330, his mother was taken first to Berkhamstead Castle and then held under house arrest at Windsor Castle until 1332. After…
        <a href="/path/to/post/">read more</a>
  </div>
  <div class="topic-actions">
    <div class="like-count">5 Likes</div>
    <button class="list-button topic-like" title="like this post"><i class="fa fa-heart" aria-hidden="true"></i></button>
    <button class="list-button topic-bookmark" title="you've read this post; click to bookmark it"><i class="fa fa-bookmark" aria-hidden="true"></i></button>
    </div>
  </div>
</div>
</td>

However, for any .topic-list-item element that the .topic-category and .topic-actions displays incorrectly, I am seeing something like this:

Wrong HTML
<td class="main-link clearfix" colspan="1">
<div class="topic-thumbnail">
  <a href="/path/to/post/">
    <img class="thumbnail" src="image.jpg">
  </a>
</div>

  <div class="topic-title">
    <a href="/path/to/post/" class="title">Home of the She Wolf of France</a>
    <span class="topic-post-badges">
      <a href="/path/to/post/" class="badge badge-notification new-topic" title="new topic">new</a>
    </span>
  </div>
  <div class="topic-category">
    <a class="badge-wrapper bullet" href="/c/showoff-spot/scenery-and-architecture">
      <span class="badge-category-parent-bg" style="background-color: #652D90;"></span>
      <span class="badge-category-bg" style="background-color: #9EB83B;"></span>
      <span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge" title="Works of man and nature.">Scenery and Architecture</span>
    </a>
  </div>
  <div class="topic-excerpt" style="max-height: 37px;">
    <a data-download-href="/path/to/img/" href="/path/to/img/" class="lightbox" title="castle rising 011_filtered.jpg"></a>
This is Castle Rising. After <a href="/path/to/external/url/">Edward III deposed Roger Mortimer</a>, in1330, his mother was taken first to Berkhamstead Castle and then held under house arrest at Windsor Castle until 1332. After…
        <a href="/path/to/post/">read more</a>
  </div>
  <div class="topic-actions">
    <div class="like-count">5 Likes</div>
    <button class="list-button topic-like" title="like this post"><i class="fa fa-heart" aria-hidden="true"></i></button>
    <button class="list-button topic-bookmark" title="you've read this post; click to bookmark it"><i class="fa fa-bookmark" aria-hidden="true"></i></button>
    </div>
  </div>

</td>

The issue appears to be caused by a missing <div class="topic-details"></div> wrapper for the title, category, thumbnail, excerpt, and actions elements.

Any idea what’s causing this? It’s happening only on some posts, and the only difference was a rebuild done earlier today. Should I rebuild again? Uninstall/reinstall the plugin? I can’t waste any more time tracking this down :frowning:

Edit: To do away with the wonky placement for now, I have just disabled the .topic-category and .topic-actions options. :sadpanda:


(Dmitry Demenchuk) #440

It would be nice to be able to “cut” topic excerpts.

I propose to show in topic list items everything above <cut /> keyword.

It will allow to control, what exactly to show on a teaser.


(Joe Fedric) #441

Maybe something like a [excerpt][/excerpt] wrapper? Sticking with Discourse convention :slight_smile:


(Dmitry Demenchuk) #442

It doesn’t really matter, as long as you can control a teaser - it’s fine.


(Angus McLeod) #443

@Joe_Fedric Hey, sorry to hear you’re having this problem. I’ll take a look tomorrow.


#445

Does anyone know why the welcome preview img shows up, but not the img from my post?

Settings are as follows:

Discourse Version is 1.7.0.beta6
Topic Previews Versions is 0.2

Am I missing a setting, or doing something wrong?? Please help anyone. :frowning:


(Pad Pors) #446

two slight issue regarding the social UI:

1- in the topic list, when one like a topic, the image suddenly shrinks to 100*100 thumbnail:

2- admin loses the selection pane, so admin can not select several topics and do an specific action on them (e.g. change category).