2014-04-17 11:26:18 +00:00
# thumbsup
2014-06-10 02:53:06 +00:00
Build static HTML galleries from local photos & videos.
2014-04-17 11:26:18 +00:00
2014-06-10 02:53:06 +00:00
- thumbnails & multiple resolutions for fast previews
2014-04-21 09:39:48 +00:00
- only rebuilds changed files: it's fast!
2014-06-10 02:53:06 +00:00
- supports custom styles
2014-04-17 11:26:18 +00:00
- uses relative paths so you can deploy the pages anywhere
- works great with Amazon S3 for static hosting
2014-06-10 02:53:06 +00:00
[Sample website ](rprieto.github.io/thumbsup )
[![screenshot ](https://raw.github.com/rprieto/thumbsup/master/screenshot.jpg )](http://rprieto.github.io/thumbsup)
2014-04-17 11:26:18 +00:00
## Requirements
- [Node.js ](http://nodejs.org/ ): `brew install Node`
- [GraphicsMagick ](http://www.graphicsmagick.org/ ): `brew install graphicsmagick`
2014-04-19 07:49:24 +00:00
- [FFmpeg ](http://www.ffmpeg.org/ ): `brew install ffmpeg`
2014-04-17 11:26:18 +00:00
2014-04-22 09:27:07 +00:00
[![NPM ](https://nodei.co/npm/thumbsup.png )](https://www.npmjs.org/package/thumbsup)
2014-04-17 11:26:18 +00:00
## Input
2014-06-10 02:53:06 +00:00
Any folder with photos and videos. `thumbsup` currently supports 1 level of subfolders, where they each become a gallery.
2014-04-17 11:26:18 +00:00
```
input
|
|__ paris
| |__ img001.jpg
| |__ img002.jpg
|
|__ sydney
|__ vid001.mp4
|__ img003.png
```
## Generating the galleries
```
thumbsup < args >
```
The following args are required:
- `--input <path>` path to the folder with photos / videos
- `--output <path>` target output folder
And you can optionally specify:
2014-04-21 14:13:47 +00:00
- `--title [text]` website title (default "Photo gallery")
- `--thumb-size [pixels]` thumbnail image size (default 120)
- `--large-size [pixels]` fullscreen image size (default 1000)
- `--css [file]` styles to be applied on top of the default theme (default none)
2014-04-17 11:26:18 +00:00
For example:
```bash
2014-04-21 14:13:47 +00:00
thumbsup --input "/media/photos" --output "./website" --title "My holidays" --thumb-size 200 --large-size 1500 --css "./custom.css"
2014-04-21 09:39:48 +00:00
```
## Website structure
The generated static website has the following structure:
```
website
|__ index.html
|__ sydney.html
|__ paris.html
|__ public
|__ media
| |__ original
| |__ large
| |__ thumbs
2014-04-17 11:26:18 +00:00
```
## Deployment
The simplest is to deploy the media and generated pages to S3 buckets on AWS using the [AWS CLI tools ](http://aws.amazon.com/cli/ ).
2014-04-21 09:39:48 +00:00
- `aws s3 sync ./generated/website s3://my.website.bucket --delete`
2014-04-17 11:26:18 +00:00
## Password protection
Amazon S3 buckets do not offer any type of authentication. However you can choose to deploy to another web server that offers password protection, such as HTTP Basic Auth.
An alternative is to deploy the galleries to UUID-based locations, like Dropbox shared galleries.
## Dev notes
To create the sample gallery locally:
```
npm run example
```
2014-05-19 12:26:08 +00:00
This should output something like
```
Static website [===================] done
Original media [===================] 6/6 files
Photos (large) [===================] 5/5 files
Photos (thumbs) [===================] 5/5 files
Videos (web) [===================] 1/1 files
Videos (poster) [===================] 1/1 files
Videos (thumbs) [===================] 1/1 files
Gallery generated successfully
```