fnareoh / photo2html

Make an album without using any external service. Creates a static page with flexbox.

photo2html

Make an album without using any external service. Creates a static page with flexbox.

Requirements

• Python 3 or 2.7
• ImageMagick
  • brew install imagemagick
  • apt-get install ghostscript imagemagick

Install

Put run.py in the folder containing your photos, then:

python run.py

It will create an index.html page, and a thumb folder containing all thumbnails.

Note. The current version of the code assumes your photos have .jpg extension (not uppercase). If not, please change the glob filter on line 22 of run.py.

Useful links

• A Complete Guide to Flexbox
• Jeffrey Friedl's Image Metadata Viewer
• Two useful Stack Overflow posts:
  • iOS Image Orientation has Strange Behavior
  • Is there a way to tell browsers to honor the jpeg exif orientation?

Long story short: sometimes, images are displayed in landscape instead of portrait in browsers. It is because some phones (ex. iPhone) use the Orientation EXIF metadata, which is ignored by browsers unless you have image-orientation: from-image which is only recognized by Firefox so far.
ImageMagick saved us, by using the flag -auto-orient for creating the thumbnails.

Next steps (please open PRs!)

• Get valid HTML5 code 😇
• Provide a better default flexbox configuration (= tweak the magic numbers so that any phone has at least two columns of pictures)
• Use fancybox. Vanilla JS responsive alternatives are welcome.

Authors

Jill-Jênn Vie & Sam Vie