Alturas de imágenes de categoría / Comprensión general de las variables del tema

Soporte
1

¡Hola a todos,

mientras experimentaba con algunas modificaciones del tema, noté este fragmento de código 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));

  }
}

Me pregunto cuál sería la forma adecuada (si es que existe alguna) de modificar la variable max-height aquí.

2

No estoy seguro de qué estás intentando lograr, pero si solo quieres hacer el logotipo más grande o más pequeño, aquí tienes algo para empezar.

El logotipo de la categoría se utiliza por defecto en varios lugares: en la página de categorías y en las páginas de categorías específicas.

Si deseas modificar el tamaño del logotipo en ambos lugares, puedes usar esto:

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // cambia 200 por la altura deseada
  }
}

Una vez que cambies la variable --max-height, el ancho se ajustará automáticamente.

Si buscas algo más específico, como cambiar el tamaño del logotipo solo en la página de categorías, revisa la configuración del sitio desktop_category_page_style en tu sitio y dime a qué valor está configurada.

Si quieres que el cambio solo ocurra en escritorio, agrega el CSS anterior a la pestaña de CSS de escritorio de tu tema. Si quieres que solo ocurra en dispositivos móviles, agrégalo a la pestaña de CSS móvil. Si deseas que ocurra tanto en móviles como en escritorio, agrégalo a la pestaña de CSS común.

3

Hmm, he intentado cambiar --max-height como sugeriste y, aunque esa parte se actualiza en el inspector, la imagen sigue siendo del mismo tamaño.

He notado en el inspector que el valor de --aspect-ratio no parece estar configurado (no hay un enlace en Chrome que se pueda hacer clic en el valor) y no puedo averiguar dónde podría estar configurado. He buscado en el código de Discourse GitHub pero todavía no lo encuentro.

¿Alguna idea de cómo puedo encontrar dónde se está configurando --aspect-ratio o qué valor debería establecer para él?

Editar: encontré el problema, la altura estaba siendo establecida por el 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;
}

Así que simplemente anulé max-height en mi tema.

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

Editar #2: tu sugerencia funcionó para los iconos de categoría en la página de categoría, ¡así que gracias!