Discourse Spoiler Alert


(Sam Saffron) #1

Location: GitHub - discourse/discourse-spoiler-alert: A plugin for discourse to hide spoilers behind the spoiler-alert jQuery plugin
Created by: @zogstrip

Live Demo

This is a spoiler


[spoiler]This is a spoiler[/spoiler] 

Also works for images.

Spoiler Alert plugin not working
"Hide" shortcode
Help us test the rewritten Composer
(Sebastien Miquerolle) #5

Is it possible to have a css class to manage the color ? because default black on dark forum is not visible.

(Bonecuss) #12

While an image is loading it isn’t blurred - This could be quite a large issue for people with slower internet.

[spoiler]<img src="http://replygif.net/i/1501.gif">[/spoiler]

It works if we use the img src tag


I’ve also noticed that posts displayed on the Chrome desktop notifications ignore the spoiler tags as well. A bit concerning if sensitive information is displayed there.

(Mittineague) #24

Shouldn’t “sensitive information” be not posted at all?


Forgive my language, I mean spoilers. We’ve had a forum member complain that they were spoiled about something in a desktop notification, so it’s a big shame that they’re incompatible.

(Régis Hanol) #26

FYI, I just pushed a fix that will black out spoilers in emails :wink:

(Sam) #28

These spoiler tags don’t appear to work for images that are stored locally - they appear as spoiled at first but are overwritten by the image information box that comes up at the bottom, and then the spoiler tags don’t do anything and it’s just a normal image.

(@SenpaiMass) #29

I too am having the same issue.

(Blake Erickson) #42

Hat-tip {blurred linked text}

I’m not sure if this is a bug or not, but the blurred linked text takes you strait to the linked page rather than un-blurring first. But the link does show up on the bottom of your browser if you hover over it, so you can still tell what your clicking on.

(Jeff Atwood) #43

It’s a bug-ish that has existed forever. It is annoying though, also because it’s kind of crappy on the user’s part to just spoiler a link alone.

(Hugo Roger) #46

You will rarely find someone trying to blur a link. I guess it can be annoying if that’s someone intent haha… It’s something I could live with it though. :slight_smile:

There are many reasons why you would want to use it. If you have never been on a fun discussion forum about movies, games, or anything that has an ending, then look it up. People tend to hide endings and picture.

Also in discussion forums about educational topics where people are studying or in study groups, solutions tend to be hidden to give everyone a chance to work on it and not just openly reveal it. There are many reasons. I listed just a a few.

You know why else? Because IT IS SO VERY FUN! :smiley:

(Taylor) #52

I really love this rendition of the spoiler alert. It’s just about perfect, but there are a few things I would love to see done with this plugin someday, some of which have already been mentioned:

  1. The ability to adjust the blur levels using the plugin settings UI in the admin panel. I feel like with spoiler-tagged images, the blur levels might not be strong enough to keep an image from being spoiled :slight_smile:

  2. Have a spoiler-tagged image only change blur levels when actually hovering over/clicking the image. See the scary image post in this topic as an example. If you hover/click in the whitespace to the right of the image, it behaves as if you were interacting with the image itself.

  3. Figure out a way to prevent navigation to spoiler-tagged links until the spoiler alert has been deactivated.

  4. I saw at least one mention of weird behavior with lightboxed images in this topic. I haven’t tested it yet, but if that is indeed a problem, that would be great to fix. I imagine the fix would be similar to the link issue.

Just some constructive feedback. If I have some free time, I might take a crack at one of these. If I come up with any solutions before you or anyone else, I’ll report back. In the mean time, thank you @sam and the rest of the Discourse team for all you do here!

(Taylor) #54

I’ve been messing around, trying to reproduce the spoiler behavior that’s used by Discourse. The fiddle I link to below is not the most eloquently written piece of code, but I think it demonstrates some interesting considerations that the team might be able to work into the existing plugin to make it better.

I’m not sure this is necessary anymore. What I found is that it helps to have two different blur cases: one for text and one for photos. The text does not seem to need very much to keep it hidden, and it’s easy to have too much. On the other hand, images seem to be better off at a higher blur level.

This should be an easy fix, the div expands to 100% width by default. It looks like adding display: inline-block to the CSS should handle it.

Handled with a special case for links.

I’m pretty sure the solution for the links will also work for lightboxes, but I can’t test that in my little fiddle.

I’m not yet experienced enough with GitHub or Discourse plugin development work to try to implement these changes and submit a pull request, so hopefully someone else that is more experienced can use this to update the current plugin at some point. Anyway, here’s what I came up with, I hope it helps!


(Régis Hanol) #55

It’s never too late to learn :wink:

(Taylor) #56

Oh, I plan to learn. It will just take some time. I’ve also never contributed to an open source project, and to be honest, the thought is a little intimidating. I’ll continue to work toward a greater contribution with this, I just thought I’d share what I’ve come up so far. It’s one of those cases where I’d be more than happy if someone was inspired and beat me to it due to already know the ropes.

(Joshua Rosenfeld) #57

Curious, what makes contributing intimidating? We want anyone who’s interested to be able to contribute, without feeling intimidated.

(Taylor) #58

The main factor is just the amount of responsibility you have as a good contributor (or at least that’s what it feels like to me), and the fact that I hadn’t found this extremely helpful topic until after I posted that. I had seen a few how-to topics on aspects of development, but this should be the comprehensive tutorial I was looking for. Not sure how I missed it!

(Tumi) #59

Is it possible to make that the only registered users can click and see the spoiler ?