Change the code to use either variants or size

Use which one is available. Code is now backwards and forwards compatible.

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(', ');

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(

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,
+      })
+    ),
   }),
 });