PostImage component

src/components/atoms/Image.jsx

@@ -18,10 +18,10 @@ const Image = ({ fluid, fixed, alt }) => (
 Image.propTypes = {
   fluid: PropTypes.object,
   fixed: PropTypes.object,
-  alt: PropTypes.string
+  alt: PropTypes.string.isRequired
 }
 
-export const projectImage = graphql`
+export const imageSizeDefault = graphql`
   fragment ImageFluid on ImageSharp {
     fluid(maxWidth: 940, quality: 85) {
       ...GatsbyImageSharpFluid_withWebp_noBase64

src/components/atoms/Image.module.scss

@@ -13,6 +13,7 @@
 
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: $spacer;
     display: block;
 
     @media (min-width: 940px) {
@@ -20,4 +21,8 @@
         border-radius: .25rem;
         overflow: hidden;
     }
+
+    a:hover & {
+        border-color: $link-color !important;
+    }
 }

src/components/atoms/PostImage.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Image from './Image'
+import styles from './PostImage.module.scss'
+
+const PostImage = ({ title, fluid, fixed, alt }) => (
+  <figure className={styles.postImage}>
+    <Image
+      fluid={fluid ? fluid : null}
+      fixed={fixed ? fixed : null}
+      alt={alt}
+    />
+    {title && (
+      <figcaption className={styles.postImageTitle}>{title}</figcaption>
+    )}
+  </figure>
+)
+
+PostImage.propTypes = {
+  fluid: PropTypes.object,
+  fixed: PropTypes.object,
+  alt: PropTypes.string.isRequired,
+  title: PropTypes.string
+}
+
+export default PostImage

src/components/atoms/PostImage.module.scss

@@ -0,0 +1,60 @@
+@import 'variables';
+@import 'mixins';
+
+.postImageTitle {
+    transition: .1s ease-out;
+    font-size: $font-size-h3;
+    font-family: $font-family-headings;
+    line-height: $line-height-headings;
+    font-weight: $font-weight-headings;
+    letter-spacing: -.02em;
+    margin: 0;
+    position: absolute;
+    top: 10%;
+    padding: $spacer / 3 $spacer;
+    background: rgba($link-color, .85);
+    color: #fff;
+    text-shadow: 0 1px 0 #000;
+    left: 0;
+    opacity: 0;
+    transform: translate3d(0, -20px, 0);
+}
+
+.postImage {
+    @include breakoutviewport();
+
+    max-width: none;
+    display: block;
+    margin-top: $spacer * 1.5;
+    margin-bottom: $spacer * 1.5;
+
+    > div {
+        @include media-frame();
+
+        border-radius: 0;
+
+        @media (min-width: $screen-sm) {
+            border-radius: $border-radius;
+        }
+    }
+
+    a & {
+        position: relative;
+        display: block;
+    }
+
+    a:hover & {
+        > div {
+            border-color: $link-color !important;
+        }
+
+        .postImageTitle {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    img {
+        border-radius: 0;
+    }
+}

src/pages/goodies.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { graphql, Link } from 'gatsby'
-import Image from '../components/atoms/Image'
+import PostImage from '../components/atoms/PostImage'
 import Page from '../templates/Page'
 
 import styles from './goodies.module.scss'
@@ -18,9 +18,7 @@ const Goodies = ({ data }) => {
         {image && (
           <Link to={slug}>
             <h1 className={styles.title}>{title}</h1>
-            <figure className={styles.image}>
-              <Image fluid={image.childImageSharp.fluid} alt={title} />
-            </figure>
+            <PostImage fluid={image.childImageSharp.fluid} alt={title} />
           </Link>
         )}
       </article>

src/templates/Post.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
 import Layout from '../components/Layout'
-import Image from '../components/atoms/Image'
+import PostImage from '../components/atoms/PostImage'
 import PostTitle from '../components/atoms/PostTitle'
 import PostLead from '../components/atoms/PostLead'
 import PostContent from '../components/atoms/PostContent'
@@ -28,11 +28,7 @@ const Post = ({ data, location }) => {
 
         <PostLead post={post} />
 
-        {image && (
-          <figure className={styles.hentryImage}>
-            <Image fluid={image.childImageSharp.fluid} alt={title} />
-          </figure>
-        )}
+        {image && <PostImage fluid={image.childImageSharp.fluid} alt={title} />}
 
         {image && image.fields && <Exif exif={image.fields.exif} />}
 

src/templates/Post.module.scss

@@ -6,29 +6,3 @@
     padding-top: $spacer;
     padding-bottom: $spacer * 3;
 }
-
-// Post/photo teaser
-/////////////////////////////////////
-
-.hentryImage {
-    @include breakoutviewport();
-
-    max-width: none;
-    display: block;
-    margin-top: $spacer * 1.5;
-    margin-bottom: $spacer * 1.5;
-
-    > div {
-        @include media-frame();
-
-        border-radius: 0;
-
-        @media (min-width: $screen-sm) {
-            border-radius: $border-radius;
-        }
-    }
-
-    img {
-        border-radius: 0;
-    }
-}

src/templates/Posts.jsx

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import Layout from '../components/Layout'
-import Image from '../components/atoms/Image'
+import PostImage from '../components/atoms/PostImage'
 import PostTitle from '../components/atoms/PostTitle'
 import PostLead from '../components/atoms/PostLead'
 import PostContent from '../components/atoms/PostContent'
@@ -29,12 +29,11 @@ const Posts = ({ data, location, pageContext }) => {
         {image && (
           <figure className={styles.hentryImage}>
             <Link to={slug}>
-              <Image fluid={image.childImageSharp.fluid} alt={title} />
-              {type === 'photo' && (
-                <figcaption className={styles.hentryImageTitle}>
-                  {title}
-                </figcaption>
-              )}
+              <PostImage
+                title={type === 'photo' ? title : null}
+                fluid={image.childImageSharp.fluid}
+                alt={title}
+              />
             </Link>
           </figure>
         )}

src/templates/Posts.module.scss

@@ -17,45 +17,6 @@
     }
 }
 
-.hentryImageTitle {
-    transition: .1s ease-out;
-    font-size: $font-size-h3;
-    font-family: $font-family-headings;
-    line-height: $line-height-headings;
-    font-weight: $font-weight-headings;
-    letter-spacing: -.02em;
-    margin: 0;
-    position: absolute;
-    top: 10%;
-    padding: $spacer / 3 $spacer;
-    background: rgba($link-color, .85);
-    color: #fff;
-    text-shadow: 0 1px 0 #000;
-    left: 0;
-    opacity: 0;
-    transform: translate3d(0, -20px, 0);
-}
-
-.hentryImage {
-    composes: hentryImage from './Post.module.scss';
-
-    a {
-        position: relative;
-        display: block;
-
-        &:hover {
-            > div {
-                border-color: $link-color !important;
-            }
-
-            .hentryImageTitle {
-                opacity: 1;
-                transform: translate3d(0, 0, 0);
-            }
-        }
-    }
-}
-
 .archiveTitle {
     @include heading-band();