Visit live demo at https://demo-gallery.aniskov.com/ Sign in there using user name user, and password password.

Upon signing in you will see following starting page.

The figure above shows so called browse mode when you see thumbnails of images and navigate folders.

Click subfolder tile to jump to content of the folder.

When you're in a subfolder you see arrow tile which will navigate you back to parent folder.

Click image thumbnail tile to start viewing photos full-screen.

While it is in full-screen image viewing mode use keyboard keys Arrow Left/Right/Up/Down, Page Up/Down, Space, and Enter, or swipe left/right on touch screen devices, to navigate forth and back through the gallery.

Click right mouse button, or long tap touch screen, to pop up context menu.

Use context menu to switch back to browse mode or sign out.

1. Optional. Decide on public domain name for gallery's web UI. If omitted, gallery is accessible at CloudFront provided domain name cloudfront.net

2. Optional. Create an ACM public certificate for the domain name. See AWS Certificate Manager User Guide

3. Decide on S3 bucket where you store your image files. That can be any existing bucket, or you create a new one. Optionally you provide prefix (path) which will make the application to filter non-matching files out.

4. Create CloudFront key pair to be used for signing cookies. Download private key file and make a note of id of the pair.

Click this link to open the application in AWS Serverless Application Repository console.

In the console's top menu select region.

Scroll down to Application settings. Fill in settings.

Scroll down to find Deploy button. Click it.

1. Pay attention that stack you created got prefix serverlessrepo- to its name automatically.
   Create SSM parameter of Secure String type with name /stack-name/CLOUDFRONT_PRIVATE_KEY replacing stack-name with your value, e.g. serverlessrepo-photo-galery.
   Set its value to CloudFront private key (see Prerequisites) preserving newline characters. You can do that with following AWS CLI command (don't forget to replace stack-name!)

aws ssm put-parameter --type SecureString --name /stack-name/CLOUDFRONT_PRIVATE_KEY --value file:https://private_key.pem

2. The application leverages awesome Serverless Image Handler by AWS which by default is configured to send usage data to AWS. In case you don't want posting such data to AWS, open AWS Lambda Console, find ServerlessImage-ImageHandlerFunction function, open it for editing, go to Environment variables, and set SEND_ANONYMOUS_DATA to No.

3. Optional. If you chose to use a custom public domain name, find stack in CloudFormation console, on its Output tab find CloudFrontDistributionDomainName. Configure your DNS to point domain name you chose to that.

4. Find stack in CloudFormation console. On its Output tab find GalleryUrl.

5. Optional. Use Amazon Cognito Console to administer your users. User database is in Cognito User Pool. Find your User Pool id among CloudFormation stack's outputs.

This works uses AWS Serverless Image Handler Lambda wrapper for SharpJS.

Demo gallery uses images by Free-Photos, Albert Dezetter, engin akyurt, Michelle Maria, Jon Toy, Peter Vandecaveye from Pixabay.

Copyright 2019-2020 Maksim Aniskov [email protected] Read LICENSE.txt