Design of the main content view

[jancborchardt]

TL;DR:
A simplest start for the main view would be similar to Arcane Office: https://photos.arcaneoffice.com

Then eventually we can look into stuff like macOS Photos: https://www.apple.com/macos/photos/

Layout

The current layout fills the screen from left to right, making for a very stuffed experience. Other platforms limit the width of the main photo display to fewer elements:

• Flickr does 3: https://www.flickr.com/photos/tags/sunset
• Arcane Photos does 5: https://photos.arcaneoffice.com
• macOS Photos does 6: https://www.apple.com/macos/photos

Both macOS Photos and Arcane Photos (and Instagram) show photos square, cropped. We should do this too.
(Note: In search, macOS Photos has a special view where it’s visible if a photo is portrait or landscape – we can think about that in the future as well.)

Structure

Currently we show a folder structure in the main view the same way like the Files app. Other photos apps do not do this, and it’s very crowded.
Instead we should simply go with a chronological photo stream like macOS Photos and the like.
Especially since we now have a proper grid view in Files, the Gallery app can have a design better suited to viewing photos.

Display

We show a lot of other filetypes like SVG icons, PNG screenshots, etc. We could think about limiting these so there’s less unrelated noise inbetween photos.

cc @nextcloud/designers @skjnldsv

[juliushaertl]

Both macOS Photos and Arcane Photos (and Instagram) show photos square, cropped. We should do this too.

I'm a bit skeptical about this. The crop of a photo is actually something important imo and should be kept like the original was. Instagram isn't a good candidate to compare here, since as far as i know, they enforce the square format on upload. Yes this is probably not a real issue for day-to-day smartphone snapshots, but I see no real reasoning for the cropping.

macOS Photos seems to use this as a default for the event-like overviews, but they also still have a regular view where all the photos are displayed uncropped:

Same goes for Google Photos:

Microsoft Photos

[skjnldsv]

(As a reference)

[jancborchardt]

You’re right, it was a bad example with Instagram, they enforce square photos.

So what Google Drive and Microsoft Photos do is essentially what we do right now, same as Flickr. With an important difference on the side of Microsoft Photos and Flickr, and that is that they limit the width of the whole view to roughly 3 pictures next to each other and have proper space between them.

So in the interest of doing things step by step and from what we have, how about this instead:

1. We move from the folder-based structure to chronological view (the folders move to the section of "Albums" in the left navigation).
2. We limit the width of the photo list from full-width to what roughly equates to 3 photos next to each other. And we also increase the whitespace between photos a bit for differentiation.
3. After that we can consider further changes, like using the layouts macOS Photos uses.

[juliushaertl]

Sounds good to me 👍

[raimund-schluessler]

When we already touch this, I want to propose to move away from javascript to flex-box in order to arrange the images. Currently on every browser resize the images flicker and kind of reappear since they are moved from one row to the next and some weird animations kick in.

By now, this can be done in pure CSS using flex-box without any javascript.

[marcoambrosini]

By now, this can be done in pure CSS using flex-box without any javascript.

Wouldn't it be better to use the CSS grid in this case?

[raimund-schluessler]

Wouldn't it be better to use the CSS grid in this case?

This might be even more appropriate. I am just not very familiar with CSS grid.

[skjnldsv]

It all depends on the type of view we go for.
Flexbox can work, but there is some limit to it. :)

[jancborchardt]

It’s all step-by-step and we have a bunch of other things to do like using the proper sidebar. So first we should start by working with the tiling library we already use, and reduce the width, cut out the folders etc. :)

Otherwise we start and the only thing we have for 18 is some nicer flexbox code but not much user-facing changes. ;)

[jancborchardt]

So I’ve been checking more about photo apps and their designs. A big point for cropping is that it’s just used in the platforms people use day-to-day on mobile:

• Android Gallery or Google photos
• iOS Photos
• Instagram (they also have Stories, which are portrait, but still cropped)
• etc.

So people are simply used to it a bit more. The tiled view is only used by Google Drive, Flickr and Microsoft Photos. Where e.g. even the mobile apps do not use that view.

There are several problems with the tiled view on top of that:

• You don’t really see where one picture ends and another begins.
• Portrait photos are inherently displayed as smaller than landscape pictures, which is a strange bias.
• If 1 photo gets added, the whole structure could change completely (not only the order).
• It just feels all unordered and jumbled together.

The macOS alternative view or search view addresses some of those points, but looks quite strange also. We can think of having that as an optional view, but not as primary.

Hence I would say that if we do start from scratch @skjnldsv we do go with the cropping first, essentially as said above kind of like Arcane Photos.

[raimund-schluessler]

I created an example of the currently used tile view, but with a lot less javascript. See https://codepen.io/raimund-schluessler/pen/poobMmV?editors=1100.

It basically resembles the current behaviour of the app, but doesn't need javascript to resize the images. A bit of javascript is still necessary to apply the image ratio and adjust the flex-grow value once after an image is loaded. Images are not cropped and resize to fill the rows.

If we go for cropping images and showing them square, I think we can make it with even less javascript using css grid.

[MonsieurLanza]

Sorry, I'm stepping in a bit abruptly, as nobody knows me here, and I don't know anybody.

Thing is the current gallery main view is a painful point for my family (which is used to Apple UIs), and photos is THE reason we need nextcloud. So I was just wondering if I could/should do another client for Gallery or a fork, thus searched a little and landed here, which is somewhat of a perfect timing.

As far as I'm concerned, the pain does not come from the shape of the photo, nor the use of CSS over JS (or even WASM if you wanna go this way), nor even to have a sidebar, but to be able to quickly browse and find a particular photo within a 130GB, 15 years old library. Currently the view, AFAIC, has the following problem :

• photos are not sorted by default the way we use them (last ones first)
• there is no date indication, which is a real pain in the ***…
• no easy way to jump back/forward in time
• it's way too slow to browse by hand.

Our photos are not sorted by album and we have thousands of them.

Instagram, Apple or Arcane did what they did, not only for coolness and aesthetics in the first place, but for easy browsing.

No matter what technical solution is retained, or shape, or arrangement you will agree to, could you/we please ensure to address those points ?

[jancborchardt]

@MonsieurLanza thanks for your feedback! :) And yes, we will address those points, even if it might be a bit slow since we have to take it step by step with limited resources. The first step will be a nice view which is sorted by "Most recent photos first" as you describe. The view will also have some date dividers, just like the Activity app already has.

Further things will be developed on that basis. :)

[grenzverkehr]

I'm not sure which way it's going now, but I'd like it if the photos in Gallery weren't cropped. They are already cropped in the grid view. For me Flickr is a nice example how it could look like: https://www.flickr.com/photos/dmtoh/

[mpodshivalin]

Hi everyone!

I've looked for a good self-hosted gallery for a while now so I'm glad that a Gallery app for Nextcloud is finally being updated :) I want to share my thoughts about this.

I have a lot of friends who don't like their data being uploaded to Google/Apple services and who would consider a self-hosted solution (or at least solution hosted by me :) ). The main problem is a Photos/Gallery app. From my experience, when a general non-technical user says that he needs "Cloud", he actually cares a lot about Photos, and significantly less about file sync, contacts, etc. If you look at a Nextcloud Gallery that way, right now it isn't the best approach. People want a simple interface, like the one you attached in your screenshots - a simple Photos Timeline which groups photos by date.

The users should just open this app and start viewing their photos, without having to navigate through folders, changing sort order, etc.

Here are my suggestions on how to make it happen.

• A Nextcloud user should have a folder, which he wants to be his "Gallery" (probably auto-upload folder created by iOS/Android app). We should let the user set this folder in the app settings, so that when he goes to the Gallery app, he would immediately see what he wants, like in Google Photos or Apple iCloud Photos. Right now users must navigate through folders, which is a big problem for them.
• "Gallery Folder" could have subfolders, and we should ignore them. It needs to be scanned recursively and turned into Photos Timeline. This is because it is impossible to use one folder for all photos - it would have a very large amount of files, and Android/iOS apps create subfolders to deal with these problems. Also, let's imagine that I want to share a folder with some photos with a friend. It would be logical for him to put that folder inside his Gallery Folder. And he should see these photos in his Photos Timeline.
• (FUTURE) A user should be able to add a photo to an album and potentially share it with other users. It should not be done with folders, since one photo can be added to any amount of albums. Albums, in my opinion, should be a Gallery-specific thing, like in Google Photos or iCloud Photos.
• (FUTURE) It would be great to be able to use tags in Gallery, and be able to search through them. We could use native Nextcloud tags for this but it should be done from within Gallery app.
• Right now it's impossible to scroll to a certain point in time or at least to scroll quickly. This is a problem for Photos Timeline, since people who want to use it should have hundreds of thousands of photos. It should be possible to scroll quickly, maybe we should fill a page with a blank blocks and load them when a user scrolls to a certain point. Right now if I want to go to 2014 I would have to scroll for days :)
• When we sort photos by date, we should use EXIF date and time instead of file's creation date and time. A lot of the time they are different and people want to sort their photos by when the photo was taken instead of when the photo was uploaded to Nextcloud. This is a case for example when using WebDAV to upload files to Nextcloud.
• The photo viewer should be mobile-friendly. I imagine there probably won't be an iOS/Android app for Nextcloud Gallery for a long time, but at least a user should be able to use it on mobile. Right now it's very inconvenient because it doesn't have gestures. We should use Fancybox http://fancyapps.com/fancybox/3/ . In my experience it's good, and it doesn't need to know exact dimensions of a photo, so it should be easier to integrate than PhotoSwipe.

[jancborchardt]

@mpodshivalin hi! :) All your suggestions are either already implemented or open as issues in the tracker: https://github.com/nextcloud/photos/issues

Take the Photos app for a spin, and feel free to either join in the existing issues or open separate ones for the ones which don’t exist yet. :)

[mpodshivalin]

@jancborchardt Wow, that is great news! Thanks, I'll check out Photos soon :)

[nemihome]

It would be nice if cropping can be disabled via a setting. I was never be a fan of things like this even if they did it in television. It's just not the full picture which you see and maybe an important part is in the area which you don't see.

[FrouxBY]

Its amazing that a rework of the gallery is in progress,

As for a small contribution, i remember this medium article (https://medium.com/google-design/google-photos-45b714dfbed1) that give some insight on getting a high performance scrollable page for the Google photos website,
thanks a lot for your work!

[wein-geist]

Hi all, I'm also new here but I thought extensively about the needs in a photos app the last few
I agree 100%, that an uncropped view of the photos looks much sleeker. The tiled square view of pictures can already be achieved in Files.
I actually started a discussion over at the Nextcloud forum so far by myself with a few ideas about the photos app including some visualization drafts, maybe one or the other finds some inspiration in it...

[jancborchardt]

Closing this as we now have the non-cropped layout: #435

If there’s other leftovers, please open separate issues for them – and make sure to search beforehand to not create duplicate issues. Thanks! :)