Fondos de StackBlur

Personalización Componente temático
1

:warning: Esto no está diseñado para usarse como un tema por sí solo.

Este es un componente de tema que está destinado a manejar únicamente el fondo. Está diseñado para ser incorporado en el diseño de tu tema.

Repo: GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component · GitHub

Este componente utiliza la biblioteca StackBlur de Mario Klingemann (2kb comprimida con gzip - licencia MIT) para generar fondos desenfocados con alto rendimiento de desplazamiento basados en una imagen que seleccionas en un elemento <canvas>.

Ejemplos: (estas imágenes están comprimidas, por lo que presentan artefactos; los fondos son suaves)

Si uso esta foto:

beach-background-7
beach-background-71920×1200 356 KB

Entonces el fondo resultante de Discourse se vería así:

Discourse blurred background
Discourse blurred background2879×1620 702 KB

Y en dispositivos móviles:

Discourse blurred background mobile
Discourse blurred background mobile450×892 109 KB

Más muestras con otras imágenes:

Discourse blurred background
Discourse blurred background2887×1629 688 KB

Discourse blurred background
Discourse blurred background2893×1636 670 KB

La calidad de la imagen que utilices no importa realmente, ya que el desenfoque es muy indulgente, por lo que recomiendo usar JPGs altamente comprimidos de no más de 1080p; lo único que necesitas son los colores.

Instalación

Instala el repositorio como lo harías con cualquier otro componente de tema:

Una vez hecho eso, sigue estos pasos:

  1. Crea un nuevo tema.
  2. Nómbralo como quieras.
  3. Agrega lo siguiente en la sección encabezado común:
<canvas 
id="background_b" 
data-src='BACKGROUND_URL_GOES_HERE'
data-blur="BLUR_AMOUNT" 
></canvas>

  1. Cambia BACKGROUND_URL_GOES_HERE por la URL de tu imagen.
    (Debe estar alojada en tu dominio o en un dominio con CORS configurado correctamente)

  2. Cambia BLUR_AMOUNT por la cantidad de desenfoque deseada (0 - 180); un valor más alto significa más desenfoque.

  3. Agrega StackBlur backgrounds como un componente de tema bajo tu tema recién creado.

:warning: Importante

Las muestras de demostración utilizan el esquema de color “Simple Dark”.

Es posible que hayas notado el ligero fondo oscuro detrás de la lista de temas.

Esto no es parte del componente del tema

Esto se logra con el siguiente CSS:

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

Además, el tema móvil predeterminado agrega un fondo de color sólido al elemento <body>, por lo que necesitarás eliminarlo si deseas que el fondo desenfocado se muestre en dispositivos móviles. Puedes hacerlo de la siguiente manera:

.mobile-view {
	body {
		background: none;
	}
}
27 Me gusta
Change background image on all pages
Hosting image on own domain or on a domain with CORS
Uncaught ReferenceError: img is not defined due to broken old theme
3

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?

4

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?

7 Me gusta
6

Hoy vi esto en mis registros:
image

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

Todo funciona, así que no estoy seguro de si se trata de un error de referencia o de alguna advertencia. Solo pensé en reportarlo.

7

Intenté implementar esto, pero los componentes de mi foro parecen volverse completamente transparentes y se vuelve increíblemente difícil leer el texto.

@Johani

8

Lamentablemente, esto sigue roto. @Johani, quizás, si no vamos a dar soporte a esto a largo plazo, deberíamos simplemente eliminar este tema. Estoy bien si lo arreglas tú también, depende de ti.

2 Me gusta
9

Lo estoy usando en mi sitio y todo parece estar bien. No tengo problemas aquí. Sin embargo, modifiqué un poco el CSS. Lo he estado usando desde que obtuve Discourse.

1 me gusta
10

Parece prometedor, pero obtengo:
Uncaught ReferenceError: assignment to undeclared variable 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;

Creo que querías usar comas en lugar de punto y coma aquí.

11

El plugin tiene la etiqueta broken, no funcionará correctamente. Solo para que lo sepas :slight_smile:

1 me gusta
12

¡Me acabo de dar cuenta, gracias!

1 me gusta