3

As we can hide by default snippets, can we do the same for other elements?

Default hidden snippet


Initially my question was about hiding by default images. For example this (cute) cat picture is really big, and I would like it to be hidable by default.

enter image description here

In a more general way, I think we could create a feature to hide everything in a block has long it was not being clicked (like the [spoiler] tag in forums).

[spoiler] Whatever you want to hide. [/spoiler]

What do you think about it? What could be the synthax?

8
  • Use a snippet and try to break out of its sandbox to manipulate the DOM of the post to insert an image…?
    – deceze Mod
    Commented Feb 2, 2017 at 13:24
  • Seriously though, you could use a thumbnail and link that to the full-sized image as a workaround.
    – deceze Mod
    Commented Feb 2, 2017 at 13:26
  • @deceze I was wondering if there was something similar to [spoiler] on forums, (a tag in which you can put everything you want that will be hidded as long it has not been clicked). So I guess the answer is no!
    – Mistalis
    Commented Feb 2, 2017 at 13:28
  • Best I can do is this Commented Feb 2, 2017 at 13:31
  • Yeah, I agree, [thumbnail] or so could be useful.
    – deceze Mod
    Commented Feb 2, 2017 at 13:32
  • @deceze Should I change tags to feature-request instead of support?
    – Mistalis
    Commented Feb 2, 2017 at 13:41
  • Seems reasonable, yes.
    – deceze Mod
    Commented Feb 2, 2017 at 13:42
  • 2
    I think allowing this would be asking for a purrfect catastrophe.
    – code11
    Commented Feb 2, 2017 at 15:37

1 Answer 1

1

I'm not a big fan of "hidden" information—it is hard to see. Furthermore, I think it's disorienting when clicking or hovering makes a giant image or block of text appear.

The correct way to do this would be to use a thumbnail, and make that thumbnail link to the full-size image, so it is available if someone wants it.

This is simple to accomplish. When you insert an image, the following Markdown is automatically generated:

[![enter descriptive text][1]][1]

That's the full-sized image, linking to the full-sized image. Sometimes that's appropriate, but in this case, we want a thumbnail. So, change the Markdown to:

[![enter descriptive text][2]][1]

[1] should be the URL of your full-size image, the automatically generated slug at ImgUr. [2] is that same URL, but with an m (or s) appended to the end of that slug. m has ImgUr automatically render a medium-sized thumbnail, while s requests a small-sized thumbnail.

The net effect is simply:

a cat photo (medium thumbnail)

or

a cat photo (small thumbnail)

If absolutely necessary, you could combine this thumbnail with the "spoiler" Markdown, but please use this sparingly. It doesn't really make sense to have "spoilers" on a programming Q&A site.

a cat photo (small thumbnail)

Unfortunately, as you can see, "spoiler" always uses a blockquote-style formatting, and the underline on image links does not disappear. It doesn't look great. This serves as another reminder not to use it without a very good reason.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .