Skip to content

Latest commit

 

History

History
79 lines (45 loc) · 2.26 KB

README.md

File metadata and controls

79 lines (45 loc) · 2.26 KB
Raw

Cartier logo

Exhibit your best photographs.

📷 DEMO 📷

Features

  • More focus, less clutter on your best photographs
  • Fast load times by using image processing and asset bundling best practices
  • Optimized for mobile devices
  • Optimized for ultra-high-resolution displays
  • Keyboard navigation

Instructions below are work-in-progress and incomplete

Prerequisites

Please install below before proceeding to Quick Start. Examples are given for OS X via Homebrew:

  • Node.js via brew install node
  • exiv2 via brew install exiv2
  • libvips built with mozjpeg and webp:
    • brew tap homebrew/science
    • brew install vips --with-mozjpeg --with-webp

Quick Start

  • git clone this repo
  • npm install
  • Drop your high-resolution photos into photos directory
  • gulp photos to process your photos and generate data.json file that feeds your website
  • npm run prod to generate your website
  • Serve build directory locally or upload it to your web host

Prepare Your Photo

Metadata

Tagging in Lightroom:

Tagging in Lightroom

Tag references

If you use Lightroom, I recommend Jeffrey Friedl's Metadata Wrangler plugin to export exactly what's needed for Cartier.

Result:

Tagging output

Customize

  • Modify Property Info section in app/data/constant.js for your preferred website title etc.

Individual Processing Commands

gulp _metadata extract metadata from photos and dump into assets/data.json

  • --env development writes each image's full metadata into json files, logs actual colors extracted
  • --glob process specific files based on the given globbing pattern
    • Default "./photos/*full*.jpg"
    • Example of processing an individual photo "./photos/yellowstone.jpg"

...

FAQ

Why "Cartier"?

The name pays homage to Henri Cartier-Bresson.