Arrière-plans StackBlur

[Johani (Joe)]

Ceci ne doit pas être utilisé seul comme thème.

Il s’agit d’un composant de thème conçu uniquement pour gérer l’arrière-plan. Il est destiné à être intégré dans la conception de votre thème.

\u003chr\u003e

\u003e Dépôt : GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component · GitHub

Ce composant utilise la bibliothèque StackBlur de Mario Klingemann (2ko compressés - licence MIT) pour générer des arrière-plans flous offrant de hautes performances de défilement à partir d’une image que vous sélectionnez dans un élément \u003ccanvas\u003e.

Exemples : (\u003csmall\u003eces images sont compressées, elles présentent donc des artefacts ; les arrière-plans réels sont lisses\u003c/small\u003e)

Si j’utilise cette photo :

Alors l’arrière-plan résultant de Discourse ressemblera à ceci :

Et sur mobile :

Plus d’échantillons avec d’autres images :

La qualité de l’image que vous utilisez n’a pas vraiment d’importance car le flou est très tolérant. Je recommande donc des fichiers JPG fortement compressés ne dépassant pas 1080p — tout ce qui compte, ce sont les couleurs.

\u003chr\u003e

Installation

Installez le dépôt comme vous le feriez pour tout autre composant de thème :

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…

Une fois cela fait, suivez ces étapes :

1. Créez un nouveau thème.
2. Donnez-lui le nom que vous souhaitez.
3. Ajoutez ceci dans la section en-tête commun :

\u003ccanvas 
id="background_b" 
data-src='L_URL_DE_VOTRE_IMAGE_ICI'
data-blur="QUANTITE_DE_FLOU" 
\u003e\u003c/canvas\u003e 

4. Remplacez L_URL_DE_VOTRE_IMAGE_ICI par l’URL de votre image.
   (L’image doit être hébergée sur votre domaine ou sur un domaine correctement configuré avec CORS)

5. Remplacez QUANTITE_DE_FLOU par la quantité de flou souhaitée (0 - 180) ; plus la valeur est élevée, plus le flou est important.

6. Ajoutez « StackBlur backgrounds » en tant que composant de thème sous votre thème nouvellement créé.

\u003chr\u003e

Important

Les échantillons de démonstration utilisent le schéma de couleurs « Simple Dark ».

Vous avez peut-être remarqué le léger fond sombre derrière la liste des sujets.

Ce n’est pas une partie du composant de thème.

Ceci est réalisé avec le CSS suivant :

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

De plus, le thème mobile par défaut ajoute un fond de couleur unie à l’élément \u003cbody\u003e, vous devrez donc le supprimer si vous souhaitez que l’arrière-plan flou soit visible sur mobile. Vous pouvez le faire ainsi :

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

J’ai vu cela dans mes journaux aujourd’hui :

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

Tout fonctionne, donc je ne sais pas s’il s’agit d’une erreur de référence ou d’un avertissement quelconque. Je pensais simplement le signaler.

[P2W (Mike Riddick)]

J’ai essayé de l’implémenter, mais mes composants de forum semblent devenir complètement transparents, ce qui rend le texte incroyablement difficile à lire.

@Johani

[sam (Sam Saffron)]

@P2W

J’ai essayé de l’implémenter, mais les composants de mon forum semblent devenir complètement transparents, ce qui rend le texte incroyablement difficile à lire.

C’est malheureusement toujours cassé. @Johani, peut-être que si nous ne soutenons pas cela à long terme, nous devrions simplement supprimer ce sujet ? Je suis ouvert à ce que tu le corriges également, c’est à toi de voir.

[AntiMetaman]

Je l’utilise sur mon site et tout semble aller bien. Aucun problème de mon côté. Cependant, j’ai un peu modifié le CSS. Je l’utilise depuis que j’ai installé Discourse.

[Firsh]

Semble prometteur, mais j’obtiens :
Uncaught ReferenceError : affectation à une variable non déclarée 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;

Je pense que vous vouliez utiliser des virgules au lieu de points-virgules ici.

[HamMan2118]

Le plugin a le tag broken, il ne fonctionnera pas correctement. Juste pour que vous soyez au courant

[Firsh]

Je viens de le remarquer, merci !