APP: Online Gallery Creator... with FTP!

Started by Jingo, September 20, 2019, 11:46:06 PM

Previous topic - Next topic

Jingo

    Hi All... I've been tinkering with the idea of a gallery app for IMatch for awhile now and finally had the time to get one up and running.  My goal for the app was to

    • Create a selection of images in IMatch
    • Build a subdirectory on my drive with those images
    • FTP that subdirectory of images to my server
    • Use open source gallery software to auto-build a gallery with albums by subdirectory

    I'm happy to report that I have pulled all the pieces together for such an app and it appears to be working quite well (surprisingly!) after some beta testing.  I want to add a few more "features" before releasing it to the wild... but hopefully by this weekend, I'll share the app.

    There is some setup that needs to be done on the "backend" such as setting up the open source gallery software on your server (simple upload of the code), installing the freeware WINSCP FTP software (used for its amazing command line ability) and modifying a .bat file script that does the heavy lifting of connecting via FTP to your server and uploading your exported gallery.

    Some screenshots to show how things currently look:

    App Interface (may change if I can get some time to learn Vue instead of JQuery):




The all important APP ICON  :-) 




A sample Gallery I created on my web host via the APP:




A subAlbum off the main album page...



Some ideas I have to work on....
 

  • allowing you to list the galleries (folders) on your webhost so the files don't need to remain local to add to existing galleries
  • a method to keep track of which images have been uploaded and which galleries they are in (visual display in IMatch perhaps)
  • Vue implementation (I really need to learn how to use it as the apps look so much better!!)
  • passing through metadata such as description and keyword info to the album script for display online
  • integrating FTP server username/password into IMatch so it isn't just sitting in the open .bat file

This was a fun project and I learned a great deal along the way.... so, hopefully even if you have no interest in running an online gallery, the code (with generous commenting of course) might be helpful to others.

Stay tuned!! - Andy.
[/list]

Mario

-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

sinus

Cool, what can be done with scripting!
Congratulations, Jingo, does look great.  :)
Best wishes from Switzerland! :-)
Markus

Jingo

Thx Markus... that ability use industry standard code and open source software from within IM is a huge achievement.... it allows for all sorts of neat ways to interact with the database since Mario has provided such fantastic endpoints. 

I'm still tweaking this a bit but should have it up soon... Thx - Andy!

Jingo

COMING SOON... still making a few last minute edits...  ;D 8)


Jingo

#5
Ok... I'm done with Version 1 of this APP so figured now is the time to share it and let others provide feedback/Test (or ignore!) while I made some further enhancements to Version #2!  So, I proudly present to you... The Gallery Creator!

As mentioned in the posts above, this app will allow you to create an online gallery from images within your database.. either for viewing locally on your machine (with proper server setup) or for one click upload to your hosting service...  in order the make the magic happen, there are a few setup items to do ahead of time [only once].

FIRST:
  Download and install WinSCP [freeware] (https://winscp.net/eng/index.php).  WinSCP is a complete FTP solution that provides an easy interface... but most importantly, a robust command line which we will leverage to perform folder uploads from within the APP!

SECOND:
  Setup the nangallery2 gallery on your host (https://nanogallery2.nanostudio.org/).  Nanogallery2 is a freeware javascript library which allows you to build galleries of images.  Install instructions are located on their website but only takes a few steps.

THIRD:
  Setup the nanoPhotosProvider2 php script on your host (https://nanophotosprovider2.nanostudio.org/).  nanoPhotoProvider2 is a free php script that publishes photos automatically to the nanogallery. Once again, easy to setup with a few steps.

FORTH:
  Write down your FTP login info... You will need to know your: Hostname, FTP Username, FTP Password and the URL where you setup NanoGallery.  The FTP info should take you directly to the remote directory where the Nanophotosprovider2 content is located.


Once all these steps are complete, you should now have a gallery located on your host that you can navigate to and see the sample images (ie: www.mysite.com/gallery)!

Step 1 is to fill out your FTP Server login info in order to utilize the FTP feature.  Note, this only needs to be done the first time and then any time changes are made to your FTP info (rare - but if you change your FTP password for example). Once you have added the information, click the File Credentials button.  You can show/hide the credentials using the Show/Hide Button.  Once this is complete, you are ready to move on to Step 2.



Step 2 presents you with 2 options... you can either create a new album (folder) with the selected images or add the selected images to an existing album (folder).  The first time, you'll want to create a new album.  Select your images, enter an album name and click the Create New Album button <i>(the results box will show success and error information)</i>.  This will create a subfolder with your images in a C:\Gallery_Temp folder.

You can also add selected images to an existing Album by clicking the Choose Existing Album Button whcih will allow you to select an existing subfolder to add images to.




Step 3
allows you to FTP an album of images to your gallery.  This is done by clicking the FTP Files Button... if your credentials and items are setup correctly, the ftp.bat script will get called and your selected folder will be added to your gallery.  You can now click the Launch Gallery Website button to open a new browser tab and see your gallery! 



Rinse and Repeat Steps 2 and 3 to build out a fully functional gallery with albums and images!!



There are a few items I would like to see if I can accomplish in Version 2 to make this even better:
 
  • a user definable Gallery Location on your local system
  • an option to include some basic metadata into the gallery for each image file (description/keywords)
  • an attribute or other database element to tracks images that have been added to the gallery and the album they are located in
  • the ability to create sub-albums
  • the ability to upload multiple folders
  • being able to remove images from the gallery

In any event... I do hope this is useful to the community... I am using this currently for my family album and it works quite well.  It is lightweight and relatively fast once the thumbnails and images have been processed on the server.  I'm happy to help anyone that is having trouble with the initial setup so please just send me a PM or respond to this string... always happy to help!

To install, just unzip the attached Gallery.zip file and place the app folder into your C:\ProgramData\photools.com\imatch6\webroot\user path.  The app will appear in the app manager and can also be used from the browser.  As always.. use with caution... I've tested it and use it.. but what works for me might not work for you. 

And.. finally.. Enjoy!   8)

Jingo

No downloads of the zip file yet (except my own!) but I suppose not everyone checks the APP board regularly like I do... or perhaps - no one is interested (or I scared you off with the 4 step setup..  :P )

In any event - I realized I didn't include the subfolder in the zip file and that is important because it has to be named "Gallery" in order for the FTP function to work ... (ask me how I know that!?  DOH!).....

I added a NEW Gallery.zip to this thread that includes the subfolder - but... if anyone chooses the other zip file instead, just be sure to:
Extract the Gallery.zip file to: C:\ProgramData\photools.com\imatch6\webroot\user\Gallery

BTW: I just used the App to create a mini gallery for a local skating club..... selected about 300 images in total from my database (~30 images per album), create the albums, ftp the albums to host...  voila... instant online gallery with 10 albums for the group to view... they can download the images and/or share the gallery with family and friends.  All done from Imatch and the App.... another example of the power of IMatch and the JS scripting ability Mario provided!!

Thx Mario!

sinus

Hey Jingo
Although I think, at the moment I have no use for your app (I am about to set up in the next few weeks a new homepage with integrated galleries and slideshows, based on wordpress), I want to thank you for your effort!  :D
It's really not self-evident that someone puts so much work into an app that comes out so great and then puts everything online for download!
A big thank you from my side, by the way also for your other apps (I use Fancy Search quite often).
Thanks, Andy!

Best wishes from Switzerland! :-)
Markus

Jingo

Thanks Markus... always happy to create and share to extend the functionality of the product.  The actual base code for the Gallery app can be used for any gallery.... the folder export from selected image is useful in your case and from there you can just FTP the images using the Wordpress gallery location... you can probably even modify the app to FTP to the exact place your gallery will look for the image folders!

Glad Fancy Search is useful for you... I too use it a lot and am quite pleased with that one!

Thx again - Andy.

Jingo

#9
Hi All... me again with an updated version of the APP which includes new functionality which I think is quite nice! 

First up - we have the new Synchronization and Album List functions:




The Album List currently just provides a list of albums on your remote server.  This info currently shows in the results box but I am trying to come up with a way to export it to a drop down list... eventually, this drop down will be used to seed the Existing Album button.

The Synchronization feature lets you keep your local and remote albums in sync... and solves the problem of uploading multiple albums at once.  When you press the syncho button, your remote folders and your local folders will be reviewed and images/folders uploaded and downloaded so they match 100% at the end of the day... pretty neat!

The final tweak is the new APP-Gallery attribute set.  The Attribute set gets built the first time you run the app and create a number of attribute fields for gallery tracking:




Each time an image is added to a new or existing gallery, the attribute set is updated with information so you can keep track of which images you have uploaded to albums.  In the near future, I am going to try and create an option so users can see which images were setup for a specific album and show those images in a result window.... I just need to figure out how to create the album list first or use the attributes themselves!

Anyway... I hope these changes prove useful to someone.. I am using this APP daily to update my family album so features will continue to be added as I discover possibilities....  Please just overwrite the files in your user apps folder with the new zip attached.  Enjoy!Enjoy!

lbo

thanks for this script. Although I use Piwigo and some "historic" mangling and preprocessing Perl scripts, it's very interesting to learn about IMatch JS programming.

Quote from: Jingo on October 06, 2019, 04:48:27 PM
  Setup the nangallery2 gallery on your host (https://nanogallery2.nanostudio.org/).  Nanogallery2 is a freeware javascript library which allows you to build galleries of images.  Install instructions are located on their website but only takes a few steps.

I'm somewhat confused about the "license" of nanogallery:

Dual licenced:
- GPLv3 for personal or open source projects with GPLv3 license
- Commercial license for use in a revenue-generating product


This is somewhat vague but it might me interpreted in a way that nanogallery2 can't be used for free to present photos commercially or even if you have ads on the page.

Jingo

Quote from: lbo on March 25, 2020, 04:36:07 PM
thanks for this script. Although I use Piwigo and some "historic" mangling and preprocessing Perl scripts, it's very interesting to learn about IMatch JS programming.


I'm somewhat confused about the "license" of nanogallery:

Dual licenced:
- GPLv3 for personal or open source projects with GPLv3 license
- Commercial license for use in a revenue-generating product


This is somewhat vague but it might me interpreted in a way that nanogallery2 can't be used for free to present photos commercially or even if you have ads on the page.

Sure thing... hope you enjoy the code and can integrate it to be used with Piwigo perhaps... I used Piwigo for a time as well and enjoyed it's flexibility...

You could very well be interpreting the license correctly... since I'm only using it for home use, I didn't look into the commercial side of things... I would imagine many companies place restrictions like that in place to at least attempt to generate some revenue for their hard work while still making their code available for free.. a win-win for all really.

Enjoy!

sinus

Jingo,

just to be sure:

I HAVE to choose this app for a webhost, means, I cannot use it localy (to store the files simply on a folder on my PC, where I could look at the gallery local (not over the web)).

I think, I have to use a FTP-Host, but I want to be sure (localy would be easy to test  ;D)

Glad, that your own app works that good for you, your family will like it.  :)
Best wishes from Switzerland! :-)
Markus

Kucera

QuoteNo downloads of the zip file yet (except my own!)
Don't think it will be wasted! Though I am not ready to upload any gallery at the moment, it is great to know the app is there, and I am sure that I am not the only one who is very grateful for your work on it. Keep up the good work!
Regards  Emil

Jingo

Quote from: sinus on March 26, 2020, 02:21:18 PM
Jingo,

just to be sure:

I HAVE to choose this app for a webhost, means, I cannot use it localy (to store the files simply on a folder on my PC, where I could look at the gallery local (not over the web)).

I think, I have to use a FTP-Host, but I want to be sure (localy would be easy to test  ;D)

Glad, that your own app works that good for you, your family will like it.  :)

Hi Markus - I believe you can setup the gallery locally but would need a PHP server type system setup... like WAMP or XAMP.  Or, you can try some of the "free" web hosting sites out there just to play around... Profreehost might be legit?

Jingo

Quote from: Kucera on March 26, 2020, 04:58:44 PM
QuoteNo downloads of the zip file yet (except my own!)
Don't think it will be wasted! Though I am not ready to upload any gallery at the moment, it is great to know the app is there, and I am sure that I am not the only one who is very grateful for your work on it. Keep up the good work!
Regards  Emil

Thx Emil - I generally write these APPs to either fill a need from a user or just for the fun of flexing my programming skills and learning new things.... in this case, I was able to accomplish many things and I'm thrilled with the results.  There are probably better lightbox style galleries out there but this one suited my needs quite well.  Thx for the kind words! - Andy.

sinus

Quote from: Jingo on March 26, 2020, 09:31:08 PM
Quote from: sinus on March 26, 2020, 02:21:18 PM
Jingo,

just to be sure:

I HAVE to choose this app for a webhost, means, I cannot use it localy (to store the files simply on a folder on my PC, where I could look at the gallery local (not over the web)).

I think, I have to use a FTP-Host, but I want to be sure (localy would be easy to test  ;D)

Glad, that your own app works that good for you, your family will like it.  :)

Hi Markus - I believe you can setup the gallery locally but would need a PHP server type system setup... like WAMP or XAMP.  Or, you can try some of the "free" web hosting sites out there just to play around... Profreehost might be legit?

Thanks, Andy
Hm, I have to think about this all.
As you know (I think), for me it would be best, I select some pics, push a button  :D and get a folder with the images and maybe a html-file.
Then I put this on a stick and can show them, where I want (could also upload it somewhere).

You have mentioned several times, that your system is fine for you and your family and that is great! Really well done.

Let's look, maybe I will have also a solution this year  :D
Best wishes from Switzerland! :-)
Markus

lbo

Quote from: Jingo on March 26, 2020, 02:13:09 PM
Sure thing... hope you enjoy the code and can integrate it to be used with Piwigo perhaps...

This is on my schedule, and if I ever find the time, your apps will give me a good starting point.

Thanks for sharing your code!

Oliver

Jingo

Quote from: sinus on March 27, 2020, 08:49:24 AM

As you know (I think), for me it would be best, I select some pics, push a button  :D and get a folder with the images and maybe a html-file.
Then I put this on a stick and can show them, where I want (could also upload it somewhere).


You can actually do this quite easily with some "normal" http galleries that build locally... like HTTPhotos.  You can just export your photos to a subfolder using the Batch Processor and then run HTTPhotos locally... you can copy the entire HTTPhotos directly to a USB drive and it becomes a standalone gallery of the images within.   

My APP makes it easier for the gallery software that I use and lets you get your images from Imatch and online to the gallery all from the app.. but it may be more than you need.

Aubrey

Wow, this is great. I missed this when originally published.
Nano gallery does all I need, much lighter than WordPress.

Downloading files from IMatch without issue.
I'm having some problems with ftp, I'll figure it out tomorrow. I use sftp  and non standard port together with public/private key generated with putty.

The html and scripts are easy to follow. Clear comments.

Thank you for writing.
Aubrey

Jingo

My pleasure Aubrey - I love this little app and use it often.  If I can help with the sftp issues - just let me know.  The command line parameters for winscp should let you pass in the type of connection as well as port # so hopefully that helps.

mastodon

Would be a free Freehosting account good for a small project (Gb of images)?

Aubrey

Quote from: mastodon on May 23, 2022, 12:18:20 AM
Would be a free Freehosting account good for a small project (Gb of images)?

I use https://www.freenom.com/en/index.html?lang=en
To get website - their extensions are tk, ml etc.

Note: Free hosting will not allow these name extensions - they would like you to buy a domain name.

I also use https://freedns.afraid.org, my internet provider changes my ip address from time to time. I run a Linux script to check if it has changed and then send message to freedns to keep domain name and ip address in sync. I need to use name servers in freenom set up. (NS1.AFRAID.ORG)

If you are interested I can give more detailed assistance - email me!

Aubrey.

Aubrey

Quote from: Jingo on May 22, 2022, 10:05:18 PM
The command line parameters for winscp should let you pass in the type of connection as well as port # so hopefully that helps.

Hi Andy,
I've got the sftp working nicely.
The "/command" of WINscp was giving me issues with"-hostkey" and "-privatekey" so I rewrote the ftp to create another script which is then called from within ftp.bat.

It was a bit of an effort to get the -hostkey and -privatekey working. I sorted this by interrogating winscp using iformation in : https://winscp.net/eng/docs/ui_generateurl when doing a manual ftp using the GUI.

I may well modify your html to add port number and perhaps out directory. Currently it is hard wired; more than adequate for my needs. (I should probably add -hostkey and -privatekey parameters too)

BTW When I installed WINscp I asked it to include path in the environmental variable, so I don't need full path to winscp.com.

Attached is my ftp.bat  - keys modified!!

My only issue is that on my rasperrypi Linux (apache)  the "put" folder does not get saved with the correct user and group it should be www-data:www-data. It get saved with the username of the account I'm using. This means that
nano_photos_provider2 cannot create thumbnails.

Currently changing ownership to www-data:www-data manually as I am concerned about security issues.

Aubrey