Fixed size image

gatsby-config.js

@@ -93,7 +93,12 @@ module.exports = {
       }
     },
     `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        defaultQuality: 100
+      }
+    },
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {

gatsby-node.js

@@ -71,14 +71,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       stories: allMarkdownRemark(filter: { fields: { collection: { eq: "story" } } }) {
         edges {
           node {
-            frontmatter {
-              title
-              date
-              author
-              tags
-            }
-            excerpt(pruneLength: 304)
-            html
             fields {
               slug
             }
@@ -88,42 +80,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       activities: allMarkdownRemark(filter: { fields: { collection: { eq: "activity" } } }) {
         edges {
           node {
-            frontmatter {
-              name
-              to
-              catchphrase
-              featured_image {
-                image {
-                  publicURL
-                }
-                alt
-              }
-              contact_info {
-                email
-                socials {
-                  github
-                  twitter
-                  facebook
-                  linkedin
-                }
-              }
-              members {
-                name
-                task
-                picture {
-                  publicURL
-                }
-                id
-                contact_info {
-                  email
-                  twitter
-                  linkedin
-                }
-              }
-              tags
-            }
-            excerpt
-            html
             fields {
               slug
             }

src/components/Activity.jsx

@@ -3,16 +3,21 @@ import styled from 'styled-components';
 
 import { arrow } from '../images/icons';
 import { Img, StyledLink, Tag } from './UI';
-import { breakpoints } from '../styles/globals';
+import { breakpoints, dimensions } from '../styles/globals';
 
 const ActivityCard = styled.div`
   position: relative;
   height: 17.5rem;
 
   & .logo {
-    max-width: 100%;
-    max-height: 100%;
-    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    max-width: ${dimensions.logo.maxWidth}px;
+    max-height: ${dimensions.logo.maxHeight}px;
+
+    & > * {
+      max-height: 100%;
+    }
   }
 
   & .tags.show {
@@ -81,7 +86,7 @@ const Activity = ({ name, logo, color, tags, to }) => {
         </div>
       )}
       <div className="logo">
-        <Img src={logo} alt={name} />
+        <Img image={logo} alt={name} />
       </div>
       <ActivityLinks>
         <StyledLink to={to} className="activity-link">

src/components/Layout.jsx

@@ -72,3 +72,54 @@ const Layout = ({ children }) => {
 };
 
 export default Layout;
+
+// if you change sizes here, you should also do the same in ../styles/globals.js dimensions object
+export const query = graphql`
+  fragment GeneralFeaturedImage on FeaturedImage {
+    image {
+      childImageSharp {
+        fluid(maxWidth: 516, fit: CONTAIN) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+      extension
+      publicURL
+    }
+    alt
+  }
+
+  fragment ActivityFeaturedImage on FeaturedImage {
+    image {
+      childImageSharp {
+        fluid {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
+    alt
+  }
+
+  fragment Picture on Members {
+    picture {
+      childImageSharp {
+        fixed(width: 300, height: 215, fit: INSIDE, grayscale: true) {
+          ...GatsbyImageSharpFixed_withWebp
+        }
+      }
+      extension
+      publicURL
+    }
+  }
+
+  fragment Logo on Frontmatter {
+    logo {
+      childImageSharp {
+        fluid {
+          ...GatsbyImageSharpFluid_withWebp_tracedSVG
+        }
+      }
+      extension
+      publicURL
+    }
+  }
+`;

src/components/UI/Img.jsx

@@ -1,8 +1,25 @@
-import styled from 'styled-components';
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import Image from 'gatsby-image';
 
-const Img = styled.img`
-  display: block;
-  max-width: 100%;
-`;
+const Img = ({ image, imageStyle, alt, ...rest }) => {
+  let src = image;
+  if (typeof image === 'object') {
+    if (image.childImageSharp) {
+      // Surely a gatsby image
+      return <Image {...image.childImageSharp} alt={alt} {...rest} />;
+    }
+    src = image.publicURL;
+  }
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      style={{ display: 'block', maxWidth: '100%', ...imageStyle }}
+      {...rest}
+    />
+  );
+};
 
 export default Img;

src/components/UI/Person.jsx

@@ -7,6 +7,20 @@ import Img from './Img';
 const StyledPerson = styled.div`
   display: flex;
   flex-direction: column;
+
+  & > .img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #f8f6fe;
+
+    width: 300px;
+    height: 215px;
+
+    & > img {
+      max-height: 100%;
+    }
+  }
 `;
 
 const PersonFooter = styled.div`
@@ -30,16 +44,13 @@ const PersonFooter = styled.div`
 const Person = ({ name, picture, socials, task }) => {
   return (
     <StyledPerson>
-      {picture ? (
-        <Img alt={name} src={picture} />
-      ) : (
-        <Img
-          role="presentation"
-          alt=""
-          src={headshotIcon}
-          css="background: #F8F6FE; padding: 5rem;"
-        />
-      )}
+      <div className="img">
+        {picture ? (
+          <Img alt={name} image={picture} />
+        ) : (
+          <Img role="presentation" alt="" src={headshotIcon} />
+        )}
+      </div>
       <PersonFooter>
         <div>
           <h4>{name}</h4>

src/pages/activities.js

@@ -52,14 +52,7 @@ const Activities = ({ data }) => {
                   fields: { slug: to }
                 }
               }) => (
-                <Activity
-                  key={name}
-                  name={name}
-                  logo={logo.publicURL}
-                  tags={tags}
-                  color={color}
-                  to={to}
-                />
+                <Activity key={name} name={name} logo={logo} tags={tags} color={color} to={to} />
               )
             )}
         </ActivitiesContainer>
@@ -80,9 +73,7 @@ export const pageQuery = graphql`
         node {
           frontmatter {
             name
-            logo {
-              publicURL
-            }
+            ...Logo
             color
             tags
           }