皆さん、こんにちは。以下のスクリーンショットのようなカテゴリバナーを作成しようとしています。
目標
- モックアップと同じレイアウト：カテゴリ固有の背景画像と、その上に重ねられた見出し/説明を持つ大きなバナー。
- スムーズな読み込み（ちらつき/リサイズなし）、完全なレスポンシブ対応。
- 背景はカテゴリごとに固有の画像であること（グローバルCSSスタイルではない）。
試したこと
- 画像とテキストを挿入するためのカスタムJavaScript。これは機能しますが、画像が最初に読み込まれてからリサイズされるため、ぎこちない遷移/レイアウトシフトが発生します。
- Category Bannerコンポーネントで近いところまで行きましたが、この正確なレイアウトとカテゴリごとの画像要件を満たすことができませんでした。
質問
- Discourseでこれを実現するための推奨アプローチは何ですか？
- スペースを確保し（例：固定アスペクト比のラッパー/object-fit）、CLSを回避するための例やCSS/HTMLパターンはありますか？
- カテゴリごとのアップロードまたはテーマ設定を使用して、背景画像をきれいに設定するためのヒントはありますか？
よろしくお願いします！
「いいね！」 1
chapoi
2
非常にひどいデモですが（トピックカードは使用していません）、組み込みのカテゴリ背景画像だけで簡単に実現できると思います。
カテゴリ設定でカテゴリの背景を追加するだけで
これにより、画像がbodyタグに配置されます。その後、CSSを好みに合わせて調整します（私の例では400pxです）。
`+ テキスト配置の微調整で、求めているものに近いものが得られると思いますか？主な欠点は、非常にフル幅であるため、より広い画面ではみ出すことです。
完璧ではありませんが、高速です 
`
「いいね！」 1
Lilly
(Lillian Louis)
3
お探しのものに最も近いと思われるテーマコンポーネントは、こちらです。
参考に、こちらを確認してみてください。ただし、カスタムコンポーネントを作成する必要があるかもしれません。開発者の協力を依頼したい場合は、Marketplace に投稿できます。
chapoi
4
はい、そのテーマコンポーネントの方が良いでしょう。以前は知りませんでした。TIL
