Миниатюры списка тем

| | |
|:—|:—|:—|
| :discourse2: | Сводка | Миниатюры списков тем позволяет отображать миниатюры тем в представлениях списков тем.
| :eyeglasses: | Предпросмотр | Предпросмотр в конструкторе тем Discourse (стиль блога)
Предпросмотр в конструкторе тем Discourse (сетка)
Предпросмотр в конструкторе тем Discourse (список)
Предпросмотр в конструкторе тем Discourse (мозаика)
Предпросмотр в конструкторе тем Discourse (минималистичная сетка) |
| :hammer_and_wrench: | Ссылка на репозиторий | https://github.com/discourse/discourse-topic-thumbnails
| :open_book: | Новичок в темах Discourse? | Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Возможности

Для списков генерируются оптимизированные изображения, и предоставляются различные разрешения для дисплеев с высокой плотностью пикселей. Изображения загружаются по мере прокрутки (там, где это поддерживается нативно браузером).

По умолчанию Discourse использует первое изображение в первом посте (OP) темы. Если вы хотите выбрать другое изображение из первого поста, добавьте |thumbnail к markdown-разметке. Например:

![alttext|100x100](upload://aaa)
![alttext|100x100|thumbnail](upload://bbb) << это изображение будет миниатюрой

Существует пять режимов, которые можно настроить для каждой категории или тега с помощью настроек темы.

Например:

Режим сетки:

Режим мозаики:

И режим списка:

Советы и приемы

Если вы хотите, чтобы Oneboxes в ваших сообщениях генерировали миниатюры, вам нужно включить следующую настройку сайта: download_remote_images_to_local. Также вам потребуется перезаписать соответствующие сообщения.

Настройки

Название Описание
режим миниатюры по умолчанию Какой режим отображения миниатюр следует использовать по умолчанию
режим миниатюры для документации Если включен плагин документации, какой режим отображения миниатюр следует использовать для тем документации
категории в стиле блога В этих категориях будет использоваться представление в стиле блога. Этот стиль использует выдержки из тем, если они включены через тему или компонент темы
категории минималистичной сетки В этих категориях будет использоваться представление минималистичной сетки
категории сетки В этих категориях будет использоваться представление сетки
категории мозаики В этих категориях будет использоваться представление мозаики
категории списка В этих категориях будет использоваться представление списка
теги в стиле блога
теги минималистичной сетки Для этих тегов будет использоваться представление минималистичной сетки
теги сетки Для этих тегов будет использоваться представление сетки
теги мозаики Для этих тегов будет использоваться представление мозаики
теги списка Для этих тегов будет использоваться представление списка
режим предложенных тем Какой режим отображения миниатюр следует использовать для предложенных тем? Если поле пустое, будет использоваться настройка «включить вне списков тем».
включить вне списков тем Включить миниатюры на страницах, не являющихся списками тем (например, активность пользователя, личные сообщения, предложенные темы)
иконка-заполнитель Иконка, отображаемая для тем без изображений миниатюр
миниатюры на мобильных устройствах Включить миниатюры на мобильных устройствах
размер миниатюры в списке Базовый размер миниатюр в представлении «список»

:discourse2: Размещены у нас? Компоненты тем доступны для использования в наших тарифных планах Pro, Business и Enterprise.

92 лайка
MD Topic List component
Theme modifiers: A brief introduction
Thumbnail generation & markdown rendering issue
Image_url is null after update
User Card Directory
Pictures in grid page layout
Thumbnail of topic
Amazing customized community
Blog Post Styling
Topic List Previews (legacy)
Topics list in mobile view: excerpt overflows and count/date wraps
Topic List Previews (legacy)
Using onebox images for topic thumbnails
Is there a plugin to make my forum a shop?
Add icons for Views and Replies, and Last Activity date in Topic Cards
[PAID] Modifying Video Upload theme to display topic thumbnails
How to make tiles like in discourse theme category?
Topic List Previews (TLP)
User Portfolio
Topic List Excerpts
Rounded Borders for images, oneboxes, blockquotes & more
Extend Topic List Thumbnails TC with like button
What are good plugins or theme components for a forum emphasizing pictures?
What is the name of this theme?
Developing a component or plugin similar to topic list thumbnails or topic list previews
Set the image used for social network sharing?
Latest list as grid view
Fakebook Theme
I want to create a Theme/Theme component as shown in the picture below!
Customize topic list entries (sorting, grouping, filtering) for better organization
Enabling a plugin for a specific theme only
New Photography Theme
Topic Cards
How do I fix this display?
Thumbnails are missing for our external embeds when using topic-thumbnails
FKB Pro - Social theme
Improve the Follow Feed
FKB Pro - Social theme
Customizing your site with existing theme components
User Portfolio
Is there a way to select a Default Image for Topic List Theme Component?
Topic List Item Click Animation
Blog-style layout affects Tooltips
Discourse Docs
How to display posts as blocks?
How is the "theme" Category acheived in Meta?
Minima Theme
Can the homepage display images within the Topic feed?
Topic List Previews (TLP)
Topic List Previews (legacy)
Is there a Kanban theme for Discourse?
Discussion grid latest
Topic List Previews (legacy)
Topic List Previews (legacy)
How to display posts in grid?
Displaying Views in Topic view (with no replies)
Topic List Previews (legacy)
Group Topics by Category
CASE STUDY: Why a journal category could be the next big growth opportunity for your forum
Blog Post Styling
Topic Cards
Can discourse be used entirely through the APIs to build a flutter app?
Topic List Author
What Will be Best theme for a site like ecommerce
Topic Cards
FKB Pro - Social theme
FKB Pro - Social theme
Migrated my old custom-built trail-journal/blog to Discourse
Help us test Horizon, our newest theme
Alternative post templates
Creating a Unique Gallery Layout for a Category
Photo Competition or Contest - Do We Have Anything?
Display images on the article's front page
How can I make my forum look like this one?
Sharing link to Facebook does not show image (open graph)
Discourse Docs
The pictures are disappear and some Theme component is ineffective
Graceful Theme
How can I make a Discourse forum as "reddit like" as possible
All links to categories broken?
Add an option to list topics by tagging date
Is there like a Reddit style plugin?
How would I able to list topics as boxes
Best way to implement Excerpts in topic list?
MD Topic List Mobile component
Featured Topics
Add Onebox integration; show thumbnail with topic-thumbnails plugin
Topic List Previews (legacy)
Plugin used in theme
Plugin used in theme
Topic List Previews (legacy)
Created Topic Sort
All latest images in posts from a category
How to create a custom button?
Topic Cards
Filter posts with images (gallery view)
[Question/Request] Featured image url for post
Category "Uncategorized" not displayed for globally pinned topics below title
Is there a 'reddit' style discourse theme / plugin?
Blog Post Styling
Potential way to hide ignored users from topic list?

Wonder where you got the idea for this? :thinking: :smiley:

Absolutely fantastic that core is paying more attention to image delivery and presentation. I like the direction!

(If this doesn’t fully replace Topic List Previews, there is now at least potential to eliminate a lot of bespoke API work from it which I won’t have to maintain anymore, great stuff!)

PS I just tested it and one thing that would be quite nice is if Polls generated a thumbnail so the charts could surface …

37 лайков

This is a great feature. Does this come with Discourse 2.7 as mentioned here? Or is the syntax different?

2 лайка

It’s available in Discourse 2.7 stable, yes. The syntax is the same :slight_smile:

4 лайка

I have a very odd problem that only applies to one member on my site. Some thumbnails do not display, seemingly randomly. It displays the default icon as if there was no image, yet for myself and everyone else the thumbnail displays. I had him look in his console and there is nothing pertinent, nothing in the logs either. I’ve had him try clearing the cache, trying different browsers and devices, and using a different isp. I even had him try a theme with only this component enabled. No matter what he tries this still happens. I even tried impersonating him and then it doesn’t happen for me. Any other thoughts on troubleshooting this? Thanks!

2 лайка

Have him try on mobile with wifi disabled so he’s not going through his home network, but the cellular network. This will eliminate anything on his network from interfering.

But if you have tried “different ISP” then maybe not.

2 лайка

I can’t get this to work anymore, did this revert perhaps?

Also, the feature is not easy to discover for users. Would it be possible to add an option to select the thumbnail to the ‘size selection’ in the preview?

image

5 лайков

Thanks Jeff, he has tried hotspotting to his phone, and at a friends house with a different ISP. I thought it might be a CDN issue so I tried clearing the CDN cache which did not help him. I also tried impersonating him while using a VPN in Atlanta where he is from which did not help either. I’m not sure what else to try.

2 лайка

3 posts were split to a new topic: Caching for tag topic lists?

It’s still working for me. Can you share some more details about what you tried, and what result you’re seeing? This is what I have in my test OP:

![image|690x460](upload://1lGVHoB5KKnftUZoEYVgANxKdWL.jpeg)
![image|612x500|thumbnail](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)

and the second image is correctly selected as the thumbnail.

I agree that would be nice, but I don’t think it would be needed for most sites. I think it would make a great separate theme component.

3 лайка

Ha, that’s embarrassing, of course it does work now… :facepalm:

3 лайка

Hi @david,

I have the following requirement and maybe you can point me to how to achieve this.

Sometimes we have a topic that we want to share via social media and we prepare an image for it that should be used as thumbnail and for the og:image tags, but we don’t want it to be visible inside the topic.

How could we realize something like this e.g. add “hide” to the sizes and then a class is added to the image container that applies “display: none;”?

![image|612x500|hide](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)

3 лайка

Maybe you could use Generic bbcode wrapper for theme components to do something like

[wrap=hidden]
  ![image|612x500|hide](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)
[/wrap]

Then some CSS like

div[data-wrap="hidden"]{
  display: none;
}
10 лайков

Oh, did not know about this one. Neat, thank you!

3 лайка

The alert-info banner overlaps the thumbnails, is this by design or a bug?

3 лайка

It’s somewhat by design. Normally, that bar sits on top of the column headings in the topic list. The alternative would be for the bar to “push down” all the topics when it appears, which would make the entire UI jump down, and could be quite jarring.

I’m not sure why there is a ~1px gap on the right hand side of the bar in your screenshot. That could be an issue with the component, or it could be related to your custom theme CSS.

4 лайка

Is it possible to show the number of likes on the thumbnail cards + make it clickable so images can be liked straight from the gallery view?

4 лайка

list categories is not working on mobile mode even when check Enable thumbnails on mobile devices ?

2 лайка

Hi, it is pretty cool.
Is it possible to use the hotlink figure (from imgur for example) as thumbnail?

2 лайка

hi I just set the blog category to use list categories, but it shows in every categories, have I did some wrong set step?

2 лайка