From 8cf9b76d52cb2e30be78f463499b5d9c65507a24 Mon Sep 17 00:00:00 2001
From: Mikko Koski <mikkokos@gmail.com>
Date: Thu, 1 Mar 2018 17:12:04 +0200
Subject: [PATCH] Change the code to use either variants or size

Use which one is available. Code is now backwards and forwards compatible.
---
 .../ResponsiveImage/ResponsiveImage.js        |  9 ++++++-
 src/containers/ListingPage/ListingPage.js     | 25 ++++++++++++-------
 src/util/types.js                             | 10 +++++++-
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/components/ResponsiveImage/ResponsiveImage.js b/src/components/ResponsiveImage/ResponsiveImage.js
index a3a1891c..a3880113 100644
--- a/src/components/ResponsiveImage/ResponsiveImage.js
+++ b/src/components/ResponsiveImage/ResponsiveImage.js
@@ -62,10 +62,17 @@ const ResponsiveImage = props => {
   }
 
   const imageSizes = image.attributes.sizes;
+  const imageVariants = image.attributes.variants;
 
   const srcSet = nameSet
     .map(v => {
-      const url = imageSizes.find(i => i.name === v.name).url;
+      const variant = imageVariants && imageVariants[v.name];
+
+      // deprecated
+      // for backwards compatibility only
+      const size = imageSizes && imageSizes.find(i => i.name === v.name);
+
+      const url = (variant || size).url;
       return `${url} ${v.size}`;
     })
     .join(', ');
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index a481a921..e3fbf2d6 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -443,16 +443,23 @@ export class ListingPageComponent extends Component {
       </div>
     ) : null;
 
-    const facebookImages = hasImages
-      ? currentListing.images.map(image => {
-          return image.attributes.sizes.find(i => i.name === 'facebook');
+    const listingImages = (listing, variantName) =>
+      (listing.images || [])
+        .map(image => {
+          const variants = image.attributes.variants;
+          const variant = variants && variants[variantName];
+
+          // deprecated
+          // for backwards combatility only
+          const sizes = image.attributes.sizes;
+          const size = sizes && sizes.find(i => i.name === variantName);
+
+          return variant || size;
         })
-      : [];
-    const twitterImages = hasImages
-      ? currentListing.images.map(image => {
-          return image.attributes.sizes.find(i => i.name === 'twitter');
-        })
-      : [];
+        .filter(variant => variant != null);
+
+    const facebookImages = listingImages(currentListing, 'facebook');
+    const twitterImages = listingImages(currentListing, 'twitter');
     const schemaImages = JSON.stringify(facebookImages.map(img => img.url));
     const siteTitle = config.siteTitle;
     const schemaTitle = intl.formatMessage(
diff --git a/src/util/types.js b/src/util/types.js
index 438b5b93..d444498c 100644
--- a/src/util/types.js
+++ b/src/util/types.js
@@ -24,6 +24,7 @@ import {
   instanceOf,
   number,
   object,
+  objectOf,
   oneOf,
   oneOfType,
   shape,
@@ -86,7 +87,14 @@ propTypes.image = shape({
         name: string.isRequired,
         url: string.isRequired,
       })
-    ).isRequired,
+    ),
+    variants: objectOf(
+      shape({
+        width: number.isRequired,
+        height: number.isRequired,
+        url: string.isRequired,
+      })
+    ),
   }),
 });