26

Sometimes I write answers where I use lots of images of similar things. An example is this post: what the flutes look like is relevant to understanding the question, so I wanted to include lots of images of the flutes from different angles.

However, the images were big and took up lots of space, so I decided to only use two. It's not the end of the world, but the answer would have been more interesting if I could have included five or six images of the flutes from different sources.

Another possible use case includes posts on sites where users are likely to quote panels from comics and graphic novels (like Literature and SFF); those images can eat up a lot of vertical space.

Could Stack Exchange add some sort of gallery feature, so that multiple images could be displayed in a slideshow/gallery? It could look something like this, and could use this syntax:

blah blah text

![this is a single image](http://example.com/)

Now here's a gallery/slideshow:

!![this image would be included in a slideshow](http://example.com/)
!![so would this image](http://example.com/)

I don't think this is a trivial feature request: images are engaging content and help visual learners understand things. Here's a quote from a Stack Exchange employee on the importance of images:

now i'm wondering about whether we should be adding photos to mike's answer – Tea Drinker♦ Dec 8 '11 at 22:43

@TeaDrinker the answer to the second is a hearty YES -- we encourage pictures over on DIY for good reason. :D – Aarthi (SE employee at the time of the comment)

Notes:

  • Actually, I don't really care whether it's a slideshow or a gallery, I just want to be able to display multiple images in a better format.
  • It could be tied to reputation: i.e. you would need 1K rep to make a slideshow/gallery. That would go a long way towards limiting abuse.
  • I'm envisioning a way to display a grid of images resized so they display nicely next to each other.
  • 7
    That's a great idea. – nicael Jun 22 '15 at 16:13
  • How about a slideshow instead? Too complex? – Anthony Pham Jun 22 '15 at 16:23
  • 2
    Um, slideshow? No. Better just gallery. – nicael Jun 22 '15 at 16:50
  • 4
    @nicael actually, I don't really care whether it's a slideshow or a gallery, I just want to be able to display multiple images in a better format – user160606 Jun 22 '15 at 17:04
  • What I usually do in such cases is manually lay out more than one image into a larger one (simply using MS Paint), so that they at least appear rather concise and compact than just a list of some huge images. Like here or here, those are all manually precomposed. But sure, something like a simple gallery would also be a nice feature (if not overused at least). – Christian Rau Jun 22 '15 at 17:08
  • 2
    But in the end I'd already be satisfied with being able to just say "put these next to each other and shrink if necessary" or "show this as half the page size". – Christian Rau Jun 22 '15 at 17:09
  • @ChristianRau it could be tied to reputation: i.e. you wound need 1K rep to make a slideshow/gallery. That would go a long way towards limiting abuse. – user160606 Jun 22 '15 at 18:01
  • 2
    I'm not sure what you mean by gallery, but it'd certainly vote for a collage feature - right now I'm scaling images in GIMP and assembling them with convert, which, needless to say, can be done better. – Gallifreyan May 2 '17 at 18:08
  • 2
    @Gallifreyan I think we're talking about the same thing: I'm envisioning a way to display a grid of images resized so they display nicely next to eachother. – user160606 May 2 '17 at 18:10
  • Sounds like a good stackapp idea hmmm -strokes fake beard- but yeah I agree this would be a good feature request. – aug May 2 '17 at 18:36
  • 1
    @Gallifreyan There's tons of online tools to do this already with a smooth workflow, there's really no need for SE to implement yet another collage maker just so that collages can be built with an SE URL in the address bar instead of something else. I like befunky.com/create/collage myself. As for the slideshow requests, no thanks, if for no other reason than I really don't feel like having to click through multiple images while reviewing posts to look for inappropriate content, plus other reasons. – Jason C May 2 '17 at 23:52
14
+100

Your request is indeed not a trivial feature request (as in your question). However while waiting for it to get implemented, you may want to take advantage of some image related facilities that are available already on any SE site, which can already address this part of your question pretty well:

However, the images were big and took up lots of space

Read on for more details, and some demo samples about these facilities ...

An example to get started

Just in case you don't realize yet what you can do with techniques available today already, have a look at what is below:


Babou, aka 'My Patou' ... always available whenever it's "Time for a walk!" ...  Springtime in my garden ... as of Apr 14, 2017 ... ready for the bees to arrive.  In memoriam: Diesel ... #JeSuisParis  Make no mistake ...

If you want Rules for D8, then checkout and/or support #d8rules   Summer will be over soon, start planning now ...  PlaceToBe for Drupal module recommendations Facing DevOps challenges with Drupal? There is an SE-site for it!


Sorry if the above makes you think about comic books (as in the current bounty message ...). Also sorry for the quality of these images (I'm not an expert on producing images, can you tell?).

If you wonder "How did you do that", then just use the edit link below this answer (to browse the source of the markup I used, preferably followed by cancel when you're done). And if what's below is still not sufficient, just use this link (and ping me to let me know you did).

Available techniques

There seem to be 3 techniques that can be used to adapt the size of the image (which you only uploaded once), i.e. by:

  • Using filename variations.
  • Using a query string.
  • Using an img HTML tag.

These techniques should help to NOT have to do "a lot of work (e.g. resizing) to include images." (as in your bounty message).

What follows is a demo of some variations of both techniques I discovered (rather by accident, and mostly by eyeballing and experimenting). This demo re-uses (= without uploading ANY additional images to write the rest of this answer) one of the images you included in the post you linked to (using exactly the same markup as your post), and which looks like so (without any of my techniques applied):

Drawings of Aztec flutes.

Technique 1 - Using filename variations

For every image, say ABC.png, you can also use variations of it (thumbnails) like ABCx.png, whereas x = t, m, l or h, as further explained below. Or with special cases using x = s or b.

Example 1 - Tiny thumbnail

This is how the tiny version of your image looks:

Drawings of Aztec flutes.

The difference with your example is that I changed the name of the image from 4yOFP.png to 4yOFPt.png. I.e I just added a t right before .png.

Actually I only learned about this t example via the comments to this answer (I used s in a prior revision). So credits to Laurel (see comments below this answer).

Example 2 - Medium thumbnail

This is how the medium version of your image looks:

Drawings of Aztec flutes.

The difference with your example is that I changed the name of the image from 4yOFP.png to 4yOFPm.png. I.e I just added an m right before .png.

Example 3 - Large thumbnail

This is how the large version of your image looks:

Drawings of Aztec flutes.

The difference with your example is that I changed the name of the image from 4yOFP.png to 4yOFPl.png. I.e I just added an l (the charter "el") right before .png.

Example 4 - Huge thumbnail

This is how the huge version of your image looks:

Drawings of Aztec flutes.

The difference with your example is that I changed the name of the image from 4yOFP.png to 4yOFPh.png. I.e I just added a h right before .png.

Example 5 - Square thumbnails

Another variation is to use a "square" (small or big) instead of a something like a t, as in these examples:

  • using an s:

    enter image description here

  • using a b:

    enter image description here

However by using these square variations, the legend (with the 5cm) at the bottom is not shown (cropped), and the top of the images is also cropped (credits: Jason C, see comments below this answer).

Technique 2 - Using a query string

Yet another set of variations (as compared to your example) can be achieved by adding a query string ?s=xyz (with xyz = 128, 256 or 512) after the name of the image to change it from 4yOFP.png to (eg) 4yOFPl.png?s=128. I.e I just added the query string ?s=128 right after .png.

Attention: in the first 3 examples below, the legend (with the 5cm) is not shown (no idea why ...).

Example 1 - Using ?s=128

Drawings of Aztec flutes.

Example 2 - Using ?s=256

Drawings of Aztec flutes.

Example 3 - Using ?s=512

Drawings of Aztec flutes.

Example 4 - Using query strings with xyz = 16, 32, 64, 128

Some more options for using a query string for your image are xyz = 16, 32, 64, 128. Using those values seem to also work also, eg as for one of my own images here, watch:

enter image description here (?s=16)    enter image description here (?s=32)    enter image description here (?s=64)    enter image description here (?s=128)   

Btw, the above also shows that you can even insert some text in between 2 images, though such text seems to have these limitations (at least I have no idea yet how to get around those):

  • cannot have text that spans more then a single line.
  • the vertical alignment of the text is always at the bottom of the image.
  • the spacing between the image and text can only be set using  .

Technique 3 - Using an img HTML tag

If you respect some specific HTML formatting syntax, you can also use the img HTML tag. E.g. to create these 3 variations (sizes) of an image:

DrupalCon Vienna DrupalCon Vienna DrupalCon Vienna

Here is the HTML source that created the previous 3 images:

<img src="https://i.stack.imgur.com/m9Hj9.png" width="216" height="180" alt="DrupalCon Vienna" title="See you in Vienna!">
<img src="https://i.stack.imgur.com/m9Hj9.png" width="270" height="225" alt="DrupalCon Vienna" title="See you in Vienna!">
<img src="https://i.stack.imgur.com/m9Hj9.png" width="135" height="113" alt="DrupalCon Vienna" title="See you in Vienna!">

Just for fun

The above explains what is possible using either of these:

enter image description here Using filename variations.

enter image description here Using a query string.

But did you notice you could even use a kind of custom bullet images like I did here just now? Admitted, their size should be further reduced to something like 50% of it. Though using a query string like ?s=16 is the lowest value I've been able to get to work so far (try it out for yourself to see what happens if you try ?s=8 ...).

| improve this answer | |
  • 1
    This is so awesome on so many levels. Adding to this there are a number of tools to make workflow easier; for example there are a number of online tools for making collages, and then small workflow improvements that you can take advantage of such as Chrome's ability to drag recently downloaded files and the uploader's ability to accept dropped files. Also I think a lot of people don't realize this but if you've got an image on your clipboard you can actually paste it directly into the SE uploader dialog, no need for intermediate file/URL. – Jason C May 3 '17 at 19:13
  • 1
    Also services like snag.gy (no affiliation, I just use that a lot) provide smooth online workflow for pasting images / screenshots from the clipboard and cropping or drawing on them. So in addition to the image sizing / formatting options in this answer, there are also ways to make various image manipulations convenient if you combine online tools and clipboard magic, thus improving the experience overall. – Jason C May 3 '17 at 19:15
  • Merci for the nice/interesting comments @JasonC ! Didn't know about that clipboard-hint (will try that soon ...). – Pierre.Vriens May 3 '17 at 19:24
  • 1
    Btw, the technique 1 suffixes are documented at the bottom of this page. For technique 2, this appears specific to stack.imgur.com and not an imgur general feature; the reason the legend doesn't display is because the algorithm is different from the thumb suffixes; it takes the smallest dimension of the image, scales it to the specified size then crops it to a square (note the top is cropped too, not just the legend). The s=16 and such do actually work for that image, maybe you tried it on a non-stack imgur link? – Jason C May 3 '17 at 19:40
  • Merci again @JasonC ... Why not rework your interesting comments in another answer, something like "to further improve my answer"? If you do, +1 from me for sure ... – Pierre.Vriens May 3 '17 at 19:46
  • 1
    Important: s WILL cut things off... it's more like square. Use t for tiny instead as this prevents things from being cut off. – Laurel May 3 '17 at 21:37
  • @Laurel : merci beaucoup for this tiny-tip. I just did a quick test, and yes indeed, just changing that 's' to 't' works exactly as you said. Tomorrow I'll refine my answer to integrate your interesting tip. While doing so, I'm going to see what happens which each letter between a to z that I have not mentioned yet ... – Pierre.Vriens May 3 '17 at 21:55
  • 1
    Just completed integrating parts of the previous comments from Jason C and Laurel (merci beaucoup!). – Pierre.Vriens May 4 '17 at 19:14
9

I'm for the idea to have a gallery feature. Currently it's possible only on the sites with Stack Snippets enabled, so as we can make a gallery there, on MSE (or on SO, PPCG, etc... where, eh, do we have these snippets enabled?).

But obviously MSE doesn't need galleries in particular, so there's just a simple example.

$(document).ready(function(){var images=["http://i.imgur.com/yQuEaZT.png","http://i.stack.imgur.com/awUUN.jpg","http://i.stack.imgur.com/Zm85C.png","http://i.stack.imgur.com/dGpW0.gif"];var index=0;$("#images").css({'backgroundSize': 'contain','backgroundPosition':'center','backgroundRepeat':'no-repeat','backgroundImage':'url('+images[index]+')'});$("#prev,#next").hide();$("#images,#images>img").hover(function(){$("#prev,#next").show(100);}).mouseout(function(){if($("#controls:hover,#images>img:hover").length==0){$("#prev,#next").delay(500).hide(100);}});$("#prev").click(function(){index-=1;if(index<0){index=images.length-1;}$("#images").css('backgroundImage', 'url('+images[index]+')');});$("#next").click(function(){index+=1;if(index==images.length){index=0;}$("#images").css('backgroundImage', 'url('+images[index]+')');});})
#prev,#next{display:inline-block;text-decoration:none;color:grey;font-size:40px;width:50px;height:50px;border:1px solid grey;border-radius:26px;text-align:center;position:absolute;top:45%;}#prev{left:20px; }#next{right:20px; }#images{display:block;position:absolute;top:10px;bottom:10px;right:10px;left:10px;border:1px solid black;border-radius:10px;text-align:center;}#images > img{width:60%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="images"></div><div id="controls">  <a href="#" id="prev">&lt;</a>  <a href="#" id="next">&gt;</a></div>

Credits for the first image go to ᔕᖺᘎᕊ :)

| improve this answer | |
3

This is a good idea.

But it can be overused and abused by new users, spammers, and people just seeking with revenge. So thus comes the need of adding this as a privilege. 1k rep seems a little high so 10 rep at any site (the minimum requirement for posting images) should be enough. Why? Because users can simply post multiple images if they can't use the gallery. As in the comments:

Why does this have to have different rep requirement that simply posting questions and answers? What a spammer of flooder could do with a gallery, they can already do by simply adding pictures.

Now comes how we can do this. Your suggestion is good using !! instead of !. That should applied to help create a gallery of photos. Or maybe the SE people could whip up some new code to make making a gallery more time efficient...

There should also be a photo limit for per gallery. This is not instagram so the limit should be set low like four or five. With reasoning, maybe a mod could give the users a bonus photo or two if they really need it.

So now that is settled, how do you even use it? That should be up for discussion in chat or here in comments. My idea is two left and right arrows that must be clicked to go to the next photo. Yes, I agree this should applied to save space and time. This should help users make their posts more readable and more neat. And I agree with all of your points as well.

| improve this answer | |
  • 5
    Why does this have to have different rep requirement that simply posting questions and answers? What a spammer of flooder could do with a gallery, they can already do by simply adding pictures. – Gallifreyan May 2 '17 at 17:57
0

I think this is a useful .

I'd just modify it a tad, so that a user is given a choice to display images inline (as they are currently), or in a slideshow/gallery/what-have-you. If the user selects the gallery option, then the images should be numbered and included at the bottom of the post -- then the poster can write "As shown in Image 1" etc as needed.

| improve this answer | |

You must log in to answer this question.