First pass on GridImage component for BlogImageGallery

components/Blog/BlogImageGallery/components/GridImage.js

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+/**
+ * A single image element in a masonry style image grid
+ */
+const GridImage = ({ key, index, left, top, photo, onClick }) => {
+  const { height, width, src, alt, caption } = photo;
+  return (
+    <ImageContainer
+      key={key}
+      index={index}
+      onClick={e => onClick(e, { index })}
+      style={{ left, top, height, width }}
+    >
+      <OverlayContainer>
+        <Image src={src} alt={alt} caption={caption} />
+        <Caption>
+          <h4>{caption}</h4>
+        </Caption>
+      </OverlayContainer>
+    </ImageContainer>
+  );
+};
+
+GridImage.propTypes = {
+  key: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  left: PropTypes.number.isRequired,
+  top: PropTypes.number.isRequired,
+  containerHeight: PropTypes.number.isRequired,
+  onClick: PropTypes.func.isRequired,
+  photo: PropTypes.shape({
+    alt: PropTypes.string.isRequired,
+    caption: PropTypes.string.isRequired,
+    height: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    src: PropTypes.string.isRequired
+  }).isRequired
+};
+
+export default GridImage;
+
+const Caption = styled.div`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: ${({ theme }) => theme.accentColor};
+  color: ${({ theme }) => theme.pageContentLinkHoverColor};
+  h4 {
+    text-align: center;
+    margin: 1em 0;
+  }
+`;
+
+const OverlayContainer = styled.div`
+  position: relative;
+  height: 100%;
+`;
+
+const ImageContainer = styled.div`
+  display: block;
+  position: absolute;
+  cursor: pointer;
+  border-width: 2px;
+  border-color: transparent;
+  border-style: solid;
+  :hover {
+    border-color: ${({ theme }) => theme.pageContentLinkHoverColor};
+  }
+`;
+
+const Image = styled.img`
+  width: inherit;
+  height: inherit;
+  position: absolute;
+`;

components/Blog/BlogImageGallery/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Gallery from 'react-photo-gallery';
 import Lightbox from 'components/Lightbox';
+import GridImage from './components/GridImage';
 
 class BlogImageGallery extends React.Component {
   static propTypes = {
@@ -33,9 +34,9 @@ class BlogImageGallery extends React.Component {
     this.setState({ clientSide: true });
   }
 
-  openLightbox = (event, obj) => {
+  openLightbox = (e, { index }) => {
     this.setState({
-      currentImage: obj.index,
+      currentImage: index,
       lightboxIsOpen: true
     });
   };
@@ -69,6 +70,20 @@ class BlogImageGallery extends React.Component {
     }
   };
 
+  /**
+   * Sets breakpoints for column width based on containerWidth
+   *
+   * @int containerWidth The current width of the image grid
+   */
+  columnConfig = containerWidth => {
+    let columns = 1;
+    if (containerWidth >= 500) columns = 2;
+    if (containerWidth >= 900) columns = 3;
+    if (containerWidth >= 1500) columns = 4;
+
+    return columns;
+  };
+
   render() {
     const { currentImage, lightboxIsOpen, clientSide } = this.state;
     const { images, galleryTitle, imageMasonryDirection } = this.props;
@@ -77,10 +92,12 @@ class BlogImageGallery extends React.Component {
       <GalleryContainer>
         {clientSide && (
           <Gallery
-            photos={images}
+            columns={this.columnConfig}
             onClick={this.openLightbox}
-            margin={3}
+            photos={images}
+            margin={6}
             direction={imageMasonryDirection}
+            renderImage={GridImage}
           />
         )}
         <Lightbox

pages/blog/operating-system-dark-mode-in-your-css.js

@@ -73,6 +73,20 @@ const BlogPage = ({ route, theme, updateTheme }) => {
               alt: 'macOS Mojave Dark Mode Setting',
               width: 1200,
               height: 1218
+            },
+            // {
+            //   src: '/static/blog-content/dark-mode/ios-13-dark-mode-crop.jpg',
+            //   caption: 'iOS 13 Dark Mode Setting',
+            //   alt: 'iOS 13 Dark Mode Setting',
+            //   width: 748,
+            //   height: 750
+            // },
+            {
+              src: '/static/blog-content/dark-mode/android-9-dark-mode.jpg',
+              caption: 'Android 9.0 Dark Mode Setting',
+              alt: 'Android 9.0 Dark Mode Setting',
+              width: 1280,
+              height: 600
             }
           ]}
         />