Banners de Categoria

[Discourse]

	Resumo	Category Banners usa os detalhes existentes das categorias para criar banners para suas páginas de categoria (para tags, confira Discourse Tag Banners).
	Pré-visualização	Pré-visualizar no Discourse Theme Creator
	Link do Repositório	https://github.com/discourse/discourse-category-banners
	Novo em Discourse Themes?	Guia para iniciantes sobre o uso de Discourse Themes

Instalar este componente de tema

Como este é um componente de tema #oficial mantido pela equipe do Discourse, solicitações de #suporte, bug, ux e #recursos podem ser feitas nas respectivas categorias aqui no Meta, e devem ser marcadas com a tag apropriada do componente de tema. Clique em um link abaixo para iniciar um.

 Suporte  Bug  UX  Recurso

Recursos

Category Banners usa os detalhes existentes das categorias para criar banners para suas páginas de categoria. Ele utiliza o nome da categoria, a descrição e a cor para gerar um banner no topo das páginas relevantes da categoria (para tags, confira Discourse Tag Banners).

A descrição da categoria é definida pelo primeiro parágrafo do tópico “Definição da categoria para …” de cada categoria. As cores de fundo/texto do banner são definidas pelas configurações do emblema da categoria.

Por padrão, isso será exibido em desktop e mobile em todas as páginas de Categoria e Subcategoria, mas não aparecerá se você não tiver fornecido uma descrição para sua categoria.

Configurações

Este componente vem com opções para substituir os padrões:

Nome	Descrição
show description	Mostrar descrição do post “Sobre esta categoria”
show mobile	Mostrar banners em dispositivos móveis
show subcategory	Mostrar banners para subcategorias
hide if no description	Ocultar banners se a descrição da categoria não estiver definida
show category logo	Mostrar logotipo da categoria
align text	Alinhar texto
exceptions	O banner não será exibido para estes NOMES de categoria
categories	Categorias para as quais mostrar um banner
plugin outlet	Altera a posição do banner na página
show category icon	Mostrar ícone ou emoji da categoria nas configurações da categoria *
override category icon color	Quando os ícones da categoria são usados, ativar isso fará com que o ícone corresponda à cor do texto do banner

• Observe que esta configuração agora se refere ao ícone ou emoji da categoria definido nas configurações da categoria, e não ao componente de tema Category Icons (que foi descontinuado em favor do recurso principal).

Notas sobre personalização

Se você deseja personalizá-los com algum CSS adicional, pode direcionar cabeçalhos de categoria específicos usando esta estrutura (exemplo-categoria é o nome da sua categoria):

.category-title-header {
  &.category-banner-exemplo-categoria {
        background: url(exemplo.jpg);
  }
}

Este componente também adiciona a classe category-header à tag body como um alvo CSS adicional.

Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

Not prefixing the category name is a recipe for disaster, so I’ve added category-banner- before the class name (e.g., category-banner-meta). If you were targeting the category name in your CSS you’ll just have to add category-banner- before it.

@jrgong

Is there any way to display emoji’s there?

I’m not sure, I don’t think our default category descriptions support them either, but I can look into it…

[Hang]

I want to use the uploaded background image from the category to put it in the background of the banner. I’ve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!

[Vanecx]

Olá, e obrigado por este componente de tema!

Acabei de tentar instalá-lo, seguindo este tutorial (fiz exatamente os mesmos passos) para testar este componente de Banners de Categoria, mas nada acontece. Nenhum banner em nenhuma das categorias. Há algo que eu possa ter feito que impede que funcione? A única explicação que vejo é que o aviso do “bootstrap” o bloqueia?

[simon]

@Vanecx

Não há banner em nenhuma das categorias. Será que fiz algo que impede que funcione?

Por padrão, o componente do tema não exibe banners de categoria se você não tiver definido uma descrição para a categoria. Isso pode ser alterado desmarcando a caixa de seleção “Ocultar banners se a descrição da categoria não estiver definida”.

As descrições de categoria são definidas editando o tópico “Sobre” que o Discourse cria automaticamente para cada categoria. Se você já adicionou descrições de categoria ou desativou a configuração para ocultar banners em categorias sem descrições e ainda assim não estiver vendo os banners, avise-nos. Vamos investigar o que está acontecendo.

[Vanecx]

Obrigado pela sua resposta. Verifiquei e confirmei que cada categoria no fórum possui uma descrição. A opção “Ocultar banners…” está agora desmarcada apenas para garantir, mas nada mudou.

Como você pode ver nas imagens, tudo parece normal nas configurações:

Não tenho certeza se isso pode ter alguma relação com o problema, mas apenas informo que se trata de uma instalação do Discourse em uma instância do Yunohost.

[downey (Michael Downey)]

Alguém além de mim acha que seria legal aplicar o mesmo estilo nas páginas de listagem de grupos (por exemplo, /g/foo)? O CSS, infelizmente, não é exatamente o mesmo, e acho que exigiria algum tratamento adicional dos vários botões à direita do nome do grupo, ou seja, Solicitar Mensagem Excluir

Isso poderia contribuir muito para uma aparência e sensação consistentes, fazendo com que os grupos pareçam cidadãos de “primeira classe” na interface. (Na minha opinião)

[jord8on (Jordan)]

Adoro esses banners de categoria! Obrigado por criar esse componente do tema!

Gostaria muito que esse banner existisse na página inicial principal dos nossos fóruns, onde mostra:

• Discussões “Mais Recentes” ou
• Discussões “Top” ou
• “Categorias” ou
• “Seguindo” (se você estiver usando o Plugin Seguir )

Haveria uma maneira (mais ou menos) fácil de ter um banner se alguém selecionasse cada uma dessas opções, de acordo com o que foi selecionado?

[Rhidian (Rhidian Bramley)]

@awesomerobot, espero que você não se importe com eu compartilhar isso aqui…

Criei um fork do tema discourse-category-banners chamado

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

Você pode pré-visualizá-lo aqui:

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

Ele faz praticamente a mesma coisa, mas com algumas modificações:

• A caixa de banner da categoria é exibida em linha, acima do cabeçalho principal, em vez de ocupar toda a largura no topo. Isso permite exibir um tema de banner no topo, como o discourse-versatile-banner, por exemplo.

• A caixa de banner da categoria é exibida no mesmo estilo das caixas de subcategoria nativas do Discourse, que são um componente central do sistema. Essas caixas de subcategoria são uma opção de exibição nas configurações de categoria do Discourse: Mostrar lista de subcategorias acima dos tópicos nesta categoria. Essa opção exibe o nome e a descrição da subcategoria como uma linha ou caixa acima da lista de tópicos, usando a cor de fundo da categoria como borda esquerda.

• Se a categoria for uma subcategoria, o nome da categoria é exibido como um breadcrumb da seguinte forma - Nome da categoria pai: Nome da subcategoria

Captura de tela de demonstração da caixa de banner do tema para a categoria, acima das caixas de subcategoria nativas.

Captura de tela da subcategoria, mostrando a referência breadcrumb à categoria pai.

Esta é minha primeira tentativa de modificação de tema. Espero que isso seja útil!

Atualização

Refatorei essa adaptação como um componente separado, com muitos recursos adicionais, incluindo o uso da imagem de logotipo da categoria e da imagem de fundo no cabeçalho. Esse novo componente efetivamente substitui o cabeçalho padrão de categoria do Discourse, ao contrário dos banners de categoria, tornando-se, portanto, um novo componente. Por favor, veja:

Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

Exceções: se você não quiser que uma categoria tenha um banner, adicione o nome dela aqui

Isso não está funcionando para nós. Já tentei tanto o slug da categoria quanto o ID da categoria, mas o banner continua teimosamente lá. Isso está funcionando para mais alguém?

[awesomerobot (Kris)]

Acabei de testar e funciona para mim; ele está procurando pela categoria name com distinção de maiúsculas e minúsculas. Em retrospecto, essa não foi a melhor forma de implementar… Provavelmente consigo melhorar isso.

[nathank (Nathan Kershaw)]

Ah, esse tipo é para mim! E você realmente menciona ‘nome’ no guia acima, eu apenas não li isso.

‘Nome’ não é muito intuitivo, já que não o usamos para nada mais. Mas ele é exibido com frequência. Apenas torná-lo mais explícito nas configurações seria ótimo, eu acho.

[AntiMetaman]

Em vez de adicionar exceções sobre quais categorias não mostrarão um determinado banner enviado, não poderíamos simplesmente especificar qual categoria deve exibir qual banner?

[awesomerobot (Kris)]

Depende do site específico e do caso de uso, com certeza. Minha primeira impressão foi que seria mais provável que um site quisesse que fosse implementado em todos os lugares, e se houvesse exceções, seriam apenas algumas.

Se você quiser implementar um banner para um pequeno número de categorias, pode haver uma opção de componente de tema melhor, projetada para ser menos genérica e abrangente, como Versatile Banner ou personalizando uma das opções encontradas em https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368

[Idan]

Seria ótimo poder fazer o upload de uma imagem para substituir o texto.

[oca]

Obrigado por esse componente muito útil!

Seria possível adicionar um recurso menor?

• Adicionar a classe restricted ao elemento <span.discourse-category-banners> ou <div.category-title-header> quando a categoria não for pública, da mesma forma que ocorre com o distintivo da categoria.

Isso seria útil para ajustar o banner com CSS adicional, mostrando ao usuário que essa categoria é especial.

No momento, é possível, mas complicado selecionar o ícone de cadeado com CSS e fazer algumas alterações. Como o CSS não possui seletor de pai, não consigo usar a presença do ícone de cadeado para verificar se o banner deve ser modificado.

Ainda não sei muito bem como fazer PRs, mas usaria isso como uma boa razão para aprender se você estiver aberto à minha modificação.

[Drew-ART (Drew)]

Isso pode ser feito para funcionar em páginas de tags? Encontrei o plugin tag-banners, mas ele não tem a capacidade de adicionar texto ou links a ele.