カテゴリ画像の高さ／テーマ変数の一般的な理解

サポート
1

こんにちは、皆さん。

テーマの修正を試している際に、この SCSS コードの断片に気づきました。

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 150px;
    max-height: var(--max-height);
    max-width: 60%;
    height: auto;
    width: calc(var(--max-height) * var(--aspect-ratio));

  }
}

ここで max-height 変数を適切に変更する方法（もしあれば）が気になります。

「いいね！」 1
2

何を達成しようとしているのかはわかりませんが、ロゴを大きくしたり小さくしたりするだけであれば、以下で始められます。

カテゴリロゴはデフォルトでいくつかの場所で使用されています。カテゴリページと特定のカテゴリページです。

これらの両方の場所でロゴサイズを変更したい場合は、以下のコードを使用してください。

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // 200 を希望の高さに変更してください
  }
}

--max-height 変数を変更すると、幅は自動的に調整されます。

カテゴリページのみなど、より具体的な変更を行いたい場合は、サイトの desktop_category_page_style サイト設定を確認し、現在の値を教えてください。

変更をデスクトップでのみ適用したい場合は、上記の CSS をテーマのデスクトップ CSS タブに追加してください。モバイルでのみ適用したい場合は、モバイル CSS タブに追加してください。モバイルとデスクトップの両方で適用したい場合は、共通 CSS タブに追加してください。

「いいね！」 5
3

うーん、ご提案いただいた --max-height を変更しようとしましたが、インスペクターではその部分が更新されても、画像のサイズは変わりませんでした。

インスペクターで --aspect-ratio の値が設定されていないように見える（Chrome で値へのクリック可能なリンクがない）ことに気づき、どこで設定されているのかを見つけられませんでした。Discourse の GitHub コードを検索しましたが、まだ見つかりません。

--aspect-ratio が設定されている場所を見つけるか、どのような値を設定すべきか、何かアイデアはありますか？

編集：問題を見つけました。高さは Discourse Category Headers theme component によって設定されていました。

.category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img {
    float: left;
    margin: 0 0.5em 0.25em 0;
    max-height: 150px;
}

そのため、テーマで max-height をオーバーライドしました。

category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img  {
	max-height: 80px;
}

編集 #2：あなたの提案は、カテゴリ ページでのカテゴリ アイコンに対して機能しましたので、ありがとうございました！

「いいね！」 3