Support NeoGAF

hesido · Jul 1, 2015

Update: Thanks to Timan, you no longer need to do anything on your part. NeoGAF now natively supports hiding of images inside spoiler tags! That was really fast, only a few tongue in cheek comment and then bam!

Some people opting for media blackouts for certain games voiced their requests for having images in spoiler tags. On NeoGAF, that doesn't work, but there's a temporary work-around until our overlords decide to implement it on the forum.

Install a user css extension like Stylish (for chrome), if your browser doesn't natively support it.

Define a user style sheet for NeoGAF, and add the following in it:

span.spoiler img {
visibility: hidden;
}

span.spoiler:active img, span.spoiler.show img{
visibility: visible;
}

Here's an example:
Oh, look at the pixelated graphics

lol.

And here's how it looks when you have the user style:

More elegant methods can be used by the NeoGAF webmaster team. This is just a quick hack that doesn't modify the html and just styles existing elements.

You can make the spoiler area as big as the image if you have:

span.spoiler {
display: inline-block;
}

instead of display: inline, but tags become like paragraphs if there's too much text, not much of a problem for me actually.

You can have a variety of styles for displaying spoilers by modifying the CSS:

EightBitNate · Jul 1, 2015

Or you could just scroll really fast

FZZ · Jul 1, 2015

EightBitNate said:
Or you could just scroll really fast

^

Brannon · Jul 1, 2015

EightBitNate said:
Or you could just scroll really fast

Get a mouse with a flywheel toggle!

Timan · Jul 1, 2015

Actually thought we had this, hmmmmmmmmmm

Edit: Added it, seems to work ok, doesn't account for the height of the image, and not sure if I can add inline-block to the span. Will have to do some more testing on posts that use spoilers in different cases.

YoungFa · Jul 1, 2015

That was fast.

Orbis Tabula · Jul 1, 2015

Wow. Bravo haha

BreezyLimbo · Jul 1, 2015

Timan said:
Actually thought we had this, hmmmmmmmmmm

Edit: Added it, seems to work ok, doesn't account for the height of the image, and not sure if I can add inline-block to the span. Will have to do some more testing on posts that use spoilers in different cases.

Hmmm.

Edit-It works!

zeemumu · Jul 1, 2015

ugly · Jul 1, 2015

span.spoiler img {
visibility: hidden;
}

span.spoiler:active img, span.spoiler.show img{
visibility: visible;
}

Nailed it

xxracerxx · Jul 1, 2015

I like the Question Mark when hovering over the spoiler bar.

Fireblend · Jul 1, 2015

Timan said:
Actually thought we had this, hmmmmmmmmmm

Edit: Added it, seems to work ok, doesn't account for the height of the image, and not sure if I can add inline-block to the span. Will have to do some more testing on posts that use spoilers in different cases.

Glorious.

hesido · Jul 1, 2015

EightBitNate said:
Or you could just scroll really fast

FZZpure said:
^

Brannon said:
Get a mouse with a flywheel toggle!

Thread was going in directions I never imagined, until...

Timan said:
Actually thought we had this, hmmmmmmmmmm

Edit: Added it, seems to work ok, doesn't account for the height of the image, and not sure if I can add inline-block to the span. Will have to do some more testing on posts that use spoilers in different cases.

Oh, that's superb. Inline-block makes the spoiler span act differently for multi-line spoiler tags, that's why I didn't add that, but adding it causes the image to be nicely fit inside the spoiler tag indeed. But it does change the behaviour of multi-line spoilers and cause them to act like a separate box, chaging the layout based on the size of the div for existing posts, which could break some of them visually.

Ran rp · Jul 1, 2015

holy shit

hesido · Jul 1, 2015

PSY・S;170606698 said:
holy shit

Thanks MrSkeltal.

zer0blivion · Jul 1, 2015

Timan said:
Actually thought we had this, hmmmmmmmmmm

Edit: Added it, seems to work ok, doesn't account for the height of the image, and not sure if I can add inline-block to the span. Will have to do some more testing on posts that use spoilers in different cases.

Could you add a way to ignore users on the mobile version of the site? Maybe an ignore user link on the user profile page? Also, it'd be nice to see "Posts by user" in addition to "Threads by user" on the same profile page.
Edit: On topic, the spoiler tagged images don't work on the mobile version of the site.

Toa TAK · Jul 1, 2015

hesido · Jul 1, 2015

Now we can have jump scares in our posts. Bannable?

Sai-kun · Jul 1, 2015

PSY・S;170606698 said:
holy shit

thank mr skeltal

santi_yo · Jul 1, 2015

Question mark mouse pointer is best mouse pointer.

Hypemaster · Jul 1, 2015

Gaf posting evolved.

Charles Foster Kane · Jul 1, 2015

fuck mr skeltal

Heebie Jeebies · Jul 1, 2015

This is great. NeoGAF has entered into a new age.

alr1ght · Jul 1, 2015

Kewl. Any way to make it not select it (thus turning it blue) when expanding?

Santiako · Jul 1, 2015

That was a really fast implementation. Cool.

Sectorseven · Jul 1, 2015

When I click on hidden images it highlights them blue, as if I were highlighting text.

Ran rp · Jul 1, 2015

hesido said:
Now we can have jump scares in our posts. Bannable?

Lunar15 · Jul 1, 2015

This is going to lead to so many "I don't know what I expected" posts. I love it.

hesido · Jul 1, 2015

santi_yo said:
Question mark mouse pointer is best mouse pointer.

Yeah, is that new? That looks nice, don't remember it from an hour ago!

nubbe · Jul 1, 2015

nm, seems to be working in edge

terrisus · Jul 1, 2015

Timan said:
Actually thought we had this, hmmmmmmmmmm

Edit: Added it

Well, that was unexpectedly awesome.

Can we get "Show Posts" search results on mobile too?

Alienous · Jul 1, 2015

A New Gaming Age Begins

Revolutionary · Jul 1, 2015

Awesome!

alr1ght said:
Kewl. Any way to make it not select it (thus turning it blue) when expanding?

Click to expand, click outside of picture to unhighlight.

Akai__ · Jul 1, 2015

That's pretty neat. However, when I click on the spolier tags and the picture shows up, it's highlighted in blue, like the same blue when you highlight stuff with your mous? Is this only the case for me?

alr1ght · Jul 1, 2015

hesido said:
Yeah, is that new? That looks nice, don't remember it from an hour ago!

Yeah it's new. Would be cool to have a separate one for image spoilers and one for text spoilers.

Timan · Jul 1, 2015

Nope thats it, don't go abusing it either that causes more and more stuff to be removed. It was more of a bug imo than an enhancement. I was pretty positive we had that in place already.

BumRush · Jul 1, 2015

Dude, wow. Very nice.

Vulcano's assistant · Jul 1, 2015

This is a game changer for those "post your favorite final shot of a film / TV show /game" threads that come so often.

KHlover · Jul 1, 2015

Akai__ said:
That's pretty neat. However, when I click on the spolier tags and the picture shows up, it's highlighted in blue, like the same blue when you highlight stuff with your mous? Is this only the case for me?

That's because technically you do. Just klick anywhere else on the screen to get rid of the tint

hesido · Jul 1, 2015

Timan said:
Actually thought we had this, hmmmmmmmmmm

Edit: Added it, seems to work ok, doesn't account for the height of the image, and not sure if I can add inline-block to the span. Will have to do some more testing on posts that use spoilers in different cases.

Timan, me again,

Could you please add:
span.spoiler:active img also, if you like?
Currently image doesn't show until you release the left mouse button, without that css selector applied.. Thanks! :=) (Also, this fixes the problem where sometimes the javascript may glitch or not load and the only way to see the spoiler is to hold the left mouse button.. This would save it in cases where the javascript doesn't work or kick in for some reason)

Deleted member 231381 · Jul 1, 2015

alr1ght said:
Kewl. Any way to make it not select it (thus turning it blue) when expanding?

this plx

Toa TAK · Jul 1, 2015

Spoiler threads will never be the same again.

xxracerxx · Jul 1, 2015

Toa TAK said:
Spoiler threads will never be the same again.

It shall be glorious!

epmode · Jul 1, 2015

Sectorseven said:
When I click on hidden images it highlights them blue, as if I were highlighting text.

This happens to me too. I have to click away from the image after expanding it to get the colors to display properly. Windows 8.1, Firefox 38.0.5

massoluk · Jul 1, 2015

July 1, 2015.

The Day GAF changed forever.

terrisus · Jul 1, 2015

No, but seriously...

(Final Fantasy 7 Spoiler!)

BahamutPT · Jul 1, 2015

Not working for mobile btw, so be careful while browsing on the go!

MikeHattsu · Jul 1, 2015

Hm... Doesn't seem to work in mobile Chrome or Opera here. Works if I disable mobile site though.

terrisus · Jul 1, 2015

MikeHattsu said:
Hm... Doesn't seem to work in mobile Chrome or Opera here. Works if I disable mobile site though.

Working in regular Desktop Opera (12.17) here.
Haven't tried it on Mobile Opera, but for what that's worth at least.

hesido · Jul 1, 2015

MikeHattsu said:
Hm... Doesn't seem to work in mobile Chrome or Opera here. Works if I disable mobile site though.

I'm guessing they'd need to add it separately to the mobile style sheets but deploying things like this always have the possibility to screw things up on big operations, no matter how trivial it may seem.

Support NeoGAF

How to add the ability to "Hide images in spoiler tag for NeoGAF"

Member

Member

Banned

Member

Developer

Member

Member

Banned

Member

Member

Don't worry, I'll vouch for them.

Banned

Member

Member

Member

Member

Banned

Member

Banned

Member

Member

Rosebud

Banned

bish gets all the credit :)

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

bish gets all the credit :)

Developer

Member

Banned

Banned

Member

Deleted member 231381

Unconfirmed Member

Banned

Don't worry, I'll vouch for them.

Member

Banned

Member

Member

Member

Member

Member

Similar threads