Giter Site home page Giter Site logo

Photo and tile view mode about hfs HOT 29 CLOSED

rejetto avatar rejetto commented on May 19, 2024 2
Photo and tile view mode

from hfs.

Comments (29)

rejetto avatar rejetto commented on May 19, 2024 1

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

from hfs.

legop3 avatar legop3 commented on May 19, 2024

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

from hfs.

6elkir avatar 6elkir commented on May 19, 2024

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.

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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.

from hfs.

6elkir avatar 6elkir commented on May 19, 2024
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

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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).

image

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.

from hfs.

SanokKule avatar SanokKule commented on May 19, 2024

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?

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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

from hfs.

SanokKule avatar SanokKule commented on May 19, 2024

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

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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.

from hfs.

SanokKule avatar SanokKule commented on May 19, 2024

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

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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

from hfs.

SanokKule avatar SanokKule commented on May 19, 2024

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

from hfs.

6elkir avatar 6elkir commented on May 19, 2024

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.

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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.

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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

from hfs.

6elkir avatar 6elkir commented on May 19, 2024

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

from hfs.

6elkir avatar 6elkir commented on May 19, 2024

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

from hfs.

rejetto avatar rejetto commented on May 19, 2024

are you on Windows?

from hfs.

6elkir avatar 6elkir commented on May 19, 2024

are you on Windows?

yep) win 11 x 64

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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

from hfs.

6elkir avatar 6elkir commented on May 19, 2024

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?

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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.

from hfs.

6elkir avatar 6elkir commented on May 19, 2024

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

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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.

from hfs.

6elkir avatar 6elkir commented on May 19, 2024

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},...]

from hfs.

rejetto avatar rejetto commented on May 19, 2024

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

from hfs.

6elkir avatar 6elkir commented on May 19, 2024

is the plugin already available?

from hfs.

rejetto avatar rejetto commented on May 19, 2024

It is, but you need version 0.46

from hfs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.