amp images fix

src/components/Article/Article.js

@@ -18,6 +18,7 @@ import FacebookIcon from "../../images/facebook-icon__large.svg"
 const Article = ({
   data: { slug, title, image, description, category, tags, time, date },
   html,
+  amp
 }) => {
   const {
     siteMetadata: {
@@ -92,12 +93,18 @@ const Article = ({
             ))}
           </div>
           <div className="article-image">
-            <Img
+            {!amp 
-              loading="eager"
+              ? <Img
-              fadeIn={false}
+                  loading="eager"
-              fluid={image.childImageSharp.fluid}
+                  fadeIn={false}
-              alt={title}
+                  fluid={image.childImageSharp.fluid}
-            />
+                  alt={title}
+                /> 
+              : <img
+                  src={image.childImageSharp.fluid.src}
+                  height='350'
+                />
+            }
           </div>
           <div className="article-inner inner">
             <div dangerouslySetInnerHTML={{ __html: html }}></div>

src/components/Articles/ArticleCard/ArticleCard.js

@@ -6,17 +6,21 @@ import { Link } from "gatsby"
 
 const ArticleCard = ({
   data: { slug, title, image, category, description, tags },
+  amp
 }) => {
   return (
     <article className="article-card">
       <div className="article-card__image">
         <Link to={`/article/${slug}/`}>
-          <Img
+          {!amp 
-            loading="eager"
+              ? <Img
-            fadeIn={false}
+                  loading="eager"
-            fluid={image.childImageSharp.fluid}
+                  fadeIn={false}
-            alt={title}
+                  fluid={image.childImageSharp.fluid}
-          />
+                  alt={title}
+                />
+              : <img src={image.childImageSharp.fluid.src} height='380' />
+          }
         </Link>
       </div>
       <div className="article-card__heading">

src/components/Articles/MoreArticles/MoreArticles.js

@@ -3,7 +3,7 @@ import { useLocation } from "@reach/router"
 import useMoreArticlesQuery from "../../../hooks/useMoreArticlesQuery"
 import ArticleCard from "../ArticleCard/ArticleCard"
 
-const MoreArticles = () => {
+const MoreArticles = ({ amp }) => {
   const { edges } = useMoreArticlesQuery()
   const { pathname } = useLocation()
   const query = pathname.split("/")[pathname.split("/").length - 1]
@@ -19,7 +19,7 @@ const MoreArticles = () => {
           .sort(() => Math.random() - 0.5)
           .map(({ node }, i) => {
             if (i < 4) {
-              return <ArticleCard key={i} data={node.frontmatter} />
+              return <ArticleCard key={i} data={node.frontmatter} amp={amp} />
             }
             return null
           })}

src/templates/article.amp.js

@@ -32,9 +32,9 @@ const articleTemplateAmp = ({
         <Grid fluid style={{ maxWidth: 800 }}>
           <Row>
             <Col xs={12}>
-              <Article data={frontmatter} html={html} />
+              <Article data={frontmatter} html={html} amp={true} />
               <Newsletter />
-              <MoreArticles />
+              <MoreArticles amp={true} />
             </Col>
           </Row>
         </Grid>