A simple, featureless (By design) full-width photo gallery.
A simple, featureless (By design) full-width photo gallery.
/mydir
and the server will statically generate the photos within /photos/mydir
These are my midjourney creations, this website was built for my wedding and as such, real photos look a lot better!
https://user-images.githubusercontent.com/2565465/194875343-54db9659-176b-4d4c-be38-bcee103018d7.mp4
I've honestly not been able to find a simple plug and play photo sharing website for sharing the wedding photos.
My goals were:
I already host a ton of stuff using Caddy so wanted a simple container to route traffic to.
version: "2.4"
services:
thephotogallery:
container_name: thephotogallery
image: inlustra/the-photo-gallery:0.0.4
ports:
- 3000:3000
volumes:
- {YOUR_PHOTOS_DIRECTORY}:/app/public/photos:ro
- {A_STORAGE_LOCATION}:/app/storage
environment:
PAGE_TITLE: 'The Photo Gallery'
PAGE_HEADER_TEXT: 'Inlustra'
PAGE_SHOW_FULLSCREEN_BUTTON: 'true'
PHOTO_SORT: numerical_file_name
PHOTO_DEFAULT_REVERSE: 'false'
restart: unless-stopped
The photo gallery is configured entirely with environment variables:
Environment Variable | Description | Options (default) |
---|---|---|
PAGE_HEADER_TEXT | Text at the top of the screen | string |
PAGE_SHOW_FULLSCREEN_BUTTON | Whether or not the page should have the fullscreen button | boolean |
PAGE_TITLE | Title that appears in the tab in your browser | string |
PHOTO_DEFAULT_REVERSE | Whether the photos should be by default reversed on the page | boolean |
PHOTO_SORT | Sort order for images | numerical_file_name, file_name, modified_at, image_taken_date |
IMAGOR_CLIENT_BASE_URL | The Imagor base url for the client to fetch images, e.g for docker with exposed port: http://localhost:8000/ | _ |
IMAGOR_IMAGE_FILTERS | Any extra image filters to be requested by imagor, must start with: ':', example: ':hue(290):saturation(100)' | string |
IMAGOR_IMAGE_FORMAT | Image format to be requested by Imagor, defaults to webp | jpeg, png, gif, webp, tiff, avif |
IMAGOR_SECRET | Set this if you have set the IMAGOR_SECRET environment variable within imagor | _ |
IMAGOR_SERVER_BASE_URL | The Imagor base url for the container to fetch metadata, e.g for docker: http://imagor:8000/ | * |
NODE_DISABLE_BLUR_GENERATION | Disable the blur generation, will significantly speed up build. Not recommended but required for *very* large directories. | boolean |
NODE_USE_EMBEDDED_THUMBNAILS | During generation, if the photo has an embedded thumbnail, this can be used instead a blur | boolean |
A couple of extra notes:
PHOTO_SORT
:
image_taken_date
: (DEFAULT) Will sort by the date since the photos were taken, this uses EXIF data from the photo (Worth noting that not all images will have this data available)file_name
: Sorts based on file name [a.jpg, b.jpg.... z.jpg]numerical_file_name
: Sorts based on file name using numbers [1.jpg, 2.jpg... 99.jpg], this is particularly useful when your file names are not in a set string format [01.jpg, 02.jpg, 99.jpg]modified_at
: Sort based on the last modification date of the photoPHOTO_USE_EMBEDDED_THUMBNAILS
: This will use the embedded thumbnails instead of generating a blur. Defaults to false, this is not really recomended but might be useful for a smaller amount of larger images. (775 full pictures with this environment variable set to true
caused the initial page download to go from 225kb to 15MB)
As of v0.0.3, we now support Imagor!
Imagor is a self hosted service that we can use to generate images ourselves.
> threshold MB
then delete the oldest within that directory
version: "2.4"
services:
thephotogallery:
container_name: thephotogallery
image: inlustra/the-photo-gallery:0.0.4
ports:
- 2070:3000
volumes:
# - ${BASE_DIR}/favicon.ico:/app/public/favicon.ico:ro # Use this to replace the favicon
- ${BASE_DIR}/public/photos:/app/public/photos:ro
- ${BASE_DIR}/storage/cache:/app/storage
environment:
PAGE_TITLE: "The Photo Gallery"
PAGE_HEADER_TEXT: "Inlustra"
PAGE_SHOW_FULLSCREEN_BUTTON: "false"
PHOTO_DEFAULT_REVERSE: "false"
PHOTO_USE_EMBEDDED_THUMBNAILS: "false"
IMAGOR_SERVER_BASE_URL: "http://imagor:8000" # Uses Imagor internal docker port
IMAGOR_CLIENT_BASE_URL: "http://localhost:4567" # Uses Imagor external docker port
depends_on:
- imagor
restart: unless-stopped
imagor:
image: shumc/imagor:latest
volumes:
- ${BASE_DIR}/public/photos:/mnt/public/photos
- ${BASE_DIR}/storage/imagor:/mnt/result
environment:
PORT: 8000
IMAGOR_UNSAFE: 1 # unsafe URL for testing
# Keep the next 2 the same to ensure that we don't store duplicates of the images within Imagor
FILE_LOADER_BASE_DIR: /mnt/public # enable file loader by specifying base dir
FILE_STORAGE_BASE_DIR: /mnt/public # enable file storage by specifying base dir
FILE_STORAGE_MKDIR_PERMISSION: 0755
FILE_STORAGE_WRITE_PERMISSION: 0666
FILE_RESULT_STORAGE_BASE_DIR: /mnt/result # This is the cache storage folder
FILE_RESULT_STORAGE_MKDIR_PERMISSION: 0755
FILE_RESULT_STORAGE_WRITE_PERMISSION: 0666
ports:
- "4567:8000"