Alturas de imagem de categoria / Compreensão geral de variáveis do tema

Suporte
1

Olá a todos,

enquanto brincava com algumas modificações de tema, notei este trecho 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));

  }
}

Gostaria de saber qual seria a maneira correta (se houver) de alterar a variável max-height aqui.

2

Não tenho certeza do que você está tentando alcançar, mas se você apenas quiser aumentar ou diminuir o tamanho do logotipo, aqui está algo para começar.

O logotipo da categoria é usado em alguns lugares por padrão — na página de categorias e nas páginas específicas de cada categoria.

Se você quiser modificar os tamanhos do logotipo em ambos os locais, pode usar o seguinte:

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // altere 200 para a altura desejada
  }
}

Após alterar a variável --max-height, a largura deve se ajustar automaticamente.

Se quiser algo mais específico, como alterar os tamanhos do logotipo apenas na página de categorias, verifique a configuração do site desktop_category_page_style no seu site e me informe qual é o valor atual.

Se quiser que a alteração ocorra apenas no desktop, adicione o CSS acima à aba de CSS para desktop do seu tema. Se quiser que ocorra apenas no mobile, adicione à aba de CSS para mobile. Se quiser que ocorra em ambos, mobile e desktop, adicione à aba de CSS comum.

3

Hmm, tentei alterar o --max-height como você sugeriu e, embora essa parte seja atualizada no inspetor, a imagem permanece do mesmo tamanho.

Notei no inspetor que o valor --aspect-ratio não parece estar definido (não há um link clicável no Chrome para o valor) e não consigo descobrir onde ele pode estar definido. Procurei no código do Discourse GitHub, mas ainda não o encontrei.

Alguma ideia de como posso encontrar onde o --aspect-ratio está sendo definido ou qual valor devo definir para ele?

Editar: encontrei o problema, a altura estava sendo definida pelo 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;
}

Então, apenas substituí o max-height no meu tema.

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

Editar #2: sua sugestão funcionou para os ícones de categoria na página da categoria, então obrigado!