photos page

src/components/atoms/Image.jsx

@@ -4,18 +4,20 @@ import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
 import styles from './Image.module.scss'
 
-const Image = props => (
+const Image = ({ fluid, fixed, alt }) => (
   <Img
     className={styles.image}
     outerWrapperClassName={styles.imageWrap}
     backgroundColor="#6b7f88"
-    fluid={props.fluid}
-    alt={props.alt}
+    fluid={fluid ? fluid : null}
+    fixed={fixed ? fixed : null}
+    alt={alt}
   />
 )
 
 Image.propTypes = {
-  fluid: PropTypes.object.isRequired,
+  fluid: PropTypes.object,
+  fixed: PropTypes.object,
   alt: PropTypes.string
 }
 

src/pages/photos.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql, Link } from 'gatsby'
+import Layout from '../components/Layout'
+import Image from '../components/atoms/Image'
+
+import styles from './photos.module.scss'
+import stylesArchive from '../templates/Archive.module.scss'
+
+const Photos = ({ data, location }) => {
+  const edges = data.photos.edges
+
+  const PhotoThumbs = edges.map(({ node }) => {
+    const { title, image } = node.frontmatter
+    const { slug } = node.fields
+
+    return (
+      <article className={styles.photo} key={node.id}>
+        {image && (
+          <Link to={slug}>
+            <Image fluid={image.childImageSharp.fluid} alt={title} />
+          </Link>
+        )}
+      </article>
+    )
+  })
+
+  return (
+    <Layout location={location}>
+      <h1 className={stylesArchive.archiveTitle}>Photos</h1>
+      <section className={styles.photos}>{PhotoThumbs}</section>
+    </Layout>
+  )
+}
+
+Photos.propTypes = {
+  location: PropTypes.object.isRequired,
+  data: PropTypes.object
+}
+
+export default Photos
+
+export const photosQuery = graphql`
+  query {
+    photos: allMarkdownRemark(
+      filter: { frontmatter: { type: { eq: "photo" } } }
+      sort: { order: DESC, fields: [fields___date] }
+    ) {
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+            type
+            image {
+              childImageSharp {
+                fluid(maxWidth: 400, maxHeight: 400, quality: 85) {
+                  ...GatsbyImageSharpFluid_withWebp
+                }
+              }
+            }
+          }
+          fields {
+            slug
+          }
+        }
+      }
+    }
+  }
+`

src/pages/photos.module.scss

@@ -0,0 +1,18 @@
+@import 'mixins';
+
+.photos {
+    @include breakoutviewport;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.photo {
+    flex: 0 0 48%;
+    margin-bottom: 4%;
+
+    a {
+        display: block;
+    }
+}