ブログ投稿スタイル テーマコンポーネントは、Discourse のトピックを従来のブログ投稿レイアウトに変換します。カテゴリに適用すると、各トピックの最初の画像がタイトルの上に全幅のヒーロー画像として表示され、コンテンツはブログに適したタイポグラフィとメタデータ表示でスタイルされます。
このテーマコンポーネントに関連する各種設定は以下の通りです：
ブログカテゴリ: 選択したカテゴリに属するトピックには、ブログ投稿スタイルが適用されます。
ブログタグ: 1 つ以上のタグを選択すると、そのタグがトピックに適用された際にブログ投稿スタイルが適用されます。
画像サイズ: 特徴的なヒーロー画像がヘッダー領域をどのように埋めるかを決定します：
画像なし: 特徴的な画像を非表示にします。全幅（デフォルト）: 画像がコンテンツ領域全体に広がります。中央揃え: 画像はアスペクト比を維持し、コンテンツ領域の中央に表示されます。
画像位置: タイトルに対する画像の表示位置を決定します：
タイトルの上（デフォルト）: 画像をトピックタイトルの上に表示します。タイトルの下: 画像をトピックタイトルの下に表示します。このオプションを選択すると、タイトルと画像の間に要約を表示することもできます。以下では、画像位置 設定を タイトルの上 および タイトルの下 に設定した場合の画像の表示例を示します：
ドロップキャップ有効: 有効にすると、ブログ投稿の最初の文字が拡大されたスタイルで表示されます：モバイル有効: 有効にすると、モバイルデバイスでトピックを読む際にブログ投稿スタイルが適用されます。
ブログカテゴリを設定（またはブログ投稿タグを適用）した後、ブログ投稿トピックの動作についていくつかの特別な点に注意してください。
ヒーロー画像として使用したい画像を投稿の最初の行 に配置し、コンテンツが始まる前に空行を1行入れてください：
ここに投稿コンテンツが始まります...
コンポーネントは、画像位置 設定（上記参照）に基づいてこの画像を自動的に配置します。画像の前に他のコンテンツ（空行を含む）が表示されている場合、その画像はヒーロー位置に昇格しません。
投稿を初めて公開した後、画像が指定された位置に表示されるようにするには、ページをリフレッシュ してください。（これは、最初の公開時に投稿者本人にのみ影響します。メンバーが投稿にアクセスする場合は、すぐに正しい位置に画像が表示されます。）
画像コンテナのサイズは**高さ440px、幅100%**です。画像サイズ 設定を 全幅 に設定した場合の最適な結果を得るためには：
アップロード前に画像を1100x400px に使用または切り取るか、
重要な詳細が切り取られないよう、中央に主題がある画像や特定のコンテンツがない画像（風景、模様など）を選択します。
画像位置 設定を タイトルの下 に設定した場合、ブログ投稿にオプションの要約を追加できます。これにより、タイトルと特徴的な画像の間に要約が表示されます。
これを行うには、要約として表示させたいコンテンツを以下のように囲みます：
[summary] ここに要約として表示されるコンテンツを入力します。 [/summary]
ブログカテゴリでトピックを作成する際、引用には特別なスタイルが適用されます。コンポーザーで > 記号を使用するか、“ コンポーザーツールバーボタンを使用して引用を作成できます。
ブログカテゴリの設定では、トピック読了後に最初の投稿に移動 というカテゴリ設定を有効にすることをお勧めします。これにより、リピーターが最後に読んだ位置ではなく、ブログ投稿のコンテンツに直接移動できます。
このコンポーネントは、トピックリストサムネイル と互換性があります。これにより、トピックリストでブログ投稿の特徴的な画像が強調表示されます：
注意: トピックリストサムネイルコンポーネントは、Horizon テーマとは互換性がありません。上記のスクリーンショットは Foundation テーマを使用しています。
「いいね！」 105
amotl
2019 年 7 月 2 日午前 2:30
54
amotl:
After bumping the defined sizes manually just slightly in the markup , the headline-image-expansion feature works flawlessly – [at least with] images [that] are actually large enough (> 690px wide).
We just have been able to verify that by bumping the original markup materialized after upload by just injecting a zoom level of 101% at the appropriate place like
after the respective image had been uploaded beforehand as
This is cute and makes us happy.
Hardwareentwicklung / hardware development
Hardware bazaar
Description The JeeLink is a fully assembled and ready-to-use USB-type “stick” which plugs directly into a PC, Mac or USB hub. It contains Atmel’s ATmega328p AVR microprocessor, HopeRF’s RFM69CW wireless radio module and a branded FT232R USB...
「いいね！」 3
こんにちは、このツールを作成し、無料で公開してくださり、時間を割いていただき本当にありがとうございます。
もし可能であれば、特定の「カテゴリ」の代わりに特定の「タグ」を使って何かを変更することはできるでしょうか？
最近、新しい Discourse サイトを立ち上げましたが、多くの「ブログ記事」を投稿しています。ただ、これらが他の適切なカテゴリにも表示され、より統合されたように見えるようにしたいと考えています。
現在、私は「blog-posts」という独自のカテゴリに投稿しており、そこには自分だけが投稿できるように制限しています。しかし、最近、スタッフのみがアクセスできるタググループを設定しました。
改めてありがとうございます！
「いいね！」 3
Howaids
2020 年 3 月 17 日午前 7:00
70
@tshenry さん、どうもありがとうございます。テーマのコンポーネントはすべて完璧でした。また、@sam さん、@codinghorror さん、素晴らしいアプリを共有してくださり、ありがとうございます！メタでのサポートを含め、あなたの寛大さは心から感じられます。Discourse は、確かに未来のより思いやりのあるインターネットのために作られています。
「いいね！」 6
LoganRTW
2020 年 3 月 29 日午前 11:09
81
動画を代表コンテンツとして使用することは可能でしょうか？画像ではなく、YouTube や Vimeo などの動画をトップコンテンツとして表示できれば、WordPress サイトを削除しても構いません。何かアイデアはありますか？
「いいね！」 6
Howaids
2020 年 3 月 29 日午後 12:56
82
その通り！素晴らしい提案ですね、@LoganRTW さん。@tshenry さんも賛成です。実現可能でしょうか？
「いいね！」 4
tshenry
2020 年 6 月 2 日午後 9:21
86
信じられないかもしれませんが
コンポーネントのリファクタリングと整理を開始し、プラグインスタイルのファイル構造を採用するとともに、新しいトピックのサムネイルを活用できるようにしました。
master ← davidtaylorhq:post_image_refactor
merged 08:07AM - 05 May 20 UTC
This PR introduces new APIs for obtaining optimized thumbnails for topics. There… are a few building blocks required for this:
- Introduces new `image_upload_id` columns on the `posts` and `topics` table. This replaces the old `image_url` column, which means that thumbnails are now restricted to uploads. Hotlinked thumbnails are no longer possible. In normal use (with pull_hotlinked_images enabled), this has no noticeable impact
- A migration attempts to match existing urls to upload records. If a match cannot be found then the posts will be queued for rebake
- Optimized thumbnails are generated during post_process_cooked. If thumbnails are missing when serializing a topic list, then a sidekiq job is queued
- Topic lists and topics now include a `thumbnails` key, which includes all the available images:
```
"thumbnails": [
{
"max_width": null,
"max_height": null,
"url": "//example.com/original-image.png",
"width": 1380,
"height": 1840
},
{
"max_width": 1024,
"max_height": 1024,
"url": "//example.com/optimized-image.png",
"width": 768,
"height": 1024
}
]
```
- Themes can request additional thumbnail sizes by using a modifier in their `about.json` file:
```
"modifiers": {
"topic_thumbnail_sizes": [
[200, 200],
[800, 800]
],
...
```
Remember that these are generated asynchronously, so your theme should include logic to fallback to other available thumbnails if your requested size has not yet been generated
- Two new raw plugin outlets are introduced, to improve the customisability of the topic list. `topic-list-before-columns` and `topic-list-before-link`
さらに、いくつかの新機能を追加しました：
新しい設定
image_display_style - この設定には 2 つのオプションがあります。デフォルトは、これまでコンポーネントが備えていた動作を維持します。もう一方のオプションは、画像の切り抜きを行わず、画像全体を表示するようにします。どちらが「優れている」かは一概に言えないため、ご自身のワークフローやブログの画像に合わせて実際に試していただき、最適な方を選んでください。
mobile_enabled - これはモバイル向けのブログ投稿スタイルの第一弾です。バグ報告や改善案など、ぜひご意見をお聞かせください！
引き続きコードのリファクタリングと整理を進めていきたいと考えていますが、まずはこれで良いスタートが切れたと思います。
committed 09:21PM - 02 Jun 20 UTC
現時点ではそのような予定はありません、申し訳ありません！
「いいね！」 16
torstensson
2020 年 6 月 21 日午後 4:57
92
とてもインスピレーションに富み、素晴らしいコンポーネントをありがとうございます @tshenry
私の評価では、以下の 2 つの問題が確認されました。
サブカテゴリにブログ画像が表示されない - さまざまなテーマでのトラブルシューティングや、プラグインおよび他のコンポーネントの有効化/無効化をかなり詳細に行いましたが、サブカテゴリではブログ画像がレンダリングされないことはほぼ確実です。ただし、最初の画像（意図されたブログ画像）は依然として非表示のままです。
DiscoTOC との整合性で最初の画像が非表示にならない - ブログ投稿のスタイル設定を DiscoTOC と併用すると、ブログ画像はタイトルの上に正しくレンダリングされます。しかし、元の位置でも引き続きレンダリングされるため、画像が二度表示されてしまいます。
「いいね！」 4
tshenry
2020 年 6 月 22 日午後 11:24
93
@torstensson さん、フィードバックをどうもありがとうございます！ご指摘の 2 つの点は確かにバグであり、現在は修正されています：
https://github.com/tshenry/discourse-blog-post-styling/commit/f56389897998face967dc2f8a0b5555faa0b52a5
引き続き問題が発生する場合は、お知らせください。
このコンポーネントを利用している皆様へ：
このコンポーネントは、すべてのブログ投稿トピックの上部に画像を表示することを目的として作成されました。そのため、投稿の最初の行に画像を含めなければ、注目の画像を表示しないブログ投稿を作成することも可能でした。しかし、この動作は変更されました。
新しい実装はパフォーマンスを大幅に向上させますが、投稿の内容自体を確認するのではなく、事前に定義された値を使用します。この事前定義された値は、投稿内で最初に見つかった 画像から生成されます。以前とは異なり、必ずしも投稿の最初の行に表示される画像に限定されません。つまり、最初の行に画像がない投稿を作成した場合でも、投稿の下部に単一の画像を含めていれば、その下部の画像がトピックの上部にも表示されるようになります。
「注目の画像」をオン/オフできるすべてまたはなしの設定を追加しました。これにより、ご好みに応じて、注目の画像を除いたすべてのスタイルを適用することが可能です。
新しい考慮事項と推奨事項をすべて OP（最初の投稿）に更新する予定ですが、要約すると、投稿の最初の行に画像を含めるようにしてください（この配置は、画像が重複しないようにするために引き続き使用されます）。画像が提供されていない場合にデフォルトとして使用できるよう、カテゴリのトピックテンプレートにプレースホルダー画像を使用すると役立つかもしれません。
「いいね！」 6
torstensson
2020 年 6 月 23 日午前 4:36
94
「いいね！」 3
core
2020 年 6 月 23 日午後 1:17
95
最近発表された機能は、このテーマコンポーネントの代替として機能する可能性があります。興味のある方のためにここに残しておきます。
「いいね！」 2
nityeshaga
2020 年 9 月 1 日午前 9:55
102
@tshenry このコンポーネントを本当にありがとうございます！トピック一覧のプレビュー プラグインと併用して、Dataquest コミュニティ向けの学生用記事セクション を作成しています。
今後のバージョンアップで検討いただきたい機能リクエストがあります。記事に 正規化 URL (Canonical URLs) を追加する機能を追加していただけますでしょうか？
検索エンジンは正規化リンクを使用して、コンテンツの最終的なソースを特定し優先順位を付けます。同じドキュメントが異なる場所に複数存在する場合の混乱を解消するために役立ちます。
ありがとうございます！
「いいね！」 3
sebastianh
2020 年 10 月 27 日午後 3:57
103
とても優れたコンポーネントだと思います。実際にライブの Discourse で試してみています。特に順序は気にせず、最初の感想とフィードバックをお伝えします。参考になれば幸いです。いくつかは質問に近い内容もあるかもしれませんが、お許しください。
著者の表示方法が少し場違いに感じられます。タイトルやカテゴリタグなどとより密接に関連させ、スペース効率を改善できるかもしれません。また、著者情報の行と本文の開始部の間に、かなり余白が多すぎます。
ブログ記事に直接アクセスした訪問者には、自分がどこにいるのか分かりにくいです。明確なパンくずリストや類似の要素がないためです。主な理由は、タイトルバーが無効化されているように見える点です。通常のトピックではタイトルやカテゴリなどを含めて変形しますが、ここではそうなりません。
カテゴリビューをブログ風の見た目（小さなプレビュー画像など）に変更できると素晴らしいですが、それは難しいでしょうか？
カテゴリビューにカテゴリの説明が表示されていないようですが、どうなっていますか？
「いいね！」 2
sebastianh
2020 年 10 月 27 日午後 3:58
104
わあ、そのカテゴリ表示に使われているテーマコンポーネントは何ですか？かっこいいですね。
「いいね！」 2
tshenry
2020 年 10 月 27 日午後 9:52
105
フィードバックをありがとうございます
sebastianh:
著者の表示方法が少し浮いており、タイトルやカテゴリタグなどにより密接に結びつけながら、よりスペース効率よく解決できるかもしれません…また、著者情報の行の終わりから本文の始まりまでの間に、かなり多くの余白があります
著者やタイトルの周りに余白が多いという点には同意します。次回このコンポーネントを作業する際にこのフィードバックを踏まえ、何か改善策がないか検討してみます。
ここでのご指摘の意図を完全に理解しきれていません。画像とブログタイトルの下をスクロールすると、ヘッダーがタイトルやパンくずリストを含むように切り替わるようになっています。ただ、おっしゃる通り、ページの最上部ではそれが特に明確ではない点はご指摘の通りです。これも頭に入れておきます。
sebastianh:
カテゴリビューを、小さなプレビュー画像などが表示されるブログ風の見た目に変更できると素晴らしいのですが、それは難しいでしょうか？
カテゴリビューにカテゴリの説明が表示されていないようですが？
これらは本コンポーネントの範囲外となります。カテゴリビューについては、こちらを参照してみてください: Topic List Thumbnails
「いいね！」 2
sebastianh
2020 年 10 月 28 日午前 7:54
106
フィードバックをありがとうございます
「いいね！」 3
画像がブログ記事のヘッダーに「移動」された後に残る余白が、上部の余分なスペースの原因ではないかと考えています。これにより下部にスペースが増えるのではなく、単に空いた状態になっているのです。
しかし、実際の問題に気づきました。そのようなブログ記事へのリンクを他のトピックに投稿すると、サムネイルが表示されません。こちらをご覧ください
「いいね！」 1
sebastianh
2020 年 11 月 14 日午前 11:17
108
以下は私が意図していることを示すスクリーンショットです：
「いいね！」 2
tshenry
2020 年 11 月 21 日午前 12:18
109
画像アップロードリンクと最初の段落の間に改行を省略したことが原因だと、私はかなり確信しています。以下の形式に合わせて編集してみてください。
<b>while</b> 世界中には投稿やブログ、共有、ツイートなどを行うのに十分なスペースがありますが、スパゲッティ・ウェスタンについて皆さんとアイデアを交換する私の一番のお気に入りは、このフォーラムです。何人かの方は数年前に行われた取り組みを覚えているかもしれません。それは「Planet Spaghetti Western」と呼ばれており、インターネット上のあらゆるスパゲッティ・ウェスタン関連のブログから投稿を自動的に集約し、ダイジェスト形式で提示するというブログを作るというアイデアでした。技術的にはかなり複雑で、結局のところそれに見合う価値がなかったため、私はそれを停止せざるを得ませんでした。
これでうまくいけば、OP（最初の投稿）にその要件について追記します。
「いいね！」 3
sebastianh
2020 年 11 月 21 日午前 9:23
110
こんにちは。確かに、それによりマージンが少し縮まりますね、ありがとうございます。エディターでは全く逆の操作をしていました：画像とテキストの開始部分の間のスペースを最小限に留めることでした。
「いいね！」 1
現在、すべてのブログ投稿のトップに「注目の画像」を含めていない場合は、このお知らせをご覧ください！
両方の問題がアップデートで解決したことを喜んでお伝えできます 
また、機能的だけでなくインスピレーションとしても本当に素晴らしいコンポーネントを提供してくださり、心から感謝申し上げます 
私たちはこれを 
