トピックリストのサムネイル

:discourse2: 概要 トピックリストのサムネイルを使用すると、トピックリストビューでトピックのサムネイルを表示できます。
:eyeglasses: プレビュー Discourse Theme Creator でプレビュー(ブログスタイル)\u003cbr\u003eDiscourse Theme Creator でプレビュー(グリッド)\u003cbr\u003eDiscourse Theme Creator でプレビュー(リスト)\u003cbr\u003eDiscourse Theme Creator でプレビュー(メーソンリー)\u003cbr\u003eDiscourse Theme Creator でプレビュー(ミニマルグリッド)
:open_book: Discourse テーマは初めてですか? Discourse テーマの使用に関する初心者ガイド

このテーマコンポーネントをインストール

機能

リスト用に最適化された画像が生成され、高解像度ディスプレイ向けに異なる解像度が利用可能になります。画像はスクロール時に遅延読み込みされます(ネイティブブラウザのサポートが利用可能な場合)。

デフォルトでは、Discourse はトピックの OP(最初の投稿)にある最初の画像を使用します。OP から異なる画像を選択したい場合は、|thumbnail をマークダウンに追加してください。例:

![alttext|100x100](upload://aaa)
![alttext|100x100|thumbnail](upload://bbb) \u003c\u003c これがサムネイルになります

5 つのモードがあり、テーマ設定を使用してカテゴリごとまたはタグごとに設定できます。

例:

グリッドモード:

メーソンリーモード:

リストモード:

ヒントとコツ

投稿内の Onebox からサムネイルを生成したい場合は、以下のサイト設定を有効にする必要があります:download_remote_images_to_local。また、関連する投稿を再レンダリング(リベイク)する必要があります。

設定

名前 説明
デフォルトのサムネイルモード デフォルトで使用するサムネイル表示モード
docs サムネイルモード docs プラグインが有効な場合、docs トピックで使用するサムネイル表示モード
ブログスタイルのカテゴリ ブログスタイルのビューを使用するカテゴリ。このスタイルでは、テーマまたはテーマコンポーネントを介して有効化されたトピックの抜粋を使用します
ミニマルグリッドカテゴリ ミニマルグリッドビューを使用するカテゴリ
グリッドカテゴリ グリッドビューを使用するカテゴリ
メーソンリーカテゴリ メーソンリービューを使用するカテゴリ
リストカテゴリ リストビューを使用するカテゴリ
ブログスタイルのタグ
ミニマルグリッドタグ ミニマルグリッドビューを使用するタグ
グリッドタグ グリッドビューを使用するタグ
メーソンリータグ メーソンリービューを使用するタグ
リストタグ リストビューを使用するタグ
推奨トピックモード 推奨トピックで使用するサムネイル表示モード。空白の場合は「トピックリスト外での有効化」設定に従います
トピックリスト外での有効化 トピックリスト以外のページ(ユーザーアクティビティ、個人メッセージ、推奨トピックなど)でサムネイルを有効化
プレースホルダーアイコン サムネイル画像がないトピックに表示するアイコン
モバイルサムネイル モバイルデバイスでサムネイルを有効化
リストサムネイルサイズ 「リスト」ビューでのサムネイルのベースサイズ

\u003cbr\u003e

\u003e: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

これは素晴らしい機能ですね。これはここで言及されている Discourse 2.7 に付属するものですか?それとも構文が異なりますか?

「いいね!」 2

Discourse 2.7 安定版で利用可能です。構文も同じです :slight_smile:

「いいね!」 4

サイト内の特定のメンバーにのみ発生する非常に奇妙な問題があります。サムネイルが不規則に表示されないようです。画像がないかのようにデフォルトのアイコンが表示されますが、自分や他のメンバーには正常に表示されます。該当メンバーにブラウザのコンソールを確認してもらいましたが、関連するエラーはなく、ログにも何も記録されていませんでした。キャッシュのクリア、異なるブラウザや端末での試行、異なるISPの利用、さらにこのコンポーネントのみを有効にしたテーマでの試行も行いましたが、状況は変わりません。私がなりすまして確認しても問題が発生しないため、原因が特定できていません。他にトラブルシューティングのアイデアはありますか?よろしくお願いします!

「いいね!」 2

モバイル端末で Wi-Fi を無効にし、自宅ネットワークではなく携帯電話網を通じて試してもらってください。これで、ネットワーク上の干渉要因を排除できます。

ただし、「別の ISP」を試したのであれば、そうではない可能性もあります。

「いいね!」 2

これがもう機能しなくなりました。もしかして、この機能が元に戻ってしまったのでしょうか?

また、この機能はユーザーにとって発見しにくいものです。「サイズ選択」のプレビューにサムネイルを選択するオプションを追加することは可能でしょうか?

「いいね!」 5

Jeff、ありがとうございます。彼は自分のスマホのホットスポット、そして別のISPを利用している友人の家で試しましたが、解決しませんでした。CDNの問題かもしれないと考え、CDNキャッシュをクリアしてみましたが、効果はありませんでした。また、彼が出身のアトランタからVPNを使って彼になりすましてみることも試みましたが、これも改善しませんでした。他に試せることがわかりません。

「いいね!」 2

3件の投稿が新しいトピックに分割されました:タグトピックリストのキャッシュについて?

私の環境ではまだ動作しています。どのような操作を試されたのか、そしてどのような結果が表示されたのか、もう少し詳しく教えていただけますか?私のテスト用 OP には以下のように記述しています。

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

2 番目の画像が正しくサムネイルとして選択されています。

確かにそれは良いアイデアだと思いますが、ほとんどのサイトでは必要ないのではないかと考えます。これは優れた独立したテーマコンポーネントとして実装するのに適していると思います。

「いいね!」 3

あはは、恥ずかしいですね、もちろん今ではちゃんと動きますね… :facepalm:

「いいね!」 3

@david さん、こんにちは。

以下の要件について、実現方法をご教示いただけないでしょうか。

ソーシャルメディアでトピックを共有する際、そのトピックのサムネイルや og:image タグとして使用する画像を用意することがありますが、トピック内部ではその画像を表示したくない場合があります。

このようなケースをどのように実現できるでしょうか?例えば、サイズに「hide」を追加し、画像コンテナに「display: none;」を適用するクラスを付与する方法などはどうでしょうか。

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

「いいね!」 3

Generic bbcode wrapper for theme components を使って、以下のような処理を行うことができます。

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

そして、以下のような CSS を追加します。

div[data-wrap="hidden"]{
  display: none;
}
「いいね!」 10

ああ、これを知らなかったなんて。素敵ですね、ありがとう!

「いいね!」 3

alert-info バナーがサムネイルと重なっていますが、これは意図されたものですか、それともバグですか?

「いいね!」 3

これはある程度は設計によるものです。通常、そのバーはトピック一覧の列見出しの上に配置されます。バーが表示された際にすべてのトピックを「押し下げる」ようにすると、UI 全体が下に跳ねてしまい、非常に不自然な挙動になる可能性があります。

スクリーンショットのバーの右側に約 1px の隙間がある理由については確信が持てません。これはコンポーネント自体の問題か、カスタムテーマの CSS に起因する可能性があります。

「いいね!」 4

サムネイルカードに「いいね」数を表示し、ギャラリービューから直接画像に「いいね」を押せるようにすることは可能でしょうか?

「いいね!」 4

「モバイルデバイスでサムネイルを有効にする」にチェックを入れていても、モバイルモードでカテゴリ一覧が表示されないのはなぜですか?

「いいね!」 2

こんにちは、とても素敵ですね。
(Imgur などの)ホットリンク画像をサムネイルとして使用することは可能でしょうか?

「いいね!」 2

こんにちは。ブログカテゴリを「カテゴリ一覧」を使用するように設定したのですが、すべてのカテゴリに表示されてしまいます。設定手順で何か間違えたのでしょうか?

「いいね!」 2