Finish three column photo layout

_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%;
+}

_assets/stylesheets/components/_photos.scss

@@ -0,0 +1,3 @@
+.photos__heading {
+  font-size: 1.35rem;
+}

_assets/stylesheets/components/_video-container.scss

@@ -2,10 +2,10 @@
   position: relative;
   width: 100%;
   height: 0;
-  
+
   iframe {
     position: absolute;
     width: 100%;
     height: 100%;
   }
-}
+}

_assets/stylesheets/settings/_global.scss

@@ -1,2 +1,2 @@
-$max-width: 800px !default;
+$max-width: 816px !default;
 $pad-min: 8.5% !default;

_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

_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:

_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">

_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">

_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">

_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">

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 %}
+  <header class="container photos__header">
-    {% assign content = post.content %}
+    <h1 class="photos__heading">Photos</h1>
+  </header>
 
-    <article class="article">
+  <div class="photos-container">
-      {% include index_article.html %}
+  {% 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 %}