From e6c47f3cb2a30a1904820415697b617cd019d0cb Mon Sep 17 00:00:00 2001
From: Daniel Barber <github@danbarber.me>
Date: Wed, 10 Jul 2019 20:57:11 -0400
Subject: [PATCH] Finish three column photo layout

---
 .../components/_photos-container.scss           | 11 +++++++++++
 _assets/stylesheets/components/_photos.scss     |  3 +++
 .../components/_video-container.scss            |  4 ++--
 _assets/stylesheets/settings/_global.scss       |  2 +-
 _assets/stylesheets/styles.scss                 |  2 ++
 _config.yml                                     | 10 ++++++++++
 _posts/2017-06-25-liberty-sunset.md             |  1 +
 ...7-21-eisenhower-executive-office-building.md |  1 +
 _posts/2017-08-29-four-corners.md               |  1 +
 _posts/2018-09-25-barrel-race.md                |  1 +
 photos/index.html                               | 17 +++++++++++++----
 11 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 _assets/stylesheets/components/_photos-container.scss
 create mode 100644 _assets/stylesheets/components/_photos.scss

diff --git a/_assets/stylesheets/components/_photos-container.scss b/_assets/stylesheets/components/_photos-container.scss
new file mode 100644
index 0000000..f54169b
--- /dev/null
+++ b/_assets/stylesheets/components/_photos-container.scss
@@ -0,0 +1,11 @@
+.photos-container {
+  @include container;
+
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 1rem;
+}
+
+.photo-thumb {
+  width: 100%;
+}
diff --git a/_assets/stylesheets/components/_photos.scss b/_assets/stylesheets/components/_photos.scss
new file mode 100644
index 0000000..9df3a89
--- /dev/null
+++ b/_assets/stylesheets/components/_photos.scss
@@ -0,0 +1,3 @@
+.photos__heading {
+  font-size: 1.35rem;
+}
diff --git a/_assets/stylesheets/components/_video-container.scss b/_assets/stylesheets/components/_video-container.scss
index 47bb2e0..d59278a 100644
--- a/_assets/stylesheets/components/_video-container.scss
+++ b/_assets/stylesheets/components/_video-container.scss
@@ -2,10 +2,10 @@
   position: relative;
   width: 100%;
   height: 0;
-  
+
   iframe {
     position: absolute;
     width: 100%;
     height: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/_assets/stylesheets/settings/_global.scss b/_assets/stylesheets/settings/_global.scss
index 5520128..f87d8e7 100644
--- a/_assets/stylesheets/settings/_global.scss
+++ b/_assets/stylesheets/settings/_global.scss
@@ -1,2 +1,2 @@
-$max-width: 800px !default;
+$max-width: 816px !default;
 $pad-min: 8.5% !default;
diff --git a/_assets/stylesheets/styles.scss b/_assets/stylesheets/styles.scss
index 09e8d73..39dc87b 100644
--- a/_assets/stylesheets/styles.scss
+++ b/_assets/stylesheets/styles.scss
@@ -42,6 +42,8 @@
 @import "components/pagination";
 @import "components/photo";
 @import "components/video-container";
+@import "components/photos-container";
+@import "components/photos";
 
 // 7. Utilities – utilities and helper classes with ability to override
 //    anything which goes before in the triangle, eg. hide helper class
diff --git a/_config.yml b/_config.yml
index 1e2da53..2de04c5 100644
--- a/_config.yml
+++ b/_config.yml
@@ -83,6 +83,16 @@ picture:
   output: assets
   markup: picture
   presets:
+    photo-thumb:
+      ppi: [1, 2]
+      attr:
+        class: photo-thumb
+        itemprop: image
+      source_default:
+        width: 300
+        height: 300
+
+
     full-width:
       ppi: [1, 2]
       attr:
diff --git a/_posts/2017-06-25-liberty-sunset.md b/_posts/2017-06-25-liberty-sunset.md
index 990662d..d22e644 100644
--- a/_posts/2017-06-25-liberty-sunset.md
+++ b/_posts/2017-06-25-liberty-sunset.md
@@ -9,6 +9,7 @@ categories:
 - sunset
 - usa
 layout: post
+image: "blog/liberty-sunset/DSCF3723.jpg"
 ---
 
 <figure class="photo photo--wide">
diff --git a/_posts/2017-07-21-eisenhower-executive-office-building.md b/_posts/2017-07-21-eisenhower-executive-office-building.md
index 33ef606..fb570a3 100644
--- a/_posts/2017-07-21-eisenhower-executive-office-building.md
+++ b/_posts/2017-07-21-eisenhower-executive-office-building.md
@@ -10,6 +10,7 @@ categories:
 - photos
 - usa
 - washington dc
+image: "blog/eisenhower-executive-office-building/DSCF4369.jpg"
 ---
 
 <figure class="photo photo--square">
diff --git a/_posts/2017-08-29-four-corners.md b/_posts/2017-08-29-four-corners.md
index 2e6e5f9..b17f9e6 100644
--- a/_posts/2017-08-29-four-corners.md
+++ b/_posts/2017-08-29-four-corners.md
@@ -10,6 +10,7 @@ categories:
 - sculpture
 - storm king
 date: Tue, 29 Aug 2017 18:04:53 +0000
+image: "blog/four-corners/IMG_6164.jpg"
 ---
 
 <figure class="photo photo--wide">
diff --git a/_posts/2018-09-25-barrel-race.md b/_posts/2018-09-25-barrel-race.md
index 4f71b35..eb33f78 100644
--- a/_posts/2018-09-25-barrel-race.md
+++ b/_posts/2018-09-25-barrel-race.md
@@ -10,6 +10,7 @@ tags:
 - wrangler
 - cowgirl
 - horses
+image: "blog/barrel-race/DSCF8015.jpg"
 ---
 
 <figure class="photo photo--wide">
diff --git a/photos/index.html b/photos/index.html
index 12804e0..e33b8b0 100644
--- a/photos/index.html
+++ b/photos/index.html
@@ -3,6 +3,7 @@ layout: default
 pagination:
   enabled: true
   category: photos
+  per_page: 24
 ---
 
 {% assign index = true %}
@@ -10,13 +11,21 @@ pagination:
 {% include header.html %}
 
 <div id="content">
-  {% for post in paginator.posts %}
-    {% assign content = post.content %}
+  <header class="container photos__header">
+    <h1 class="photos__heading">Photos</h1>
+  </header>
 
-    <article class="article">
-      {% include index_article.html %}
+  <div class="photos-container">
+  {% for post in paginator.posts %}
+    <article class="photo-post">
+      {% if post.image %}
+        <a href="{{ post.url }}">
+          {% picture photo-thumb {{ post.image }} alt="" title="{{ post.title }}" %}
+        </a>
+      {% endif %}
     </article>
   {% endfor %}
+  </div>
 
   <div class="container pagination">
     {% if paginator.next_page %}