Sfondi StackBlur

[Johani (Joe)]

Questo non è destinato a essere utilizzato come tema autonomo.

Si tratta di un componente di tema destinato a gestire esclusivamente lo sfondo. Deve essere integrato nel design del tuo tema.

\u003chr\u003e

\u003e Repository: GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component · GitHub

Questo componente utilizza la libreria StackBlur di Mario Klingemann (2kb compressa con gzip - licenza MIT) per generare sfondi sfocati con elevate prestazioni di scorrimento basati su un’immagine selezionata in un elemento \u003ccanvas\u003e.

Esempi: (\u003csmall\u003equesti sono compressi, quindi presentano artefatti; gli sfondi sono invece uniformi\u003c/small\u003e)

Se uso questa foto:

lo sfondo risultante di Discourse apparirà così:

E su mobile:

Altri campioni con altre immagini:

La qualità dell’immagine utilizzata non è determinante, poiché la sfocatura è molto permissiva; pertanto, consiglio di utilizzare JPEG altamente compressi di dimensioni non superiori a 1080p: ciò che serve sono solo i colori.

\u003chr\u003e

Installazione

Installa la repository come faresti con qualsiasi altro componente di 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…

Una volta completata l’installazione, segui questi passaggi:

1. Crea un nuovo tema
2. Dagli il nome che preferisci
3. Aggiungi quanto segue nella sezione header comune:

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

4. Sostituisci BACKGROUND_URL_GOES_HERE con l’URL della tua immagine
   (Deve essere ospitato sul tuo dominio o su un dominio con la configurazione corretta di CORS)

5. Imposta BLUR_AMOUNT sulla quantità di sfocatura desiderata (0 - 180): valori più alti indicano una sfocatura maggiore.

6. Aggiungi “StackBlur backgrounds” come componente di tema sotto il tema appena creato.

\u003chr\u003e

Importante

I campioni dimostrativi utilizzano lo schema di colori “Simple Dark”.

Potresti aver notato il leggero sfondo scuro dietro l’elenco degli argomenti.

Questo non fa parte del componente di tema

È ottenuto con il seguente CSS:

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

Inoltre, il tema mobile predefinito aggiunge uno sfondo a tinta unita all’elemento \u003cbody\u003e; pertanto, se desideri che lo sfondo sfocato sia visibile sui dispositivi mobili, dovrai rimuoverlo. Puoi farlo nel seguente modo:

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

Oggi ho visto questo nei miei log:

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

Tutto funziona, quindi non sono sicuro che si tratti di un errore di riferimento o di un avviso di qualche tipo. Ho pensato solo di segnalarlo.

[P2W (Mike Riddick)]

Ho provato a implementare questo, ma i componenti del mio forum sembrano diventare completamente trasparenti e diventa incredibilmente difficile leggere il testo.

@Johani

[sam (Sam Saffron)]

@P2W

Ho provato a implementarlo, ma i componenti del mio forum sembrano diventare completamente trasparenti e diventa incredibilmente difficile leggere il testo.

Purtroppo questo è ancora rotto, @Johani. Forse, se non stiamo supportando questa funzionalità a lungo termine, dovremmo semplicemente eliminare questo argomento? Sono felice se vuoi correggerlo anche tu, sta a te.

[AntiMetaman]

Lo sto usando sul mio sito e sembra tutto a posto. Nessun problema qui. Tuttavia, ho modificato un po’ il CSS. Lo uso da quando ho installato Discourse.

[Firsh]

Sembra promettente, ma ottengo:
ReferenceError non rilevato: assegnazione a una variabile non dichiarata 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;

Penso che intendessi usare le virgole invece dei punti e virgola qui.

[HamMan2118]

Il plugin ha il tag broken, non funzionerà correttamente. Giusto per tua informazione

[Firsh]

Ho appena notato, grazie!