clarkadisney / photoslog

A simple page to show a log of your photos.

Demo

http://travel.michaelvillar.com

Usage

Photos

Create a data folder: this is where your photos will live.

For each group of photos, create a folder (i.e. "sanfrancisco") and add your photos in it.

Finally, create a info.json into that folder with this format:

{
  "name": "San Francisco",
  "date": "2015-01-01",
  "images": [
    {
      "file": "1.jpg",
      "type": "full"
    },
    {
      "file": "2.jpg",
      "type": "row"
    },
    {
      "file": "3.jpg",
      "type": "row"
    }
  ]
}

This is how the file hierarchy should look like:

Test it locally

Install the necessary packages:

brew install imagemagick
npm install

Then run the script to prepare your photos -- this can take a while. It will resize your photos and create a global info.json required for the app. These will be saved into public/data/.

./scripts/prepare.coffee

Finally, compile the app and run it!

./scripts/compile.coffee
coffee web.coffee

Open http://localhost:8000/ in your browser.

Deploy it

For the sake of simplicity, we'll use Heroku.

heroku apps:create
git push heroku master

Then, you need to upload your photos on a server. Amazon S3 is an option. Upload the whole public/data folder which has been generated by ./scripts/prepare.coffee. Tell the app where your photos live:

heroku config:set IMAGES_ROOT_PATH="http://example.com/folder/"

You can also change the page title:

heroku config:set PAGE_TITLE="Michael Villar - Travel Log"