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]

Hello, and thank you for this theme component!

I just tried installing it, following this tutorial (did exactly the same steps) to try this Category Banners component, but nothing happens. No banner in any of the categories. Is there anything that I might have done that doesn’t make it work? The only explanation I see is that the “bootstrap” warning blocks it?

[simon]

@Vanecx

No banner in any of the categories. Is there anything that I might have done that doesn’t make it work?

By default, the theme component does not display category banners if you have not set a category description for a category. This can be changed by unchecking the “Hide banners if category description not set” checkbox.

Category descriptions are set by editing the About category topic that Discourse automatically creates for every category. If you have either added category descriptions, or disabled the setting to hide banners for categories without descriptions, and you are still not seeing category banners, let us know. We’ll look into what is going on.

[Vanecx]

Thank you for your answer. I have checked and confirm that each category on the forum has a description. The “Hide banners…” option is now unchecked just to make sure but nothing changes.

As you can see on the images, everything looks normal in the settings :

No idea if it could have anything to do with the issue but just informing you it’s a Discourse installation on a Yunohost instance.

[downey (Michael Downey)]

Is there anyone other than me that thinks it would be nice to enable this same styling on Group listing pages (e.g. /g/foo) as well? The CSS, unfortunately, is not quite the same, and I guess it would require some additional handling of the various buttons to the right side of the group name, i.e., Request Message Delete

It could go a long way for a consistent look and feel, and make groups feel more like a “first class” citizen among the UI. (IMHO)

[jord8on (Jordan)]

I love these category banners! Thank you for making this theme component!

I would love this banner to exist in the main home page of our forums where it shows:

• “Latest” Discussions or
• “Top” Discussions or
• “Categories” or
• “Following” (if you’re using the Follow Plugin )

Would there be an easy (ish) way to have there be a banner if someone selected each of these options, respective to what was selected?

[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.