feat: Use GatsbyImage for screenshots in slick slider

newrelic · Jul 1, 2022 · f06d4b6 · f06d4b6
1 parent 4689710
commit f06d4b6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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]
+            )
           }
         }
       }