Discourse Spoiler-Alert

: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:

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)

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 curtidas

Movido para o core:

3 curtidas

:information_source: O Discourse Spoiler Alert agora está incluído no core do Discourse, portanto, este plugin não precisará mais ser instalado separadamente. :partying_face:

Se você auto-hospeda, verá algumas informações no seu painel sobre como removê-lo do seu app.yml.

\u003e:discourse2: Hospedado por nós? Esta alteração não afetará você de forma alguma. :+1: Você pode continuar aproveitando este plugin e não se preocupar com nada.

1 curtida

Não entendo por que este plugin está habilitado por padrão. Ele só é útil para fóruns de filmes?

Existem muitas razões para ocultar texto do que spoilers de filmes. Mais do que as piadas de piadas.

2 curtidas

É possível adicionar um recurso para mostrar o conteúdo do spoiler após clicar em ‘curtir’ na postagem?

Você é mais do que bem-vindo para criar um tópico de Feature spoiler-alert :wink:

2 curtidas

:wink:, estou a caminho.

Existe alguma maneira de editar a aparência da prévia do spoiler? A implementação atual é boa, mas não abstrai o suficiente quanto ao que está sendo revelado.

Aqui está um exemplo de um tópico que criei, onde os usuários podem fazer upload de suas capturas de tela. Se a captura de tela for um spoiler, ela precisa ser marcada como tal. Como você pode ver, a implementação atual não funciona realmente no contexto de marcar capturas de tela de momentos críticos em jogos, filmes, etc., como spoilers.

Qualquer pessoa familiarizada com o jogo que compartilhei saberia imediatamente do que se trata.

Imagem do meu quadro de discussão abaixo.

Existe alguma maneira de ajustar isso?

Editar: Também cheguei ao conhecimento que, se algum usuário clicar no histórico de edição de uma postagem que contém spoilers, o histórico de edição não marcará o conteúdo como spoiler.

O que você está planejando para torná-lo? Mais borrado? Uma cor diferente do desfoque?

1 curtida

Se eu pudesse, eu o deixaria completamente preto ou o deixaria mais borrado.

Aqui está o CSS padrão para a parte de desfoque

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

Altere o 1em para algo mais importante

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

E se você quiser desfocar mais quando o cursor estiver sobre a imagem, adicione estas linhas e altere o 0.5em (com um valor menos importante que o anterior)

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