Fondos de StackBlur

[Johani (Joe)]

Isso não deve ser usado como um tema por si só.

Este é um componente de tema destinado apenas a gerenciar o plano de fundo. Ele deve ser incorporado ao design do seu tema.

\u003chr\u003e

\u003e Repositório: GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component · GitHub

Este componente utiliza a biblioteca StackBlur de Mario Klingemann (2kb comprimida com gzip - licença MIT) para gerar fundos desfocados com alto desempenho de rolagem com base em uma imagem selecionada em um elemento \u003ccanvas\u003e.

Exemplos: (\u003csmall\u003eestes estão comprimidos, então apresentam artefatos — os fundos são suaves\u003c/small\u003e)

Se eu usar esta foto:

Então o fundo resultante do Discourse ficará assim:

E no mobile:

Mais amostras com outras imagens:

A qualidade da imagem que você usa não importa muito, pois o desfoque é muito permissivo. Por isso, recomendo JPGs altamente comprimidos com resolução máxima de 1080p — tudo o que você precisa são as cores.

\u003chr\u003e

Instalação

Instale o repositório como faria com qualquer outro componente de tema:

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

Após concluído, siga estes passos:

1- Crie um novo tema
2- Dê a ele o nome que desejar
3- Adicione o seguinte na seção cabeçalho comum:

\u003ccanvas 
id="background_b" 
data-src='BACKGROUND_URL_GOES_HERE'
data-blur="BLUR_AMOUNT" 
\u003e\u003c/canvas\u003e 

4- Substitua BACKGROUND_URL_GOES_HERE pela URL da sua imagem
(Deve estar hospedada no seu domínio ou em um domínio com CORS configurado corretamente)

5- Altere BLUR_AMOUNT para a quantidade desejada de desfoque (0 - 180); quanto maior, mais desfoque.

6- Adicione o “StackBlur backgrounds” como um componente de tema sob o tema recém-criado.

\u003chr\u003e

Importante

As amostras de demonstração usam o esquema de cores “Simple Dark”.

Você pode ter notado o leve fundo escuro atrás da lista de tópicos.

Isso não faz parte do componente de tema

Isso é alcançado com o seguinte CSS:

#main-outlet {
    background: rgba(0, 0, 0, .5);
    padding-left: 2em;
    padding-right: 2em;
}

Além disso, o tema mobile padrão adiciona um fundo de cor sólida ao elemento \u003cbody\u003e, então você precisará removê-lo se quiser que o fundo desfocado apareça em dispositivos móveis. Você pode fazer isso da seguinte forma:

.mobile-view {
	body {
		background: none;
	}
}

\u003chr\u003e

[LlamaSensei]

I’m using 1920x1080 image & no matter what theme I try using with this component, the image is being stretched. The blur appears to be working fine. Any thoughts on what could cause this?

[codinghorror (Jeff Atwood)]

Wouldn’t it be easier and faster to simply generate the blurred image and use that as the background? Why have the source JPG at all, plus an extra dependency…?

I guess if you are changing the background dynamically, that’s all I can think of?

[AntiMetaman]

Vi isso nos meus logs hoje:

StackBlurBackground@https://forum.duelistsunite.org/theme-javascripts/7cca6d0005bbe0e73e1acff07a8802eb7ec3a2e3.js?__ws=forum.duelistsunite.org:29:22

start@https://forum.duelistsunite.org/theme-javascripts/7cca6d0005bbe0e73e1acff07a8802eb7ec3a2e3.js?__ws=forum.duelistsunite.org:24:32

Tudo funciona, então não tenho certeza se é um erro de referência ou algum tipo de aviso. Apenas achei que deveria reportar.

[P2W (Mike Riddick)]

Tentei implementar isso, mas os componentes do meu fórum parecem ficar completamente transparentes, tornando o texto incrivelmente difícil de ler.

@Johani

[sam (Sam Saffron)]

@P2W

Tentei implementar isso, mas os componentes do meu fórum parecem ficar completamente transparentes e fica incrivelmente difícil ler o texto.

Isso, infelizmente, ainda está quebrado. @Johani, talvez, se não for dar suporte a isso a longo prazo, devêssemos apenas excluir este tópico? Fico feliz se você quiser corrigir também, fica a seu critério.

[AntiMetaman]

Estou usando no meu site e tudo parece estar bem. Nenhum problema por aqui. No entanto, fiz algumas modificações no CSS. Tenho usado isso desde que comecei a usar o Discourse.

[Firsh]

Parece promissor, mas recebo:
Uncaught ReferenceError: atribuição a uma variável não declarada img

          var blur = $(\"#background_b\").data(\"blur\");
          img = new Image();
          c = document.getElementById(\"background_b\");
          ctx = c.getContext(\"2d\");
          w = window.innerWidth;
          h = window.innerHeight;

Acho que você quis dizer para usar vírgulas em vez de ponto e vírgula aqui.

[HamMan2118]

O plugin tem a tag broken, ele não funcionará corretamente. Só para você saber

[Firsh]

Acabei de notar, obrigado!