search

jwater7 / responsive-photo-gallery

NodeJS backend to serve a photo collection in a mobile-friendly and beautiful way
4 stars 2 forks source link

How to add images. #4

Open nicxvan opened 5 years ago

nicxvan commented 5 years ago

I created this container and was able to get it running.

I grabbed the default password from the config and logged in.

I see a button called albums, but pressing it does nothing. I can't figure out how to add images or albums.

Console has these errors:

Failed to load resource: the server responded with a status of 500 (Internal Server Error) api.js:87 LIST ERROR: (500) No Albums Processed

jwater7 commented 5 years ago

Sorry if it wasn’t clear from the description but this gallery only displays photos and videos that are already in an album, it currently does not have support to upload them, although I would welcome contributions to implement that.

Right now, an “album” is defined as the contents of a folder placed at the top level of the mounted images directory. The “collection” concept is based off of the date of the photo or video metadata (each month is a collection).

To display photos and videos in your case, create a directory in the location where you mounted the /images docker volume and drop your stuff into that subdirectory.

nlighteneddesign commented 5 years ago

Thanks!

kklepper commented 3 years ago

Well, I managed to log in with -e NO_AUTHENTICATION=yes and get no albums. Sure I have images in the right place:

/usr/src/app # ls -latr /images
total 21852
-rw-r--r--    1 root     root        322337 Dec 24 16:28 P1000527_2.JPG
-rw-r--r--    1 root     root        317110 Dec 24 16:28 P1000519.JPG
-rw-r--r--    1 root     root        312733 Dec 24 16:28 P1000518.JPG
-rw-r--r--    1 root     root        303106 Dec 24 16:28 P1000071.JPG
-rw-r--r--    1 root     root        315040 Dec 24 16:28 P1000044.JPG
-rw-r--r--    1 root     root        314310 Dec 24 16:28 P1000006.JPG
-rw-r--r--    1 root     root        323940 Dec 24 16:28 P1000598.JPG
etc.

What's wrong?

jwater7 commented 3 years ago

Hi @kklepper - I believe this is because the files are not in an album sub folder as described above. Please try something like: mkdir /images/myalbum mv /images/*.JPG /images/myalbum/

kklepper commented 3 years ago

Thanks for the quick reply. My instruction was /gallery/ok:/images:ro and ok is populated. So I changed to /gallery:/images:ro

And it works! And it's fast!

I started with 2MB samples, then added 4 8MB samples. It takes a little to transfer the data, but then browsing is immediate. Excellent!

Next I used 16MB samples. Same here. Fullsize comes immediately, very nice, which explains that those pictures are really transferred fullsize, too, so your bandwidth will come into play. Very impressive to see the actual quality of the pictures at a mouse click.

But then the browser should cache the images, right? It doesn't so my theory must be wrong. It is roughly 5 secs for a 16MB photo of 6MB filesize, if I am correct. I am on a 100MBit/s line.

Also, sorting by date is fine, but subdirectories are not displayed. That makes it hard to keep order. I created directory Lumix and subdirectories for models like FZ1, FZ150, FZ62, but they are just presented by date. As there is no exif data, I am clueless. So I should drop Lumix and uplift the subdirectories one level. OK, that works.

Just discovered Fullscreen mode and Share. User credentials are in config.json, I found.

Automatic collections by date is a great idea. Would it be possible to add a label to describe what happened that day?

Responsive is a good name, except for the initial wait period. If the browser cache would work, it would be a one time issue. What about hundreds of pictures a day?

Also using ftp is fine, but you cannot pick candidates this way. Drag and Drop is what users want, right?

I implemented that technique in PHP for a contact form, so I know there should be ready to use libraries, no need to reinvent the wheel. But I'm sorry I am no expert in node and very short of time, too. This exploration is kind of a Christmas present.

kklepper commented 3 years ago

Oh, just found image information. How come size is 1.2MB when the file is 6,003KB? 

4608 x 3456
1,2 MB
kklepper commented 3 years ago

As said, browser caching would help, but I think there is an easy solution to the wait period. Just show the first picture and then load the next in the background and so on. That should be possible with little effort, I guess.

Found Edit, too, but expected a rename. Favorite tagging should be realized in the menu bar upper right.

kklepper commented 3 years ago

Wanna hear more?

Thumbs is interesting, but poor. You can do better with imagemagick or graphicsmagick

yours: image PSP (but those tools are even better): image

Now some are ok, looks like

  1. you show both 100x100 and 40x40 thumbs at 100x100
  2. the bigger the original the better the thumb

yours image PSP image

Some if not all thumbs appear more than once (100/40 is clear, but why more?)

/api/v1/image?album=thumbs&image=FZ150/100x100/P1160257.JPG&thumb=100x100 /api/v1/image?album=thumbs&image=FZ150/40x40/P1160257.JPG&thumb=100x100 /api/v1/image?album=thumbs&image=Lumix/100x100/FZ150/P1160257.JPG&thumb=100x100 /api/v1/image?album=thumbs&image=Lumix/40x40/FZ150/P1160257.JPG&thumb=100x100

Ok, so I better remove the Lumix folder manually.

Clicking on a thumb should show the original, of course, not the thumb.

auth should not be listed as album.

jwater7 commented 3 years ago

@kklepper - Thanks for the thoughtful comments. Since this is just a side project I don't have a lot of time to devote to it, but I'd love to see a lot of your suggestions realized and have thought to someday be able to include them in the project (small/incremental contributions are always welcomed):

Just a couple comments on your experience: