Photo and tile view mode

[6elkir]

An excellent feature that is sorely lacking along with the ability to upload files: this is the ability to view directories in the form of tiles and photo previews, as well as open images in some viewer with the ability to slideshow (the same greybox). It's quite easy to screw it on and it seems to me that it will raise the level of the software quite well.

[legop3]

I would love to have this! back in the day (a few years ago) I ran HFS 2.0 on my server, and managed to create a half-baked implementation of this concept on that software, it would be great to see something like it built into HFS 3

[6elkir]

Now I have a tourist community visiting me and during the summer hiking season there are really a lot of photo/Video uploads from people. View mode and tile mode are really very lacking. It is also recommended to use the mode of operation of the tiles while downloading files. people upload 100,500 images/videos at once, they can’t figure out by name what is needed and what is superfluous in the download list. Looking forward to these features.

[rejetto]

i don't consider this a core feature, thus i tagged this request as "plugin", but I will try to see what can be done, to ensure a plugin can actually make it.

[6elkir]

if (item is img || item is video)
{
  add class to item data-fancybox="gallery" data-caption="Caption #1 or caption from meta"
}

Fancybox.bind("[data-fancybox]", {
  // options from admin ui gallery control page
});

and add custom css for tiles list

[rejetto]

fancybox expects you to provide thumbnails, ready on separated files.
It's ok if you want to make a photos website, not as much for a generic file server.

I've been experimenting a bit. In the following picture you are seeing 3 plugins I'm working on.
One is providing tiles mode, another thumbnails as icons, another custom pictures as icons (the PDF file).

Thumbnails plugin doesn't require extra files, it tries to get the thumbnail often saved inside the jpg, otherwise it makes one on the fly, without saving.
Generating can be a heavy job anyway, so I have to consider

1. a way to reference thumbnail file, in case you have it
2. a way to store the generated thumbnail, in a cache or inside the jpg file itself
3. using multicore, because it is heavy on the CPU

Tiles mode is less optimized but more flexible than a photo gallery mode, since it can display any type of file.

[SanokKule]

What about saving thumbnail as a separate jpg file with it's hash (md5 or other) as the name in cwd/cache and having another file with references to them as the path and hash pair?

[rejetto]

hash name would make sense to avoid duplicates, but I don't see many duplicates in this use case

[SanokKule]

That's so you don't have to worry about name conflicts and path being too long

[rejetto]

right, but if i need a file to keep references then hash or sequential number is basically the same.
The option I love the most is to store it inside the original jpg.

[SanokKule]

Well what about other formats like png, webp and others?

[rejetto]

didn't look into them yet.
png suports thumbnails as well, webp no idea.

[SanokKule]

I wouldn't like my files modified, so that's why i'm suggesting this

[6elkir]

The most adequate implementation of the thumbnails cache: their assimilation in the file itself through the reliability of the standard thumbnail mechanism. If you don’t want to bother like this, the prose just saves them in a certain tempo folder (indicated in the admin panel) and either repeat the paths from the parent or replace the slashes with an underscore.

On-the-fly thumbnail generation
https://www.npmjs.com/package/image-thumbnail

How to make a listener on receiving file path and returning thumbnail path and request input asynchronously for files in folder.

[rejetto]

i just verified png and webp are supported, apparently without extra effort. Tiff should as well, but didn't verify it.

https://www.npmjs.com/package/image-thumbnail

I just had a look at this package, and it uses package "sharp" to get the work done. I already tried sharp, my first attempt actually, and it's very fast, but it's harder to distribute: 80MB and still won't work on "every" platform.
At the moment I'm testing another solution that's under 1MB and works everywhere.
Maybe the best would be to optionally and easily install the faster solution. We'll see.

If I keep all thumbnails in a folder, the hashing suggestion, while taking an extra time for calculation, could behave much better when renaming/moving original files around.

[rejetto]

still working on it
https://github.com/rejetto/hfs/assets/1367199/d4b29812-c525-44a7-bf33-335bcbe747b2

[6elkir]

I think the tiled view will work great with my view add-on (still in development, but I'll be sure to share when I'm done). It's especially cool if the object has a thumbnail property to access the preview to feed it with the Graybox injection

[6elkir]

Need thumbs support. Example Fancybox viewer WITHOUT thums support:
https://share.dvor-net.ptz.ru/2gRWvNBwKF.mp4

[rejetto]

are you on Windows?

[6elkir]

are you on Windows?

yep) win 11 x 64

[rejetto]

tiles mode in 0.46.0 #257
thumbnails as plugin, requiring 0.46.0
things are not finished and can still change a lot

[rejetto]

@6elkir did you have the chance to see if the new API is good for your purpose?

[6elkir]

Hi @rejetto! So far, unfortunately, I haven’t managed to get it yet I’ll try to do it one of these days. And how to check the API before the release of a new version?

[rejetto]

no worries, everybody is busy 🙂
to check the new APIs the best way is https://github.com/rejetto/hfs/blob/main/dev-plugins.md#api-version-history
when you are interested in one of the news, you check the details in the rest of the document.
If I find the time I will test fancybox myself.

[6elkir]

Do I understand correctly that getDefaultIcon() will return a link to the file thumbnail? If yes, then this will be enough for Fancybox.

[rejetto]

getDefaultIcon doesn't return a link, but the image/icon.
If it was a link the type would have been string.
It can be the thumbnail if you have the plugin installed.
You probably also need getNext.

[6elkir]

It is unlikely that I could recognize the Fancybox api, it needs a set of objects from 2 lines of the form
[{file:string, thumb:string},...]

[rejetto]

if you need the thumbnail url, then getDefaultIcon is not the right choice.
With thumbnails plugin the thumbnail url is just the file url with ?get=thumb at the end

[6elkir]

is the plugin already available?

[rejetto]

It is, but you need version 0.46