From f06d4b694f98268d7e1d50bf1cc222de7991aab8 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@newrelic.com>
Date: Fri, 1 Jul 2022 13:33:54 -0700
Subject: [PATCH] feat: Use `GatsbyImage` for screenshots in slick slider

---
 src/components/QuickstartDashboards.js | 12 +++++++-----
 src/templates/QuickstartDetails.js     |  6 +++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/QuickstartDashboards.js b/src/components/QuickstartDashboards.js
index cb3e8582..2a3cc37a 100644
--- a/src/components/QuickstartDashboards.js
+++ b/src/components/QuickstartDashboards.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import pluralize from 'pluralize';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import Intro from './Intro';
 import { quickstart } from '../types';
 import Slider from 'react-slick';
@@ -99,8 +100,9 @@ const QuickstartDashboards = ({ quickstart }) => {
             </p>
             {renderDescription(dashboard)}
             <Slider {...settings}>
-              {dashboard.screenshots.map((imgUrl, index) => {
+              {dashboard.screenshots.map((node, index) => {
                 const elementKey = `imgurl_${index}`;
+                const image = getImage(node);
                 return (
                   <div
                     css={css`
@@ -116,16 +118,16 @@ const QuickstartDashboards = ({ quickstart }) => {
                       `}
                     >
                       <a
-                        href={imgUrl}
+                        href={node.publicURL}
                         target="_blank"
                         rel="noreferrer"
                         css={css`
                           margin: auto;
                         `}
                       >
-                        <img
-                          src={imgUrl}
-                          alt="Content cannot be displayed"
+                        <GatsbyImage
+                          image={image}
+                          alt={`${dashboard.name} screenshot ${index}`}
                           css={css`
                             width: 100%;
                             height: 17.5rem;
diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js
index 23de778c..a72cd478 100644
--- a/src/templates/QuickstartDetails.js
+++ b/src/templates/QuickstartDetails.js
@@ -216,7 +216,11 @@ export const pageQuery = graphql`
         name
         screenshots {
           childImageSharp {
-            gatsbyImageData(placeholder: BLURRED, formats: [AUTO, WEBP])
+            gatsbyImageData(
+              height: 280
+              placeholder: BLURRED
+              formats: [AUTO, WEBP]
+            )
           }
         }
       }