Mesmo layout do mockup: banner grande com imagem de fundo específica da categoria e título/descrição sobrepostos.
Carregamento suave (sem piscar/redimensionar), totalmente responsivo.
O fundo deve ser uma imagem exclusiva para cada categoria (não um estilo CSS global).
O que tentei
JavaScript personalizado para injetar a imagem e o texto. Funciona, mas a imagem carrega primeiro e depois redimensiona, causando transições instáveis/mudança de layout.
O componente Category Banner chegou perto, mas não consegui corresponder a este layout exato e aos requisitos de imagem por categoria.
Pergunta
Qual é a abordagem recomendada no Discourse para conseguir isso?
Existem exemplos ou padrões CSS/HTML para reservar espaço (por exemplo, wrapper com proporção fixa/object-fit) e evitar CLS?
Dicas para usar uploads por categoria ou configurações de tema para definir a imagem de fundo de forma limpa.
Demonstração muito precária (e não estou usando cartões de tópico), mas acho que você pode fazer isso facilmente apenas com a imagem de fundo de categoria integrada:
isso coloca a imagem na tag do corpo. Talvez então ajuste o CSS para algo do seu agrado (meu exemplo é de 400px):
`+ alguns ajustes no alinhamento do texto, você terá uma aproximação do que deseja, eu acho? A principal desvantagem é que é realmente em tela cheia, então você o verá se destacando em telas mais largas.
Eu acho que o componente de tema mais próximo que eu já vi do que você está procurando é este:
Você pode dar uma olhada nele para ter algumas ideias, mas parece que você pode precisar criar um componente personalizado. Você pode postar em Marketplace se estiver procurando contratar alguns desenvolvedores para ajudar.
