High resolution / full sized images for lightbox

Features and Ideas
1

Hi @all,

Since my first day on Diaspora I have wondered why images displayed in the lightbox are so small. They do not differ much from the in-stream version and sometimes it’s hard to see the tiny parts of a picture.

To get a full-sized version of the image there is a little trick: You take the image URL and remove the “scaled_full” in front of the image filename, paste it in your address bar again and you get the original image file.

This trick is not well-known and I guess some users have difficulties to enlarge pictures.

My idea is to show a full-sized version (original version) of the image in the lightbox instead of the smaller scaled_full version. There is more than enough space to give images the space they need. We will keep having the scaled_full version in the stream as small footprint preview, but if you open the lightbox on that picture you will get the full version on your screen.

To prevent parts of the image being cut off due to small screen size, the lightbox will resize the full version to a size which fits the screen in width. This will happen dynamically and CSS-based.

There’s a short screencast on my server to show my finished work: https://cloud.trashserver.net/public.php?service=files&t=1229224ef4da202a4c58160200008e8a

In my current code there is only a small border around the image. You can easily increase the border width if you want, but that’s more detailed stuff we can discuss about later.

My updated code for Diaspora is finished so far. You can see the changes here: https://github.com/ThomasLeister/diaspora/compare/bigpics?expand=1

Let me know if you like the changes. If you do, we can easily merge my code to the Diaspora dev branch and have full-sized images in the next Diaspora* release :slight_smile:

Update: Pull request on GitHib: https://github.com/diaspora/diaspora/pull/5500

Update2: Video on YouTube: https://www.youtube.com/watch?v=YMsm9MVl1T0

Note: This discussion was imported from Loomio. Click here to view the original discussion.

2

Proposal: Should Diaspora* have a full-size image lightbox?

Agree: I like that! Merge this feature into diaspora-develop

Disagree: I don’t like your idea.

Outcome: N/A

Votes:

  • Yes: 33
  • Abstain: 1
  • No: 2
  • Block: 0

Note: This proposal was imported from Loomio. Vote details, some comments and metadata were not imported. Click here to view the proposal with all details on Loomio.

3

I am not able to see or download the screencast. Can you upload the screencast somewhere else from where people could download it ?

4

I can see it @shirish
didn’t checked the code but i agree to this change :wink:

5

@shirish here you are: https://www.youtube.com/watch?v=YMsm9MVl1T0 :slight_smile:

6

@jhass (https://github.com/diaspora/diaspora/pull/5500#issuecomment-68212836)

You are partly right with the bandwidth thing, but I am assuming that most people who see a picture in their stream won’t load the full version. The traffic would just slightly increase by those users who load the full version of a picture they are interested in.

There are Upload limits on Diaspora anyway, so the impact on bandwidth won’t be too huge I think.

Maybe it would be a useful archievement to introduce a caching engine, which caches frequently requested images on the user’s pod itself. Traffic would be more decentralized then.

7

Yet another consideration is that presenting only a version to the user that went through server side processing, might in some rare cases actually protect against uploading a malicious image that could exploit a flaw in a browser implementation. Though that’s a not too likely scenario I guess.

8

I’m all for increasing the lightbox image size, but I have to agree with @jhass here. The implementation should be on the server-side and if we’re already touching that part, we could make it configurable as well.

9

Okay, another way to do it would be:

We introduce a new image version “scaled_lightbox” which is about 1500 px wide by default and make it configurable via the diaspora.yml. The admin is a server can then make his own decision about the size.

This scaled_lightbox version will be used in the lightbox. At the same time there will be a tiny link in the lightbox, which links to the original file. Users can then download the original file and be happy with it, because we are storing the original on the servers anyway.

The question is if it makes so much sense to differentiate between “scaled_lightbox” which has quite a big size… and the original file. If we have a look at the file sizes there probably won’t be a big difference, because there are upload limits for images anyway. One version more just would need more disk space than if we only had thumb, thumb, scaled-full and original.

Let me remember: The original file can’s be too big anyway because of the upload limit.

So my new suggestion is: Let’s not introduce one more image version, but keep / correct the sizes of the current ones. In my opinion the original file should be shown in the lightbox, because it’s size is limited by the upload limit anyway. To limit outgoing traffic for podmins, there should be a configurable upload limit for pictures in diaspora.yml. (See https://github.com/diaspora/diaspora/issues/3155)

This would help us save disk space and not to store hundreds of image versions on the servers :wink: At the same time it’s easy for users to get the original file by just opening the lightbox, doing a right click and save the image. Users with high DPI displays will be happy too, because they always get the most brilliant version of a picture in their lightbox instead of a shrinked or compressed version. Lightboxes are here to offer pictures in their whole beauty.

Let’s try it like that and then see, how it influences the traffic on the servers. If traffic is too high, we should make a simple caching engine which caches frequently requested images. Server-2-Server traffic would be lower then.

@florianstaudacher what do you mean by implementing it server-side? You want to explicitly give the original file address to the imagebox instead of “guessing” it from the scaled_full address? But is that really necessary? Shouldn’t the image store be consistent and always have a non-“scaled_full” version corresponding to a “scaled_full”-version? I think we can rely on that.

10

yeah, pretty much. we have the backend and frontend under control so no need to “guess” - just pass whatever we need to the JS. Any added complexity would have to be unit-tested and has a potential to contain errors.

11

I really think we should just adjust scaled_full to our needs and not introduce yet another version, that’s also easier when it comes to backwards compatibility. And I still think throwing the original away after processing might be a considerable option.

12

We need to keep a balance between bandwidth consuming and ‘cool features’ (we need to attract new users). And of course safety should be top priority as Jonne Haß wrote.

Hmmm…maybe a limit on 1920x1080?

13

The problem is that scaled_full is used in the stream and in the lightbox.

When we just increase scaled_full size, we will have big files being loaded when you scroll through the stream. => Bad for performance and bandwith.

When we leave scaled_full at the current size, the lightbox is quite useless.

We need different image sources for different use cases. If you have a look at the responses users want to have a lightbox with a big picture in it.

There are two ways to achieve that: Using the original file or introducing a new, bigger scaled version. As we have the original files on every server it would be an easy thing to just use these files :wink: Would be great for backward compatibility, too.

14

I agree with Jonne Haß, we should just adjust scaled_full and throw the original away after processing.

Said that, I highly recommend to reconsider how we use d*, because from my point of view there are other softwares or servers to deal with images, example Gallery or flickr.

15

Some images after processing by diaspora scale-down algorithm have their colors changed, less contrast ( the only example I could find fast is unfortunately NSFW: https://despora.de/uploads/images/920301f9ee74745fb900.jpg vs https://despora.de/uploads/images/scaled_full_920301f9ee74745fb900.jpg ). There certainly should be an easy way of showing original image - either in lightbox or by showing an enlarge link.

16

As I do not know how to implement the Ruby /backend stuff, I am not able to do any further improvement of the lightbox.

So it’s simple like that: People obviously want this feature, so just take my code into the Diaspora Dev Branch or change it according to your imaginations :wink: Maybe a config option to enable or disable full sized images in the lightbox. That would be the easiest solution.

But like I said: I dont’s know anything about Ruby / Rails, so further development would have to be done by somebody else.