From bd6150eac9bb93828cc27a29bddb380d95cc952a Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Mon, 17 Aug 2020 13:47:30 +0300
Subject: [PATCH] amp images fix

---
 src/components/Article/Article.js             | 19 +++++++++++++------
 .../Articles/ArticleCard/ArticleCard.js       | 16 ++++++++++------
 .../Articles/MoreArticles/MoreArticles.js     |  4 ++--
 src/templates/article.amp.js                  |  4 ++--
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/Article/Article.js b/src/components/Article/Article.js
index 5a37cd8..dc7e1d7 100644
--- a/src/components/Article/Article.js
+++ b/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
-              loading="eager"
-              fadeIn={false}
-              fluid={image.childImageSharp.fluid}
-              alt={title}
-            />
+            {!amp 
+              ? <Img
+                  loading="eager"
+                  fadeIn={false}
+                  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>
diff --git a/src/components/Articles/ArticleCard/ArticleCard.js b/src/components/Articles/ArticleCard/ArticleCard.js
index f49dc97..8640efe 100644
--- a/src/components/Articles/ArticleCard/ArticleCard.js
+++ b/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
-            loading="eager"
-            fadeIn={false}
-            fluid={image.childImageSharp.fluid}
-            alt={title}
-          />
+          {!amp 
+              ? <Img
+                  loading="eager"
+                  fadeIn={false}
+                  fluid={image.childImageSharp.fluid}
+                  alt={title}
+                />
+              : <img src={image.childImageSharp.fluid.src} height='380' />
+          }
         </Link>
       </div>
       <div className="article-card__heading">
diff --git a/src/components/Articles/MoreArticles/MoreArticles.js b/src/components/Articles/MoreArticles/MoreArticles.js
index 66c3031..81c27cb 100644
--- a/src/components/Articles/MoreArticles/MoreArticles.js
+++ b/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
           })}
diff --git a/src/templates/article.amp.js b/src/templates/article.amp.js
index 54cbe6c..f554db5 100644
--- a/src/templates/article.amp.js
+++ b/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>