Horizonテーマとトピックサムネイルコンポーネント

2つの質問があります…

リストの最初のトピックでは、サムネイルが左側に折りたたまれ/強制され、カテゴリのサイズ/形状が歪んでいるようです。

2つ目は、最初のトピックを超えて、サムネイルの1層が下に、1層がトピックリスト上のコントロールの上に重なっているようです…

「いいね!」 2

ご報告ありがとうございます。デザイナーが確認いたします。

「いいね!」 1

こんにちは!

当社のHorizonテーマは、topic-list-thumbnailコンポーネントとの互換性を想定していません。どちらもトピックカードの構造を非常に異なる方法で変更するため、うまく連携しません。

コンポーネントとの互換性に関する現在のステータスは、こちらで確認できます。

「いいね!」 3

念のため、リンク先のトピックには記載/リストされていません。

これは公式コンポーネントなので、「いつか」サポートされるのか、それとも非推奨になるのか、あるいは…

Gridビューが一部のカテゴリで主要な機能となっている2つのコミュニティ(Discourse.comでホストしています)で使用していることに注意してください。

私の5歳のポッドキャスターコミュニティでは、ポッドキャスターは自分の番組のアートワークを見るのが大好きです…

https://forum.podcaster.community/c/introductions/9

…そして、新しいコミュニティ(まだ構築中ですが)では、シャクヤク(花)に関連して、Gridビューを使ったギャラリーに画像がいっぱい表示されることを想像していました…

「いいね!」 3

それがポイントです。リストされていないので、サポートされていません。

公式コンポーネントとは、基本的なテーマ(foundation)で動作することを保証しますが、意見が分かれるテーマであるHorizonでは、すぐにサポートされることはありません。

このトピックを Contribute > Feature に移動しました。現在サポートされているコンポーネントではないため、バグとは見なしていませんが、このリクエストについての議論はここで続行して問題ありません。

最近、異なるユースケースに対してカテゴリを使用する一般的なパターンについて議論しており、このリクエストが何らかの形でその全体的なストーリーに適合する可能性があると感じています。

この機能を使用するカテゴリの各ユースケースについて、もう少し詳しく教えていただけますか?

「いいね!」 1

トピックの視覚的側面が最重要視されるカテゴリ。トピックの最初の投稿からの画像がテキストと同等以上に重要であり、トピック一覧でサムネイルとして表示されるに値する場所。タイルのようなレイアウト(モバイルでは画像が全幅、デスクトップでは3行程度)が、特定のトピックに深く入り込むことよりも重要視される場合。ポッドキャスターが他の人の番組のカバーアートに、ガーデナーが植物の画像に、といった例が挙げられます。

「いいね!」 3

I’d love to hear more of the details about your particular use cases, e.g. the two you mentioned here:

Can you describe the purpose of the category where people share their cover art a bit more?

How many categories total are there in each of these communities? Out of those categories, which ones use this layout and which ones don’t?

If others express a desire for this feature, I’m interested in capturing those stories as well.

Hearing real world, concrete examples of how people are using the current feature will help us better understand the richer context about what your needs are here.

For example, in these categories, do you require people to include an image in their first post? If so, you have adequate means to enforce that?

「いいね!」 2

https://meta.discourse.org/t/horizon-theme-and-topic-thumbnails-component/386764/5

投稿は拝見しました。ありがとうございます。フォーラムへの直接リンクとスクリーンショットを共有していただき感謝いたします。まずは自分でいくつか調べてみます。

サイトを少し見て、状況をより理解できたと思います。合っているか確認させてください。

  • 5つのメインカテゴリがあり、すべてに画像サムネイルが表示されていますが、グリッドレイアウトを使用しているのは「Introductions」カテゴリのみです。
  • ポッドキャスターのコミュニティとして、紹介トピックの一部としてポッドキャストを紹介する画像を含めるという慣習を確立するのは自然なことでした。そのようにすることで、トピックリスト自体でポッドキャストの内容について「千の言葉」を伝えることができるため、彼らは利益を得ています。

紹介投稿に画像を含めるように促すために、他に何かする必要がありましたか?それとも、皆が「他の人もやっている」のを見るだけで十分でしたか?

「いいね!」 2

コミュニティのエンゲージメントが薄れてきたため、導入での利用は減少しました。現在、コミュニティをPodtalkブランド(https://podtalk.show)に移行するためのリブランディングの最中です。これは、既存のショーとコミュニティが相乗効果を生むための、より良い適合性となります。(それらは相乗効果がありますが、人々には明らかではありません。)その一環として、コミュニティの新規ユーザーオンボーディングを刷新しています…少なくとも、ウェルカムトピックに明確な「自己紹介」のリードを設けること、多くてもそれを提案するDMシーケンスをキュレーションすることです。様子を見ましょう。

「いいね!」 1

私の混乱は、それがページ上の「非互換」セクションにリストされていないため、すべてのテーマコンポーネントがそこにリストされているわけではないので、どのセクションにもリストされていないということを自動的に非互換であると仮定しなかった点だと思います。
image

私たちのコミュニティも、トピックサムネイルコンポーネントから大きな恩恵を受けるでしょう。メンバーと共有するためのデザイン要素が多くあり、それらはコミュニティリソースライブラリの一部であるため、画像を際立たせて表示できることは非常に役立ち、重要です。

これについてCSSを使用して回避策を講じることは可能ですか?

「いいね!」 1

「はい」とお伝えできれば良いのですが、トピックカードはHorizon向けに非常に特化しているため、これ以上カスタマイズすることは実質的に不可能です。

最善の方法は、この機能リクエストにあなたの票を追加することです。票が多くなればなるほど、私たちが(かなりの)労力を費やすための強いシグナルになります。

「いいね!」 3

これが最善の方法かどうかは正直わかりませんし、将来このコードがメンテナンスされ続けることも保証できませんが、興味のある方は、**Horizonでサムネイルを表示するためのこのTCをレビューして利用する**こともできます。

現時点では、私たちのサイトで持続的に動作しています。レビュー、改善、PRなど、何でも大歓迎です。

「いいね!」 2

こんにちは、ご対応ありがとうございます。Horizonテーマにおいて、これがより大きな関心事項になっていないのは不思議に感じます。「高コンテキストトピックカード」には、論理的にはサムネイル(オプション)が含まれるべきだと思います。

コンポーネント自体は私の環境では問題なく動作しており、現時点では以下のメモがあります。

  • 何らかの原因で、有効化した後に投稿の抜粋が消えてしまいます。
  • モバイルでの全幅画像について、確信が持てません。非常に広く、上のトピックに属しているのか下のトピックに属しているのか、場合によってはわかりません。ユーザー名とトピックタイトルの間に小さな角丸長方形、またはその手前に正方形の画像を表示される方が自然ではないかと思います。
  • 個人的には、Horizonテーマではモバイルでも角丸のトピックカードを表示してほしいですが、それは別の話だと思います。
「いいね!」 1

こんにちは、体験談を共有してくださりありがとうございます。いただいた内容を踏まえ、対応できることを検討してみます。

ありがとうございます。

いくつかの良い変更点が見られますね。

モバイル版の固定アスペクト比と、デスクトップ版の固定高さは気に入りました。

記事抜粋が表示されない件についてですが、これは気づいていましたか?それとも私の環境側の問題でしょうか?こちらではタイトルだけが縦中央揃えで表示されています。

モバイルビューについては、簡単な解決策は見当たりません。現状の形であれば、Horizonテーマの特徴である角丸加工や、左側の余白があると画像の見栄えが良くなる気がします。

「いいね!」 1

よかった、前回のアップデートが気に入ってもらえて嬉しいです。自分も満足しています。

投稿抜粋が表示されない件について、よく気づいてくれましたね。私たちのインスタンスでは意図的な仕様でした(そのスペースを埋める別のコンポーネント another component と組み合わせていたのですが)、最終的にアプローチを変更しました。

現在、抜粋はデフォルトで再度有効になっています。また、カードの高さをわずかに低くする新しい compact_last_reply 設定も追加されました。タイトルが中央に浮いていたのは別のグリッドのバグでしたが、こちらも修正済みです。

体験談を共有してくださってありがとうございます。

素晴らしいですね。動作しており、とてもきれいな見た目です。

テキストと「:」記号の間にスペースがない場合、抜粋(エクスcerpt)には絵文字が表示されないことに気づきました。投稿内では正しく表示されています。コンポーネント側のバグなのか、Discourse側の仕様なのかはわかりません。

おそらく、絵文字に対してさまざまな変換を実行し、あなたが説明しているような動作を生成するコア(Core)に関連する問題だと思います。

インスタンスで enable_inline_emoji_translation オプションを有効にしてみてください。