exif tweaks

gatsby-node.js

@@ -51,21 +51,49 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
   // exif
   if (node.internal.mediaType === 'image/jpeg') {
     fastExif
-      .read(node.absolutePath)
+      .read(node.absolutePath, true)
       .then(exifData => {
+        if (!exifData) return
         generateExif(exifData, createNodeField, node)
       })
       .catch(() => null) // just silently fail when exif can't be extracted
   }
 }
 
+const getFraction = decimal => {
+  for (var denominator = 1; (decimal * denominator) % 1 !== 0; denominator++);
+  return { numerator: decimal * denominator, denominator: denominator }
+}
+
 const generateExif = (exifData, createNodeField, node) => {
-  const iso = exifData.exif.ISO || null
-  const model = exifData.image.Model || null
-  const fstop = exifData.exif.FNumber || null
-  const shutterspeed = exifData.exif.ExposureTime || null
-  const focalLength = exifData.exif.FocalLength || null
-  const exposure = exifData.exif.ExposureBiasValue || null
+  const { Model } = exifData.image
+  const {
+    ISO,
+    FNumber,
+    ExposureTime,
+    FocalLength,
+    ExposureBiasValue
+  } = exifData.exif
+
+  const shutterspeedNumerator = getFraction(ExposureTime).numerator
+  const shutterspeedDenominator = getFraction(ExposureTime).denominator
+  const exposureShortened = parseFloat(ExposureBiasValue.toFixed(2))
+
+  const model = Model
+  const iso = `ISO ${ISO}`
+  const fstop = `ƒ ${FNumber}`
+  const shutterspeed = `${shutterspeedNumerator}/${shutterspeedDenominator}s`
+  const focalLength = `${FocalLength}mm`
+
+  let exposure
+
+  if (ExposureBiasValue === 0) {
+    exposure = `+/- ${exposureShortened} ev`
+  } else if (ExposureBiasValue > 0) {
+    exposure = `+ ${exposureShortened} ev`
+  } else {
+    exposure = `${exposureShortened} ev`
+  }
 
   // add exif fields to type File
   createNodeField({

src/components/atoms/Exif.jsx

@@ -2,65 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Exif.module.scss'
 
-const getFraction = decimal => {
-  for (var denominator = 1; (decimal * denominator) % 1 !== 0; denominator++);
-  return { numerator: decimal * denominator, denominator: denominator }
-}
-
-const ExposureFormatted = ({ exposure }) => {
-  const exposureShortened = exposure.toFixed(0)
-
-  if (exposureShortened === 0) {
-    return `+/- ${exposureShortened}`
-  } else if (exposureShortened > 0) {
-    return `+ ${exposureShortened}`
-  } else {
-    return exposureShortened
-  }
-}
-
 const Exif = ({ exif }) => {
   const { iso, model, fstop, shutterspeed, focalLength, exposure } = exif
 
   return (
     <aside className={styles.exif}>
-      {model && (
-        <span className="exif__model" title="Camera model">
-          {model}
-        </span>
-      )}
-
-      {fstop && (
-        <span className="exif__fstop" title="Aperture">
-          {`ƒ ${fstop}`}
-        </span>
-      )}
-
-      {shutterspeed && (
-        <span className="exif__shutterspeed" title="Shutter speed">
-          {`${getFraction(shutterspeed).numerator}/${
-            getFraction(shutterspeed).denominator
-          }s`}
-        </span>
-      )}
-
-      {exposure && (
-        <span className="exif__exposure" title="Exposure">
-          <ExposureFormatted exposure={exposure} />
-        </span>
-      )}
-
-      {iso && (
-        <span className="exif__iso" title="ISO">
-          {`ISO ${iso}`}
-        </span>
-      )}
-
-      {focalLength && (
-        <span className="exif__focallength" title="Focal length">
-          {`${focalLength}mm`}
-        </span>
-      )}
+      {model && <span title="Camera model">{model}</span>}
+      {fstop && <span title="Aperture">{fstop}</span>}
+      {shutterspeed && <span title="Shutter speed">{shutterspeed}</span>}
+      {exposure && <span title="Exposure">{exposure}</span>}
+      {iso && <span title="ISO">{iso}</span>}
+      {focalLength && <span title="Focal length">{focalLength}</span>}
     </aside>
   )
 }

src/components/atoms/Exif.module.scss

@@ -1,17 +1,32 @@
 @import 'variables';
+@import 'mixins';
 
 .exif {
-    font-size: $font-size-small;
+    font-size: $font-size-mini;
     color: $brand-grey-light;
-    margin-top: -($spacer);
+    margin-top: -($spacer * 1.5);
     margin-bottom: $spacer * 2;
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
     text-align: center;
 
     span {
-        flex: 1;
+        display: block;
+        flex: 0 0 33%;
         white-space: nowrap;
+        padding: $spacer / 4;
+
+        &:first-child {
+            flex-basis: 100%;
+        }
+    }
+
+    @media (min-width: $screen-sm) {
+        span {
+            &,
+            &:first-child {
+                flex: 1 1 auto;
+            }
+        }
     }
 }

src/components/atoms/Image.jsx

@@ -8,7 +8,7 @@ const Image = ({ fluid, fixed, alt }) => (
   <Img
     className={styles.image}
     outerWrapperClassName={styles.imageWrap}
-    backgroundColor="#6b7f88"
+    backgroundColor="#dfe8ef"
     fluid={fluid ? fluid : null}
     fixed={fixed ? fixed : null}
     alt={alt}