Flat File creates web galleries from directories of images, video and text files. There's no CMS or admin — just date-based file-naming conventions. Publish your photos with sFTP or rsync.
Built with PHP, Ups-dock, and vanilla CSS/JS.
- Every directory of media becomes an album. Albums are listed and sorted in reverse-chron order on the home page.
- Your high-resolution images get processed into multiple sizes and served as responsive images
- Your videos get processed and served as 720p mp4s.
- Text files become headings
- By default, images/videos are laid out in two columns on laptop and wider screens.
- If there's only one image between headings, it gets a large format treatment.
- A web server with sFTP access
- PHP
- PHP's GD library for image processing
- FFMpeg for video encoding
- Composer
- Install Docker and ups-dock
cd
to yourflat-file
root diretory- Duplicate
www/app/config.example.php
and save aswww/app/config.php
- Run
docker build -t flat-file .
- Run
docker-compose up
- Upload the contents of
/www/
to your server - Duplicate
www/app/config.example.php
and savewww/app/config.php
, and edit this copy with paths and URLs for your server - Set the permissions of
albums
andalbums-processed
to777
- SSH into the server,
cd
to the root directory, and runcomposer install
- Create a new folder locally with a date-based prefix defined in config.php (default is
YYYY-MM-DD-My-Album-Name
) - Export your images using the date-based-prefix. Exiftool and a shell script are useful here if your local photo software doesn't give you enough flexibility.
- Within an album, add text files to serve as headings above a group of photos, using a date-based prefix to position the heading where you want in the alphabetical file sequence. A file named
2020-05-01-Hiking-in-the-alps.txt
will render asHiking in the Alps
right before images and videos prefixed with2020-05-01-
... You can also add secondary text in the contents of the text file. - Visit your site, click the album, and wait for media processing to complete. Subsequent page views will be much faster.
- rsync is a great way to sync local albums with your server. To push new photos up and delete anything on the remote server that's local, while preserving file permissions, use something like
rsync -apzP --delete --filter=":- .gitignore" ~/Sites/flat-file/www/albums/ user@123.456.789:/var/www/photos.example.com/html/albums/
- Basic responsive layout and styles
- Image processing with GD library
- Video processing (to 720p mp4) with PHP-FFMPEG
- Parse Date-prefixed albums for date and title
- Parse Date-prefixed text files and output as headings
- Native responsive images (
srcset
andsizes
) - Native lazyloading with
loading=lazy
- Separate asset processing from display code and run asynchronously ()
- Improve display of headings on mobile
- Add UI to step through albums from album view (done as dropdown)
- Honor non-16×9 video aspect ratios when processing
- On click, show enlarged images and video (with audio on) in a modal
- Modal lightbox: add photo date, fix tab focus behavior, add
max-height: 100vh
- In album view, add correct
<title>
and other helpful meta tags. - Enhance index page: thumbnails?
- Option to use EXIF data for sorting media by date?
- Option to hide album listing and just show most recent album as the index page