Building a Simple, Private Photo Site in Statamic

I moved to the other side of the world - from Australia to the States. One condition of this was that I’d send my mother as many photos as I could. I haven’t, because frankly, it’s a pain. All the easy ways - like Facebook - suck, mainly because I don’t want everyone to see everything. Also, my mom isn’t on it.

I need a way to:

• Share photos
• Be private
• Be easy. I don’t have time.

Statamic to the rescue.

The key features here are the get_files tag, and the _protect variable that’s new in 1.7.

Folders and Files

You will need to set up your directory similar to this:

/_content
  /albums
    1.album-one
    2.album-two
    fields.yaml
    folder.yaml
  login.md
  page.md
/_themes
  /my_theme_folder
    /layouts
      default.html
    /templates
      album.html
      default.html
      login.html
/photos
  /album-one
    photo1.jpg
    photo2.jpg
  /album-two
    photo3.jpg
    photo4.jpg

The plan is this:

• The homepage will display a listing of albums.
• An album will show all the photos in the corresponding photos folder.
• We’ll use _protect to prevent anyone from accessing any part of the site.

Protecting the site

We don’t want anyone to see any part of the site unless they are logged in.

In your settings.yaml (or an environments file) you can add this:

_protect:
  allow:
    _logged_in: true

You’ll need to specify the location of the login page. In this example it’s just /login. Update it in /_config/bundles/protect/protect.yaml.

login_url: /login

Now, every page on the site is protected. That includes the login page. You’ll need to unprotect the login page or there will be an infinite redirect. The front-matter for login.md should look like this:

---
title: Log in
_template: login
_protect: false
---

Creating an album

1. Create an .md file in /_content/albums.
   eg. 1.my-album.md

   ---
   title: My Album
   ---
   

2. Upload photos into /photos/my-album.

3. Tell your mom a new album is available!

Templates

Your albums should use a template that looks something like this:

{{ get_files in="/photos/{{ slug }}" }}
  <a href="{{ file }}">
    <img src="{{ transform src='{{ file }}' width='250' height='180' action='smart' }}" alt="" />
  </a>
{{ /get_files }}

Of course, you can change this to whatever you want, but the key here is to use get_files to display the photos from the album’s folder.

As long as you keep the names of the md files and the album folders consistent, slug will be enough to make sure you are grabbing the correct photos.

Then, your homepage would server as an album listing. The template would look something like this:

{{ entries:listing folder="albums" }}
  <a href="{{ url }}">
    {{ get_files from="/photos/{{ slug }}" limit="1" }}
      <img src="{{ transform src='{{ file }}' width='250' }}" alt="" />
    {{ /get_files }}
    <span>{{ title }}</span>
  </a>
{{ /entries:listing }}

This will loop through the albums, create a thumbnail using the first photo in each one, and link to the album itself.

Easy!

Props to Tyler for the inspiration.