Masonry Grid-view for Images (Like Pinterest)

Features wanted...
Vital
Posts: 1
Joined: 10 Sep 2019 01:45

Masonry Grid-view for Images (Like Pinterest)

Post by Vital »

I've looked everywhere for a desktop app that allows image browsing with a masonry grid layout. Very popular on the web, but totally absent from offline apps.
It makes image browsing a lot faster (for me anyway) and you're not restricted by thumbnail size settings.


The best example is https://www.deviantart.com/
Pinterest and google images are similar, but I prefer the "airtight" variety, or close to it.
https://www.artstation.com/ is also similar.

I discovered Xyplorer during my search for an image viewer with masonry grid-view. I came up empty-handed, but Xyplorer was a lot better than what I was using before (Irfanview Thumbnail gallery).
At this point, I'm willing to put down hundreds of dollars to secure this feature, or at least support its development.
Hopefully there's others who want alternate image layouts as well.
ok.jpg
ok.jpg (420.44 KiB) Viewed 3924 times

admin
Site Admin
Posts: 60357
Joined: 22 May 2004 16:48
Location: Win8.1 @100%, Win10 @100%
Contact:

Re: Masonry Grid-view for Images (Like Pinterest)

Post by admin »

Something quite similar is already possible using
Configuration | Preview | Thumbnails | Zoom to fill = ON
Configuration | Preview | Thumbnails | Style = Plain
Configuration | Preview | Thumbnails | Padding = 0

Or simply use this script (paste into the address bar and press ENTER) to toggle between normal thumbnails and a tight wall of thumbs:
thumbsconf((thumbsconf() == '0,1,0,0') ? '1,0,4,2' : '0,1,0,0');

Note from 20230209: In current versions it should look like this:
thumbsconf((thumbsconf() == '0,1,0,0,0,0,0,0,1') ? '1,0,4,2,0,0,0,0,1' : '0,1,0,0,0,0,0,0,1');

See here and the image below:
https://www.xyplorer.com/release_16.30.php#Gallery
Attachments
ThumbsWall.jpg
ThumbsWall.jpg (469.33 KiB) Viewed 3860 times

lian00
Posts: 354
Joined: 09 Jul 2014 17:12

Re: Masonry Grid-view for Images (Like Pinterest)

Post by lian00 »

It’s interesting but the result is not quite in Pinterest as in Pinterest you can preview the entire image and not in XYplorer. It shows a zoomed squared thumbnail.
Windows 10 64 bits

admin
Site Admin
Posts: 60357
Joined: 22 May 2004 16:48
Location: Win8.1 @100%, Win10 @100%
Contact:

Re: Masonry Grid-view for Images (Like Pinterest)

Post by admin »

You see them fully if you turn this off: Configuration | Preview | Thumbnails | Zoom to fill

But it looks not as tight then.

klownboy
Posts: 4109
Joined: 28 Feb 2012 19:27

Re: Masonry Grid-view for Images (Like Pinterest)

Post by klownboy »

It is an interesting view. I suppose it would be fixed height / variable width - where each image is scaled to a fixed height and to maintain the original image aspect ratio the width is adjusted as required.
Windows 11, 22H2 Build 22621.1555 at 100% 2560x1440

admin
Site Admin
Posts: 60357
Joined: 22 May 2004 16:48
Location: Win8.1 @100%, Win10 @100%
Contact:

Re: Masonry Grid-view for Images (Like Pinterest)

Post by admin »

variable width... that's the clue. The normal list views are organized in rows and columns. Variable width would be something quite different. Not impossible but nothing quick either. But I like the idea. A challenge... remind me in winter... :maf:

klownboy
Posts: 4109
Joined: 28 Feb 2012 19:27

Re: Masonry Grid-view for Images (Like Pinterest)

Post by klownboy »

admin wrote: 05 Oct 2019 21:53 A challenge... remind me in winter.
Sounds good. As on GOT, winter's coming!
Windows 11, 22H2 Build 22621.1555 at 100% 2560x1440

admin
Site Admin
Posts: 60357
Joined: 22 May 2004 16:48
Location: Win8.1 @100%, Win10 @100%
Contact:

Re: Masonry Grid-view for Images (Like Pinterest)

Post by admin »

I thought about it.

- It cannot be as fast as the current views since it's too variable to be suited for caching. So the Masonry Grid View would be a non-cached view.
- In a horizontal Masonry Grid portrait pictures are shrunk heavier than landscape pictures, so it's kind of unfair to portraits.

If you are still interested let me know in winter.

klownboy
Posts: 4109
Joined: 28 Feb 2012 19:27

Re: Masonry Grid-view for Images (Like Pinterest)

Post by klownboy »

admin wrote: 06 Oct 2019 11:45 It cannot be as fast as the current views since it's too variable to be suited for caching. So the Masonry Grid View would be a non-cached view.
Though the view is nice to look at, if you don't think caching is possible, I'm not sure I'd want to witness the generation of thumbnails every time I entered that image folder. I realize you would probably need a new type or style thumbnail as you did to provide the zoom-to-fill style (e.g., 240x240z), but I'm not sure why it couldn't be cached. Once you'ved taken the time to generate those thumbs, it would be a shame not to be able to keep them. I guess what it boils down to slow is fine once due to initial thumbnail generation, even very slow, but I wouldn't want to see that every time.
admin wrote: 06 Oct 2019 11:45 In a horizontal Masonry Grid portrait pictures are shrunk heavier than landscape pictures, so it's kind of unfair to portraits.
Well yes, the tall ones are shrunk but that's to be expected. I think they look fine and viewable as seen on the previous post.
Windows 11, 22H2 Build 22621.1555 at 100% 2560x1440

admin
Site Admin
Posts: 60357
Joined: 22 May 2004 16:48
Location: Win8.1 @100%, Win10 @100%
Contact:

Re: Masonry Grid-view for Images (Like Pinterest)

Post by admin »

Well, it depends.

If you want a perfectly aligned block (and I think pinterest does this; the attached image has it too and is from google image search) there has to be some cutting somewhere, and this depends on the sequence of pics. I cannot (reasonably) have a cache file or each sort order, so: no caching.

If you are happy with a left-aligned wall (which would be a sub-standard masonry work IMO) then caching would be possible.
Attachments
2019-10-06_152520.png
2019-10-06_152520.png (583.78 KiB) Viewed 3755 times

klownboy
Posts: 4109
Joined: 28 Feb 2012 19:27

Re: Masonry Grid-view for Images (Like Pinterest)

Post by klownboy »

admin wrote: 06 Oct 2019 15:29 If you are happy with a left-aligned wall (which would be a sub-standard masonry work IMO) then caching would be possible.
I think what you mean here is, on the left side the thumbnail rows are aligned. On the right side there will probably be some blank space at the end of a row depending on the combined total width of the photos in that row and of course that means the right side is uneven (with gaps).

Maybe not as pretty, but I think a ragged right side would be fine. I was actually expecting you would have to do that. Cutting thumbnails widths to make all rows exactly the same width doesn't seem to make much sense and from what you are saying, it also sounds like it would be more difficult to accomplish. Is it worth it just to make an aligned right side? I don't think so, especially if caching is not possible then. With today's wide screen monitors, the non-aligned right side isn't so important.
Windows 11, 22H2 Build 22621.1555 at 100% 2560x1440

lian00
Posts: 354
Joined: 09 Jul 2014 17:12

Re: Masonry Grid-view for Images (Like Pinterest)

Post by lian00 »

I agree that caching is mandatory.
Windows 10 64 bits

admin
Site Admin
Posts: 60357
Joined: 22 May 2004 16:48
Location: Win8.1 @100%, Win10 @100%
Contact:

Re: Masonry Grid-view for Images (Like Pinterest)

Post by admin »

To sum up, the ragged right side has two advantages:
- super fast caching
- nothing is cut

klownboy
Posts: 4109
Joined: 28 Feb 2012 19:27

Re: Masonry Grid-view for Images (Like Pinterest)

Post by klownboy »

admin wrote: 06 Oct 2019 16:11 To sum up, the ragged right side has two advantages:
- super fast caching
- nothing is cut
Exactly right. I think they outway the disadvantages.
Windows 11, 22H2 Build 22621.1555 at 100% 2560x1440

Marco
Posts: 2347
Joined: 27 Jun 2011 15:20

Re: Masonry Grid-view for Images (Like Pinterest)

Post by Marco »

admin wrote: 06 Oct 2019 15:29 Well, it depends.

If you want a perfectly aligned block (and I think pinterest does this; the attached image has it too and is from google image search) there has to be some cutting somewhere, and this depends on the sequence of pics. I cannot (reasonably) have a cache file or each sort order, so: no caching.

If you are happy with a left-aligned wall (which would be a sub-standard masonry work IMO) then caching would be possible.
Couldn't you apply the cutting pass on the thumbnails, rather than the full size pics?
I mean, the pipeline would be:
[first folder visit] original pics -> thumbnail generation (fixed heigth) -> caching
[following folder visits] sort order retrieval -> sorting thumbnails width accordingly -> binning per list viewport width -> clipping thumbs -> paint everything on screen
Tag Backup - SimpleUpdater - XYplorer Messenger - The Unofficial XYplorer Archive - Everything in XYplorer
Don sees all [cit. from viewtopic.php?p=124094#p124094]

Post Reply