Discourse Spoiler-Alert

Plugin
, ,
1
:discourse2: Summary Discourse Spoiler Alert provides the ability to hide content marked with a [spoiler] tag in posts.
:open_book: Install Guide This plugin is bundled with Discourse core. There is no need to install the plugin separately.

Enabling Spoiler Alert

This plugin is default enabled once installed but can be disabled/enabled from its settings, accessed from your admin/plugins page:

enable spoiler

Features

Once enabled it adds a ‘Blur Spoiler’ option to the :gear: menu in the composer’s formatting bar. Simply highlight the text you’d like to blur and select ‘blur spoiler’ and it will wrap the selected text in the necessary [spoiler] tags:

blur spoiler option
blur spoiler option1850×640 24.2 KB

Examples:

Inline:

[spoiler]This is a spoiler[/spoiler]

This is a spoiler

Multiline:

[spoiler]

I wanna be your vacuum cleaner
Breathing in your dust
I wanna be your Ford Cortina
I will never rust
If you like your coffee hot
Let me be your coffee pot
You call the shots
I wanna be yours

https://johncooperclarke.com/poems/i-wanna-be-yours

[/spoiler]

I wanna be your vacuum cleaner
Breathing in your dust
I wanna be your Ford Cortina
I will never rust
If you like your coffee hot
Let me be your coffee pot
You call the shots
I wanna be yours

https://johncooperclarke.com/poems/i-wanna-be-yours

Clicking on the blur will reveal the hidden text, and clicking again will re-blur it.

It also works for images:
(to re-blur an image that is large enough to generate a lightbox, you can click on the adjacent white space or refresh the page)

spoiler image example
spoiler image example895×781 54.1 KB

Settings

Name Description
spoiler enabled Enable the spoiler plugin. If you change this, you must rebake all posts with: “rake posts:rebake”[1]

:discourse2: Hosted by us? This plugin is available on all of our hosting tiers Spoiler Alert | Discourse - Civilized Discussion

  1. :discourse2: If you’re a hosted customer of ours, please contact team@discourse.org if you have any questions about needing to ‘rebake’ due to a setting change ↩︎

Last edited by @tobiaseigen 2025-07-16T20:45:02Z

Check documentPerform check on document:
48 Me gusta
109

Movido al núcleo:

3 Me gusta
110

:information_source: Discourse Spoiler Alert ahora está incluido en el núcleo de Discourse, por lo que este plugin ya no necesitará ser instalado por separado. :partying_face:

Si te auto-alojas, deberías ver información en tu panel sobre cómo eliminarlo de tu app.yml.

:discourse2: ¿Alojado por nosotros? Este cambio no te afectará de ninguna manera. :+1: Puedes seguir disfrutando de este plugin y no preocuparte por nada.

1 me gusta
111

No entiendo por qué este plugin está habilitado por defecto. ¿No es útil solo para foros de películas?

112

Hay muchas más razones para ocultar texto que spoilers de películas. Más que el remate de los chistes.

2 Me gusta
113

¿Es posible agregar una función para mostrar el contenido de spoiler después de hacer clic en ‘me gusta’ en la publicación?

114

Eres más que bienvenido a crear un tema de Feature spoiler-alert :wink:

2 Me gusta
115

:guiño:, ya voy en camino.

116

¿Hay alguna forma de editar el aspecto de la vista previa del spoiler? La implementación actual se ve bien, pero no abstrae lo suficiente en cuanto a lo que está revelando.

Aquí tienes un ejemplo de un hilo que creé, donde los usuarios pueden subir sus capturas de pantalla. Si la captura de pantalla es un spoiler, debe etiquetarse como tal. Como puedes ver, la implementación actual no funciona realmente en el contexto de etiquetar como spoiler capturas de pantalla de momentos críticos en juegos, películas, etc.

Cualquiera que esté familiarizado con el juego que compartí sabría inmediatamente de qué se trata.

Imagen de mi tablero de discourse a continuación.

image
image1650×1450 74.6 KB

¿Hay alguna forma de ajustar esto?

Editar: También me he dado cuenta de que si algún usuario hace clic en el historial de edición de una publicación que contiene spoilers, el historial de edición no etiquetará el contenido como spoiler.

117

¿Cómo piensas hacerlo? ¿Más borroso? ¿De otro color el desenfoque?

1 me gusta
118

Si pudiera, lo haría completamente negro o lo haría más borroso.

119

Aquí está el CSS predeterminado para la parte de desenfoque

.spoiler-blurred img {
  filter: blur(1em);
}

Cambia el 1em por algo más importante

.spoiler-blurred img {
  filter: blur(5em);
}

Y si quieres desenfocar más cuando el cursor está sobre la imagen, añade estas líneas y cambia el 0.5em (con un valor menos importante que el anterior)

.spoiler-blurred {
  .discourse-no-touch & {
    &:hover, &:focus {
      img {
        filter: blur(0.5em);
      }
    }
  }
}
4 Me gusta