Topic List Thumbnails Theme Component

theme
#130

Added in FEATURE: Allow display mode to be customized for tag routes (#3) · discourse/discourse-topic-thumbnails@9a8baef · GitHub

I’ve added a new setting to turn on/off thumbnails for non-topic-list pages (e.g. suggested topics, PMs, etc.). I suspect the vast majority of sites will want to leave this disabled. FEATURE: Disable thumbnails for non-topic-list views by default by davidtaylorhq · Pull Request #4 · discourse/discourse-topic-thumbnails · GitHub

8 Likes
#131

My discourse has been using this component for months, and we’ve loved it up until last night.
Previously the frame that was put around the thumbnail was a dark gray when using the Dark theme (our default), but now it’s very bright. So bright that the dark mode text cannot be read, and the use of the dark theme is nullified.
Is there a setting that I’ve missed?

1 Like
#132

Hi @VirgilVulpes - sorry to hear you’re having issues. There haven’t been any recent changes to the styling of this component. Any chance you can share a link to your site?

I did spot one possible cause: UX: Add support for automatic dark mode (#6) · discourse/discourse-topic-thumbnails@690e812 · GitHub. Can you try updating the component and see if it helps?

4 Likes
#133

image

Tried to add the grid view to our “video” tag, but the autocomplete in the component settings does not find the tag, although visible to everyone. Any suggestions?

image

2 Likes
#134

Looks like this is an issue in core - we’ll get it fixed up. I just opened a PR here: FIX: Allow all tags in site/theme settings, ignore tag group restrictions by davidtaylorhq · Pull Request #12067 · discourse/discourse · GitHub

7 Likes
#135

Terribly sorry for not getting back to you sooner, but after updating the component the issue is indeed fixed! Thank you on behalf of my entire community.

2 Likes
#136

Updated and checked the changed version. The problem with suggested topics wasn’t solved.
If I use masonry styling for topics in the category then it will be logically that I would like to suggest other topics in the same way. Please, add a separate mark to activate/deactivate styling for suggested topics.

Thank you!

1 Like
#137

I have some strange issue now.

I’m using the component for all forum CSS modifications, and for Topic List Thumbnails it’s modified like this:

// Topic list thumbnails

.topic-thumbnails-list,
.topic-thumbnails-grid,
.topic-thumbnails-masonry {
  .topic-list-thumbnail {
    background: var(--primary-low);
    position: relative;
    float: left;
    margin-right: 10px;
    width: 100px;
    height: 56px;
    overflow: hidden;
    border-radius:5px;

    // Blurred background image
    .background-thumbnail {
      z-index: 0;
      position: absolute;
      object-fit: cover;

      $blur_size: 4px;

      filter: blur(#{$blur_size});
      width: calc(100% + 4 * #{$blur_size});
      height: calc(100% + 4 * #{$blur_size});
      top: calc(-2 * #{$blur_size});
      left: calc(-2 * #{$blur_size});
    }

    // Tint background to blend with $secondary
    &:after {
      z-index: 1;
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: $secondary;
      opacity: 0.4;
    }

    .main-thumbnail {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .thumbnail-placeholder {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      .d-icon {
        width: 60%;
        height: 60%;
      }
    }
  }
}

Before the latest update, this worked but now not. I’m using the same components on my other Discourse installation and everything works fine. Any ideas on how to make it work?

Edit:

I used !important for width and height, and now works, but still I didn’t need to use it on the other installation.

2 Likes
#138

It would be great if you showed your problem on a website or gave a screenshot of the problem.

3 Likes
#139

I’m a bit confused by this. :sweat_smile: I understand that topic thumbnails are used by this TC, but what’s a post thumbnail? Is it what shows up in some oneboxes?

1 Like
#140

Yes exactly. If you link to a specific post from another site (e.g. Discourse, Facebook, Twitter, etc.), we try to extract an image from the post you linked.

e.g. if I were to share one of the posts in this topic on Facebook:

Screenshot 2021-02-19 at 11.04.56
Screenshot 2021-02-19 at 11.04.562034×1368 227 KB

3 Likes
#141

Thanks, David.

On a different note, I’ve run into a problem when trying to add an image to a few old topics that contained a poll. Even adding a single extra character to the post makes it think that I’m trying to modify the poll.

Is there a way I can define the topic thumbnail from a post different from the OP?

1 Like