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]

I saw this in my logs today:

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

Everything works, so I’m not sure if this a reference error or warning of some kind. I just thought I would report it.

[P2W (Mike Riddick)]

I tried to implement this but my forum components seem to turn completely transparent and it becomes incredible hard to read the text.

@Johani

[sam (Sam Saffron)]

@P2W

I tried to implement this but my forum components seem to turn completely transparent and it becomes incredible hard to read the text.

This is sadly still broken, @Johani perhaps if we are not supporting this long term we should just delete this topic ? Happy for you to fix it as well, up to you.

[AntiMetaman]

I’m using it on my site and everything seems fine. No problems here. However, I did modify the css a bit. I’ve been using this ever since I got 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!