
Show HN: Exposé – a static site generator for photos and videos - Jack000
https://github.com/Jack000/Expose
======
Jack000
so this is just a bit of glue code for imagemagick/ffmpeg that I use to
generate my blog.

Last time I was on HN there was some interest in what I was using for the
backend, so I cleaned up the code a bit and put it on github

~~~
pingec
Out of curiosity, what kind of photography equipment was used for these photos
and videos? They are really nice.

~~~
Jack000
I was using a panasonic GX7 with the kit lens and 20mm 1.7 prime, and a few
random vintage lenses. I'm glad you enjoyed it :]

~~~
Nadya
I see that camera toted by a lot of photographers after I go "Oh wow, these
photos look great!"

As much as it's the artist over the tool - I think I'm going to invest in this
camera as my next step into photography. I've seen nothing but praise for the
GX7.

~~~
micampe
I suggest you also get the mentioned Lumix 20mm lens with it: it’s simply a
beautiful lens, even compared to more expensive ones. Its only downside is a
not exactly state of the art focus speed, but it’s manageable, especially if
you plan to do this type of travel photography.

~~~
Nadya
I was actually planning on that, seeing as I have little knowledge of lens
other than the lens matters as much if not more than the camera used.

Figure if I like the output I may as well invest in similar tools and
practice. :) (Unless most of those photos are w/ the vintage lens that went
unnamed...)

~~~
Jack000
I didn't use the vintage lenses all that much, autofocus and zoom is just much
more convenient. Also on the web 4k is pretty much the max viewable
resolution. Camera lenses are designed for the sensor resolution which is
typically 2-4x that amount, so lens quality almost doesn't matter for pictures
viewed on the web.

I chose the GX7 because it's really small and light with decent image quality.
If I were getting started now I'd be taking a serious look at the sony A7 M1.

~~~
Nadya
It sounds like you mixed up two cameras? The Olymus E-M1 and the Sony A7.

[http://www.imaging-
resource.com/cameras/olympus/e-m1/vs/sony...](http://www.imaging-
resource.com/cameras/olympus/e-m1/vs/sony/a7-ii/)

~~~
Jack000
the em1 is probably more comparable to the gx7, but now that the A7ii is out
the original A7 is a lot more affordable. I do miss the eshutter though.

------
eric-hu
This looks amazing. Thank you for generalizing this and open sourcing it.

For anyone looking to use the polygon word wrap feature as in the demo on the
Github page with the Eiffel Tower, take a look at its responsive behavior
before you make that post. As you shrink the window down on jack.ventures,
some text can be cut off, or no longer show up on a clear portion of the image
like a wall.

This isn't a bug with the software so much as a flaw with the magazine "words
on image clearing" style layout that doesn't translate perfectly to the web
medium.

~~~
Jack000
I should probably add a redraw on window resize. Right now it does that
polygon stuff once on page load.

So if you resize the window and reload the page it should fit everything
correctly again.

~~~
eric-hu
You may want to consider CSS breakpoints. They'll do that automatically
without the page refresh, assuming the content layout is done using CSS
already.

A rough design pattern I've seen is Desktop resolutions: use layout in terms
percent. For instance: left side of text begins at 50% of image width.

Tablet and mobile resolutions: fixed layouts for each resolution supported.

If you're doing the polygon containment using javascript, I imagine
implementing such behavior might get really complex.

~~~
Jack000
could do with some CSS media queries. Right now I'm using a javascript
calculation for font size to avoid the discrete steps in CSS breakpoints. I
figured you don't see anything without javascript anyways so might as well go
all the way.

My philosophy for mobile resolutions is to just deliver the desktop
experience. The text will be tiny yes, but you can just pinch to zoom. Sites
that lock down the zoom kind of annoy me personally so that's why I did it
that way.

The second theme does have media queries for mobile sizes though, since it
doesn't rely on the text being in a particular spot to be readable.

------
superic
Beautiful work and amazing photography!

Interested in making things at Flickr? Drop me a line at eric at flickr.com :)

------
ausjke
really cool and I also learned a new way to check dependencies under bash:

command -v convert >/dev/null 2>&1 || { echo "ImageMagick is a required
dependency, aborting..." >&2; exit 1; }

------
bobfunk
Added it to staticgen.com now - love these small non-general purpose static
gens :)

Reminds me of ThumnsUp:
[https://github.com/rprieto/thumbsup](https://github.com/rprieto/thumbsup)

------
mlapeter
This is really great! Is it open source? I couldn't see a license or anything
in the readme so wasn't sure.

~~~
Jack000
oops, thought I'd picked a license when I started the repo.

just added MIT license.txt

------
mettamage
Got a question: for fun I did this over about 400 to 500 photos. I partially
did it also to stress test it. But the HTML file is empty. Did I do something
wrong? The rest of the folders are there.

Here is the output if someone is interested to brainstorm about this problem.
I edited the output a bit to make it slightly more readable.

<begin output>

Scanning directories.

Populating nav.

Reading files...........................

................................

................................

............................................

<some_conversion_errors_b/c_of_corrupted_file_ommited>

..............................................................

..............................................................

..............................................................

..............................................................

..............................................................

.........................

Building

HTML..........................................................

..............................................................

..............................................................

..............................................................

..............................................................

..............................................................

..............................................................

................................................/Users/my_user

_name/Downloads/Expose-master/expose.sh: line 139:

/usr/bin/sed: Argument list too long

Starting encode

fotos0001

fotos0002

fotos0003

...

<huge_error_of_same_corrupted_image_omitted>

...

fotos0489

fotos0490

fotos0491

</end output>

Anyways, I checked the image which was indeed corrupted, so ImageMagick was
right on the money on that one. I still don't get it though why there's no
HTML in the HTML file.

~~~
brazzledazzle
>/usr/bin/sed: Argument list too long

Maybe all of the filenames are passed as a single argument to sed?

~~~
mettamage
I do have reasons to believe this is the error. Currently I tested it with 10
photo's (corrupted image removed), 200, 100, 150 and now I'm doing 190 (note:
numbers are a ball park estimate).

Interestingly, 200 didn't work, but it also gave the
"/Users/mettamage/Downloads/Expose-master/expose.sh: line 139: /usr/bin/sed:
Argument list too long" error, while the others did not.

Edit: tested out all combinations. Argument list too long is indeed the error.

I got this with 188 pictures: Scanning directories. Populating nav. Reading
files.........................................................................................................................................................................................
Building
HTML........................................................................................................................................................................................
Starting encode fotos0001 fotos0002 .. etc.

And I got this with 189 pictures.

Scanning directories. Populating nav. Reading
files..........................................................................................................................................................................................
Building
HTML........................................................................................................................................................................................./Users/mettamage/Downloads/Expose-
master/expose.sh: line 139: /usr/bin/sed: Argument list too long

Starting encode fotos0001 fotos0002 ... etc.

xargs it is!

~~~
Jack000
added a patch that should resolve this. Is it working for you now?

------
cataflam
This looks amazing.

I was using a tool one of my friends made, with a similar idea, just put
images and videos in directories and have a script automatically generate a
nice output. It can be found at [https://github.com/jlaine/django-
coconuts](https://github.com/jlaine/django-coconuts), but yours looks
spectacular. I'm tempted to switch.

------
3stripe
Lovely. Would be swell if you could plug it straight into a Dropbox folder.

------
callmeed
This is very cool. Love that its just a shell script.

In a similar vein, I have a Jekyll plugin that reads folders of images and can
create galleries: [https://github.com/callmeed/jekyll-image-
set](https://github.com/callmeed/jekyll-image-set)

Nice that you have video support. Can't wait to give this a try.

------
raimue
Thank you very much!

I appreciate the use of simple bash shell script instead of a scripting
language with lots of runtime dependencies.

------
desireco42
Thank you, this is exactly what I was looking for (actually thinking how to
cobble up together myself). So I guess I am target audience :)

I want to add that sites look awesome and this is perfect for large number of
people, I just want to thank you one more time for making this, it is also
excellent starting point for photo sites.

~~~
lucb1e
> actually thinking how to cobble up together myself

Same here, it has been floating around my mind for a couple of weeks now and
then this shows up :)

------
anderspitman
Very cool. Somewhat off topic: I've been looking recently for a good way to
host many GBs of photos and videos for my friends and family to browse and
download. Basically an open source version of Google Drive's file browser,
with thumbnails and image and video previews. Any suggestions?

------
nathancahill
Phenomenal. I've bounced between Tumblr/Wordpress with photoblog themes,
Flickr, 500px and Instagram for sharing my film photography with friends. This
is better than all of those, especially with the captioning.

Since most of my photographs are organized by trip or theme, this is perfect.

------
lemming
This is really nice! Getting photos and especially video online in an easy way
but still have it be beautiful has been really tricky. I'll definitely use
this.

------
hobonumber1
This looks cool. Is there a demo link that I can check out?

~~~
stevesearer
I think the link in the post to [http://jack.ventures/](http://jack.ventures/)
is a demo.

~~~
awfullyjohn
It looks like he originally built the site for himself (it made HN awhile
back) and then generalized and open sourced it for everyone.

------
lucaspottersky
i like the results. now, it would be very useful to have a friendly GUI to
edit those things and generate the YML files for you.

------
falcolas
Given that it's a static site, why the JS requirement? Most browsers already
intelligently handle keeping the "right" number of assets in memory, do you
believe your JavaScript handles it better?

Also, it's not at all responsive to different viewport sizes; this might be a
good thing to address.

EDIT: Oof, that's a kick in the karma. Aah, well.

~~~
Jack000
I'd actually agree that most static sites shouldn't require js. For image
galleries though it really needs the lazy loading to save bandwidth imo.

Also it's "sort of" responsive, it just doesn't handle window resize right
now. I didn't think that was an important use case, but now multiple people
have pointed it out so I'll add it.

------
jaza
Nice work. I guess that for a sitegen so focused on photos and videos, a bash
script works well - lets you do whatever you need directly with imagemagick
and ffmpeg, no beating around the bush.

And I like your sites! Now... all I need is to be a better photographer, then
I'd be able to actually create something nice with your script. Hahaha.

------
thieving_magpie
I didn't know that I needed this, but now that I know it exists I really need
this. Awesome job, thank you.

------
giancarlostoro
Would be cool if you could do something similar to this with git repositories
as well... Hmmm..

------
marcfowler
This looks amazing - really great work. I'll definitely check this out
properly.

------
areohbe
This is wonderful. Superb work.

------
dyogenez
This is seriously cool! I'm going to have to checkout the code for this one to
see how some of this was handled.

Do you have any other sites doing photo/video stories which have been an
inspiration for this project?

~~~
Jack000
you've probably seen this already, but I'm a big fan of Stammy:
[http://paulstamatiou.com/](http://paulstamatiou.com/)

and the the NY times multimedia presentations:
[http://www.nytimes.com/newsgraphics/2013/12/30/year-in-
inter...](http://www.nytimes.com/newsgraphics/2013/12/30/year-in-interactive-
storytelling/)

------
Omnipresent
Looks beautiful. Support for google photos would make this more versatile.

------
flanbiscuit
I just got back from a trip and I have a lot of photos and some videos. This
is perfect! I'm going to try this out as soon as I get home tonight

------
cmstoken
Beautiful work! I'm in love with your site. I'm definitely going to be using
the software. Thank you Jack!

------
noahbradley
Love, love, love this. I travel and shoot a lot of photos, so this would be
perfect for putting those out there.

------
thekevan
This is an excellent way to present images and videos. Also, reading about
your work is an inspiration. Thanks!

------
therealmarv
Looks great, but man... this seems like websites for the top 10% of the world
with great internet speed. This sites are really not good with slow(er)
internet. Also look at amount of traffic needed for full example of
[http://jack.ventures](http://jack.ventures) even do not want to spend my
mobile traffic on that example (although LTE is fast enough).

~~~
Jack000
you can actually adjust the compression settings in the script. I just have
mine on the high end out of personal preference.

On mobile it should load the mobile-size version, which is much smaller than
what you see on the desktop.

~~~
therealmarv
yes, don't get me wrong. It looks beautiful on desktop and I wished everybody
could have great internet speed. But I know from professional experiences that
e.g. people from South Africa will hate your pages (1-2Mbit is good DSL
there). I know I only complain... but I also see bad styling. Most people
nowadays browse with mobile and your fonts are too small and unreadable there
(I also know there is no easy solution together with the pictures alignment).
Just saying... for people on desktop on good internet speed +1 but definitely
not a solution which everybody should copy (even not photographers, there is a
reason why thumbnail galleries exist, a good example is Google Photos)

~~~
gknoy
You seem to have pretty clear ideas about how users with slow connections
might want to experience this.

Would you consider making a pull request with an alternate theme (there are
two already included)? You could adjust the styling as you see fit, and so
forth. Best of all, were you to actually use this, you could modify the
compression settings and even the scaling in a way that fits your needs, even
if you don't end up making a PR on the original.

Looking at this, there are lots of ways where it feels like there could be
things added to this to make it better -- a photo reorganizer, or something
that would let you auto-tag / order photos from within the interface. Those
kinds of things would be really neat, but are likely outside the scope of the
(amazing) tool that Jack was kind enough to give us. If one were to go far
enough down those rabbit-holes, pretty soon one would have rewritten it as a
CMS. ;)

------
chadscira
I really don't understand the appeal of these static site generators. Why
don't people just toss something like CloudFlare in front of their dynamic
sites and turn the edge caching up. I mean this is free, the bandwidth
expenses are covered, and you now have a globally accessible site.

Unless you're just trying to get away with hosting your whole site as a GitHub
page ;)

~~~
davidlumley
You can use S3 to make hosting your site super simple, and super cheap.

I don't understand why people use a database for content that (for the most
part) doesn't need one.

~~~
Turing_Machine
Agree 100%. Requiring an active server and database seems like overkill for a
site that's read-only (or very nearly so)

You could easily replace his rsync with an s3cmd sync to ship the stuff
straight to the S3 bucket.

Sure, S3 may cost more per byte shipped than serving it yourself, but probably
not for a personal site (if you factor in the need to pay for a running server
and the extra hassles and time cost involved with maintaining that server).
You can pay for a lot of S3 bandwidth with what you pay for even a cheap VPS.

------
NKCSS
Very cool.

I have little else to add, but I wanted to let you know anyway :) Keep it up!

------
hkjtme
if this would exist for S3.. i would be soooo happy. tried to find similar
(even thumbnails would be ok) .. nothing out there.

------
foolinaround
can the video clips play the audio when brought into focus? maybe we want to
play the audio just once I guess?

------
caiowilsonb
Thank you so much for sharing.

------
evantahler
tight.

------
rekshaw
Wow, love your bio: "These days I mostly travel and work on random stuff that
I find interesting. I'm not really looking for employment, but I've always
wanted to work at NASA and/or Google. So if you're NASA and/or Google HR, drop
me a line ;]"

I wish I had that freedom.

