Hauteurs des images de catégorie / Compréhension générale des variables de thème

Soutien
1

Salut à tous,

en jouant avec quelques modifications de thème, j’ai remarqué ce bout de code 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));

  }
}

Je me demande quelle est la bonne méthode (s’il en existe une) pour modifier la variable max-height ici.

2

Je ne suis pas sûr de ce que vous essayez d’accomplir, mais si vous souhaitez simplement agrandir ou réduire le logo, voici une base pour commencer.

Le logo de catégorie est utilisé par défaut à plusieurs endroits : sur la page des catégories et sur les pages de catégories spécifiques.

Si vous souhaitez modifier la taille du logo dans ces deux emplacements, vous pouvez utiliser le code suivant :

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // remplacez 200 par la hauteur souhaitée
  }
}

Une fois que vous avez modifié la variable --max-height, la largeur devrait s’ajuster automatiquement.

Si vous souhaitez quelque chose de plus spécifique, comme modifier la taille du logo uniquement sur la page des catégories, veuillez vérifier le paramètre du site desktop_category_page_style sur votre site et me dire à quoi il est défini.

Si vous souhaitez que le changement ne s’applique qu’aux écrans de bureau, ajoutez le CSS ci-dessus à l’onglet CSS bureau de votre thème. Si vous souhaitez qu’il ne s’applique qu’aux mobiles, ajoutez-le à l’onglet CSS mobile. Si vous souhaitez qu’il s’applique à la fois sur mobile et sur bureau, ajoutez-le à l’onglet CSS commun.

3

Hmm, j’ai essayé de changer --max-height comme vous l’avez suggéré et, bien que cette partie se mette à jour dans l’inspecteur, l’image reste de la même taille.

J’ai remarqué dans l’inspecteur que la valeur --aspect-ratio ne semble pas être définie (il n’y a pas de lien cliquable dans Chrome vers la valeur) et je n’arrive pas à trouver où elle pourrait être définie. J’ai cherché dans le code de Discourse GitHub mais je ne l’ai toujours pas trouvée.

Avez-vous une idée de comment je peux trouver où --aspect-ratio est défini ou quelle valeur je devrais y mettre ?

Edit : j’ai trouvé le problème, la hauteur était définie par le 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;
}

J’ai donc simplement remplacé le max-height dans mon thème.

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

Edit #2 : votre suggestion a fonctionné pour les icônes de catégorie sur la page de catégorie, donc merci !