@mjhls/mjh-framework 1.0.817-image-crop-test-v4 → 1.0.818

package/dist/esm/IssueLanding.js

@@ -3,7 +3,7 @@ import React from 'react';
 import QueueDeckExpanded from './QueueDeckExpanded.js';
 import Breadcrumbs from './Breadcrumbs.js';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-e8c6a892.js';
+import { g as getSerializers } from './index-04c4d8d6.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './_to-object-b50e61c3.js';
 import './_object-pie-133f504a.js';
@@ -14,7 +14,6 @@ import './core.get-iterator-method-133dfacd.js';
 import './toConsumableArray-6d9a4616.js';
 import './_iter-detect-7e5e5ce2.js';
 import 'react-bootstrap';
-import './urlFor.js';
 import './index-0dbff1d1.js';
 import './index.es-c6222053.js';
 import './moment-bc12cb97.js';

package/dist/esm/MasterDeck.js

@@ -56,7 +56,7 @@ var MasterDeck = function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MasterDeck.__proto__ || _Object$getPrototypeOf(MasterDeck)).call.apply(_ref, [this].concat(args))), _this), _this.Deck = _this.props.deck, _this.variant = _this.props.variant, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord || [], _this.query = _this.props.query, _this.params = _this.props.params, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.rightItems = _this.props.rightItems ? _this.props.rightItems : false, _this.isSeriesLanding = _this.props.isSeriesLanding ? _this.props.isSeriesLanding : false, _this.client = _this.props.client, _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MasterDeck.__proto__ || _Object$getPrototypeOf(MasterDeck)).call.apply(_ref, [this].concat(args))), _this), _this.Deck = _this.props.deck, _this.variant = _this.props.variant, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord || [], _this.query = _this.props.query, _this.params = _this.props.params, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.rightItems = _this.props.rightItems ? _this.props.rightItems : false, _this.isSeriesLanding = _this.props.isSeriesLanding ? _this.props.isSeriesLanding : false, _this.state = {
       data: _this.data,
       dataKeptToCompareNewDatarecord: _this.data,
       per: _this.params ? _this.params.to : 2,

package/dist/esm/MediaSeriesLanding.js

@@ -11,11 +11,11 @@ import { c as createCommonjsModule, u as unwrapExports } from './_commonjsHelper
 import Link from 'next/link';
 import MasterDeck from './MasterDeck.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { m as moment } from './moment-bc12cb97.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-e8c6a892.js';
+import { g as getSerializers } from './index-04c4d8d6.js';
 import './define-property-fe54dc9f.js';
 import './_to-object-b50e61c3.js';
 import './es6.string.iterator-bc33758b.js';
@@ -41,7 +41,6 @@ import './isSymbol-a7e9aafe.js';
 import './toNumber-5aeba6e7.js';
 import './index.es-c6222053.js';
 import './visibility-sensor-f40c2564.js';
-import './index-0dbff1d1.js';
 import './ADlgInfeed-78f95e78.js';
 import './AdSlot.js';
 import './Beam.js';
@@ -9388,6 +9387,7 @@ var MediaSeriesCard = function MediaSeriesCard(props) {
       defaultImage = props.defaultImage,
       client = props.client;
 
+  var builder = imageUrlBuilder(client);
 
   return React.createElement(
     'div',
@@ -9405,7 +9405,7 @@ var MediaSeriesCard = function MediaSeriesCard(props) {
             LazyLoad,
             null,
             React.createElement('img', {
-              src: data.thumbnail && data.thumbnail.asset ? urlFor({ client: client, source: data.thumbnail }) : data.thumbnail && _typeof(data.thumbnail == 'string') ? data.thumbnail : defaultImage
+              src: data.thumbnail && data.thumbnail.asset ? builder.image(data.thumbnail).url() : data.thumbnail && _typeof(data.thumbnail == 'string') ? data.thumbnail : defaultImage
             })
           )
         )

package/dist/esm/OncliveHero.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import 'react-bootstrap/Badge';
 import './iconBase-602d52fe.js';
 import { m as moment } from './moment-bc12cb97.js';
-import './index-0dbff1d1.js';
 import './_commonjsHelpers-0c4b6f40.js';
 
 var OncliveHero = function OncliveHero(props) {
   var client = props.client;
 
-
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
   return React.createElement(
     'div',
     { className: 'article-group--container' },
@@ -17,8 +19,7 @@ var OncliveHero = function OncliveHero(props) {
       var articleThumbnail = '';
       var articleAltText = article.title;
       if (article.thumbnail && article.thumbnail.asset) {
-        articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
-
+        articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
         articleAltText = article.thumbnail.asset.originalFileName;
       } else if (props.thumbnail) {
         articleThumbnail = props.thumbnail;

package/dist/esm/OncliveLargeHero.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { m as moment } from './moment-bc12cb97.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { c as clean_html_1 } from './entities-932b50cf.js';
 import { A as AuthorComponent } from './AuthorComponent-5ae7409f.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import './_commonjsHelpers-0c4b6f40.js';
-import './index-0dbff1d1.js';
 import './slicedToArray-be2f7a22.js';
 import './web.dom.iterable-4109ff68.js';
 import './es6.string.iterator-bc33758b.js';
@@ -22,12 +21,15 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
   var subArticles = props.dataRecord.slice(3, props.dataRecord.length);
   var client = props.client;
 
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
 
   var topArticleThumbnail = '';
   var topArticleAltText = topArticle.title;
   if (topArticle.thumbnail && topArticle.thumbnail.asset) {
-    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: 550 });
-
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(550).url();
     topArticleAltText = topArticle.thumbnail.asset.originalFileName;
   } else if (props.thumbnail) {
     topArticleThumbnail = props.thumbnail;
@@ -74,7 +76,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
           var articleThumbnail = '';
           var articleAltText = article.title;
           if (article.thumbnail && article.thumbnail.asset) {
-            articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
+            articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
             articleAltText = article.thumbnail.asset.originalFileName;
           } else if (props.thumbnail) {
             articleThumbnail = props.thumbnail;
@@ -129,8 +131,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
           var articleThumbnail = '';
           var articleAltText = article.title;
           if (article.thumbnail && article.thumbnail.asset) {
-            articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
-
+            articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
             articleAltText = article.thumbnail.asset.originalFileName;
           } else if (props.thumbnail) {
             articleThumbnail = props.thumbnail;
@@ -181,7 +182,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
           var articleThumbnail = '';
           var articleAltText = article.title;
           if (article.thumbnail && article.thumbnail.asset) {
-            articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
+            articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
             articleAltText = article.thumbnail.asset.originalFileName;
           } else if (props.thumbnail) {
             articleThumbnail = props.thumbnail;

package/dist/esm/PartnerDetailListing.js

@@ -3,13 +3,14 @@ import { _ as _slicedToArray } from './slicedToArray-be2f7a22.js';
 import { _ as _extends } from './extends-60e0e1c6.js';
 import React, { useRef, useState, useEffect } from 'react';
 import { TwitterTimelineEmbed } from 'react-twitter-embed';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { s as smoothscroll } from './smoothscroll-fa4e3f8c.js';
-import urlFor from './urlFor.js';
 import { m as moment } from './moment-bc12cb97.js';
 import QueueDeckExpanded from './QueueDeckExpanded.js';
 import Breadcrumbs from './Breadcrumbs.js';
 import Feature from './Feature.js';
-import { g as getSerializers } from './index-e8c6a892.js';
+import urlFor from './urlFor.js';
+import { g as getSerializers } from './index-04c4d8d6.js';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
@@ -19,7 +20,6 @@ import './_library-528f1934.js';
 import './core.get-iterator-method-133dfacd.js';
 import './_iter-detect-7e5e5ce2.js';
 import './_object-pie-133f504a.js';
-import './index-0dbff1d1.js';
 import './toConsumableArray-6d9a4616.js';
 import 'react-bootstrap';
 import './index.es-c6222053.js';
@@ -89,6 +89,10 @@ var ImageSlider = function ImageSlider(props) {
       scrollPosition = _useState6[0],
       setScrollPosition = _useState6[1];
 
+  var builder = imageUrlBuilder(props.client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
   function scrollSlider(e, direction) {
     var slide = e.target.parentElement;
     var scrollOffset = scrollPosition;
@@ -196,7 +200,7 @@ var ImageSlider = function ImageSlider(props) {
           'div',
           { ref: innerSlider, className: 'row__inner' },
           props.data.slides.map(function (img, index) {
-            var thumbnail = urlFor({ client: client, source: img.slideshowImage, imageWidth: 250 });
+            var thumbnail = urlFor(img.slideshowImage).width(250);
             if (!img.slideshowImage.link) {
               return React.createElement(
                 'div',
@@ -265,7 +269,7 @@ var PartnerDetails = function PartnerDetails(_ref) {
             React.createElement('img', {
               alt: partnerDetails.thumbnail && partnerDetails.thumbnail.alt ? partnerDetails.thumbnail.alt : partnerDetails.name,
               style: { maxWidth: '100%' },
-              src: partnerDetails.thumbnail ? urlFor({ client: client, source: partnerDetails.thumbnail.asset }) : '' }),
+              src: partnerDetails.thumbnail ? urlFor(client, partnerDetails.thumbnail.asset) : '' }),
             partnerDetails.thumbnail && partnerDetails.thumbnail.caption && React.createElement(
               'figcaption',
               null,
@@ -278,7 +282,7 @@ var PartnerDetails = function PartnerDetails(_ref) {
           React.createElement('img', {
             alt: partnerDetails.thumbnail && partnerDetails.thumbnail.alt ? partnerDetails.thumbnail.alt : partnerDetails.name,
             style: { maxWidth: '100%' },
-            src: partnerDetails.thumbnail ? urlFor({ client: client, source: partnerDetails.thumbnail.asset }) : '' }),
+            src: partnerDetails.thumbnail ? urlFor(client, partnerDetails.thumbnail.asset) : '' }),
           partnerDetails.thumbnail && partnerDetails.thumbnail.caption && React.createElement(
             'figcaption',
             null,

package/dist/esm/PubSection.js

@@ -13,7 +13,6 @@ import './_iter-detect-7e5e5ce2.js';
 import './_object-pie-133f504a.js';
 import './toConsumableArray-6d9a4616.js';
 import 'react-bootstrap';
-import './urlFor.js';
 import './index-0dbff1d1.js';
 import './index.es-c6222053.js';
 import './moment-bc12cb97.js';

package/dist/esm/PublicationDeck.js

@@ -4,21 +4,16 @@ import Col from 'react-bootstrap/Col';
 import Button from 'react-bootstrap/Button';
 import Card from 'react-bootstrap/Card';
 import { L as LazyLoad } from './index-35bdcc81.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { l as lodash } from './lodash-f97fd99a.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import 'react-dom';
 import 'prop-types';
-import './index-0dbff1d1.js';
 
 var PublicationDeck = function PublicationDeck(props) {
   var data = props.data,
-      _props$imageHeight = props.imageHeight,
-      imageHeight = _props$imageHeight === undefined ? null : _props$imageHeight,
-      _props$imageWidth = props.imageWidth,
-      imageWidth = _props$imageWidth === undefined ? null : _props$imageWidth,
-      _props$imageFit = props.imageFit,
-      imageFit = _props$imageFit === undefined ? null : _props$imageFit,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth,
       href = props.href,
       website = props.website,
       client = props.client;
@@ -38,10 +33,17 @@ var PublicationDeck = function PublicationDeck(props) {
     return o.childIssue && o.childIssue.year ? o.childIssue.year : null;
   }]);
 
+  var urlFor = function urlFor(source) {
+    var builder = imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
+
   var renderCardImage = function renderCardImage(thumbnail) {
     if (thumbnail && thumbnail.asset) {
-      var url = urlFor({ client: client, source: thumbnail, imageHeight: imageHeight, imageWidth: imageWidth, imageFit: imageFit });
-      return url;
+      var url = urlFor(thumbnail);
+      if (imageHeight) url = url.height(imageHeight);
+      if (imageWidth) url = url.width(imageWidth);
+      return url.url();
     } else {
       return website.logo;
     }

package/dist/esm/PublicationLanding.js

@@ -392,9 +392,12 @@ Publication.getInitialProps = async (ctx) => {
     query: { year },
   } = ctx
   const pub = await client.fetch(getQuery('publication'), query)
- **import urlFor from framework**
+  const builder = imageUrlBuilder(client)
+  const urlFor = (source) => {
+    return builder.image(source)
+  }
   pub.issues.map((issue) => {
-    issue.thumbnail = urlFor({client, source: issue.thumbnail})
+    issue.thumbnail = urlFor(issue.thumbnail).url()
   })
   return { pub, year }
 }

package/dist/esm/QueueDeckExpanded.js

@@ -3,7 +3,7 @@ import { _ as _toConsumableArray } from './toConsumableArray-6d9a4616.js';
 import { _ as _extends } from './extends-60e0e1c6.js';
 import React, { useEffect, useState, useRef } from 'react';
 import { Container, Media } from 'react-bootstrap';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { I as InfiniteScroll } from './index.es-c6222053.js';
 import { m as moment } from './moment-bc12cb97.js';
 import { V as VisibilitySensor } from './visibility-sensor-f40c2564.js';
@@ -25,7 +25,6 @@ import './_to-object-b50e61c3.js';
 import './core.get-iterator-method-133dfacd.js';
 import './_iter-detect-7e5e5ce2.js';
 import './_object-pie-133f504a.js';
-import './index-0dbff1d1.js';
 import 'react-dom';
 import './events-6c3a7a63.js';
 import 'prop-types';
@@ -40,15 +39,15 @@ import './asyncToGenerator-7f8f9219.js';
 import './_library-528f1934.js';
 import './Segment.js';
 
-var renderCardImage = function renderCardImage(row, client) {
-  var imageHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var imageWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-  var imageMaxHeight = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-  var imageFit = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-
-  var url = urlFor({ client: client, source: row.thumbnail, imageHeight: imageHeight, imageWidth: imageWidth, imageMaxHeight: imageMaxHeight, imageFit: imageFit });
+var urlFor = function urlFor(source, builder) {
+  return builder.image(source).auto('format');
+};
 
-  return url;
+var renderCardImage = function renderCardImage(row, builder, imageHeight, imageWidth) {
+  var url = urlFor(row.thumbnail, builder);
+  if (imageHeight) url = url.height(imageHeight);
+  if (imageWidth) url = url.width(imageWidth);
+  return url.url();
 };
 
 var loadMore = function loadMore(values, setValues, per) {
@@ -153,7 +152,7 @@ var checkExternalUrl = function checkExternalUrl(url) {
   return new RegExp(['http', 'https'].join('|')).test(url);
 };
 
-var cardLoader = function cardLoader(data, client, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, imageMaxHeight, imageFit, rightItems, brandInsightAd, showBI, itemsPerPage, heroContent, lgInfeedAd, showPubInfo, contentCategoryMapping, showTimeDiff, showTaxonomies, showIntro) {
+var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems, brandInsightAd, showBI, itemsPerPage, heroContent, lgInfeedAd, showPubInfo, contentCategoryMapping, showTimeDiff, showTaxonomies, showIntro) {
   var numberOfItemsBeforeAd = 6;
   var insertBrandInsightAd = function insertBrandInsightAd(arr, index, newElement) {
     return [].concat(_toConsumableArray(arr.slice(0, index)), [newElement], _toConsumableArray(arr.slice(index)));
@@ -288,7 +287,7 @@ var cardLoader = function cardLoader(data, client, mapping, values, seoPaginate,
                   React.createElement(
                     LazyLoad,
                     { height: imageHeight, placeholder: React.createElement(ImagePlaceholder, null) },
-                    article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'img-fluid', src: renderCardImage(article, client, imageHeight, imageWidth, imageMaxHeight, imageFit), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
+                    article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
                   ),
                   article.source && React.createElement(
                     'div',
@@ -448,7 +447,7 @@ var cardLoader = function cardLoader(data, client, mapping, values, seoPaginate,
                   React.createElement(
                     LazyLoad,
                     { height: imageHeight, placeholder: React.createElement(ImagePlaceholder, null) },
-                    article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'img-fluid', src: renderCardImage(article, client, imageHeight, imageWidth, imageMaxHeight, imageFit), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
+                    article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
                   ),
                   article.source && React.createElement(
                     'div',
@@ -624,7 +623,7 @@ var cardLoader = function cardLoader(data, client, mapping, values, seoPaginate,
                 React.createElement(
                   LazyLoad,
                   { height: imageHeight, placeholder: React.createElement(ImagePlaceholder, null) },
-                  article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, client, imageHeight, imageWidth, imageMaxHeight, imageFit), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
+                  article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
                 ),
                 article.source && React.createElement(
                   'div',
@@ -805,7 +804,7 @@ var cardLoader = function cardLoader(data, client, mapping, values, seoPaginate,
                     React.createElement(
                       LazyLoad,
                       { height: imageHeight, placeholder: React.createElement(ImagePlaceholder, null) },
-                      article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'img-fluid', src: renderCardImage(article, client, imageHeight, imageWidth, imageMaxHeight, imageFit), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
+                      article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
                     ),
                     article.source && React.createElement(
                       'div',
@@ -965,7 +964,7 @@ var cardLoader = function cardLoader(data, client, mapping, values, seoPaginate,
                     React.createElement(
                       LazyLoad,
                       { height: imageHeight, placeholder: React.createElement(ImagePlaceholder, null) },
-                      article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'img-fluid', src: renderCardImage(article, client, imageHeight, imageWidth, imageMaxHeight, imageFit), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
+                      article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
                     ),
                     article.source && React.createElement(
                       'div',
@@ -1130,7 +1129,7 @@ var cardLoader = function cardLoader(data, client, mapping, values, seoPaginate,
                   React.createElement(
                     LazyLoad,
                     { height: imageHeight, placeholder: React.createElement(ImagePlaceholder, null) },
-                    article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, client, imageHeight, imageWidth, imageMaxHeight, imageFit), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
+                    article.thumbnail && article.thumbnail.asset ? React.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
                   ),
                   article.source && React.createElement(
                     'div',
@@ -1357,8 +1356,6 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       showCategory = props.showCategory,
       imageHeight = props.imageHeight,
       imageWidth = props.imageWidth,
-      imageMaxHeight = props.imageMaxHeight,
-      imageFit = props.imageFit,
       rightItems = props.rightItems,
       brandInsightAd = props.brandInsightAd,
       _props$showBI = props.showBI,
@@ -1380,6 +1377,8 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
   var initialCurrentPage = props.currentPage,
       showPublished = props.showPublished;
 
+  var builder = imageUrlBuilder(client);
+
   var _useState3 = useState(initialData),
       _useState4 = _slicedToArray(_useState3, 2),
       data = _useState4[0],
@@ -1491,7 +1490,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
         React.createElement(
           Container,
           null,
-          cardLoader(data, client, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, imageMaxHeight, imageFit, rightItems, brandInsightAd, showBI, itemsPerPage, heroContent, lgInfeedAd, showPubInfo, contentCategoryMapping, showTimeDiff, showTaxonomies, showIntro)
+          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems, brandInsightAd, showBI, itemsPerPage, heroContent, lgInfeedAd, showPubInfo, contentCategoryMapping, showTimeDiff, showTaxonomies, showIntro)
         )
       ),
       React.createElement(
@@ -1505,7 +1504,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       React.createElement(
         Container,
         null,
-        cardLoader(data, client, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, imageMaxHeight, imageFit, rightItems, brandInsightAd, showBI, itemsPerPage, heroContent, lgInfeedAd, showPubInfo, contentCategoryMapping, showTimeDiff, showTaxonomies, showIntro)
+        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems, brandInsightAd, showBI, itemsPerPage, heroContent, lgInfeedAd, showPubInfo, contentCategoryMapping, showTimeDiff, showTaxonomies, showIntro)
       ),
       React.createElement(
         'div',

package/dist/esm/RecentNews.js

@@ -1,10 +1,13 @@
 import React from 'react';
+import './moment-bc12cb97.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { a as FaLongArrowAltRight } from './index.esm-a8ff922c.js';
+import './_commonjsHelpers-0c4b6f40.js';
 import './iconBase-602d52fe.js';
 
 var RecentNews = function RecentNews(_ref) {
-  _ref.client;
-      var _ref$dataRecord = _ref.dataRecord,
+  var client = _ref.client,
+      _ref$dataRecord = _ref.dataRecord,
       dataRecord = _ref$dataRecord === undefined ? [] : _ref$dataRecord,
       _ref$linkTo = _ref.linkTo,
       linkTo = _ref$linkTo === undefined ? '/news' : _ref$linkTo,
@@ -15,7 +18,7 @@ var RecentNews = function RecentNews(_ref) {
       _ref$linkTitle = _ref.linkTitle,
       linkTitle = _ref$linkTitle === undefined ? 'View More ' : _ref$linkTitle;
 
-
+  imageUrlBuilder(client);
   var topArticle = dataRecord[0];
   var subArticles = dataRecord.slice(1, dataRecord.length);
 

package/dist/esm/RelatedContent.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { m as moment } from './moment-bc12cb97.js';
 import 'react-bootstrap/Media';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import './_commonjsHelpers-0c4b6f40.js';
-import './index-0dbff1d1.js';
 import 'react-dom';
 import 'prop-types';
 
@@ -43,6 +42,10 @@ var RelatedContent = function RelatedContent(props) {
       _props$defaultImage = props.defaultImage,
       defaultImage = _props$defaultImage === undefined ? '' : _props$defaultImage;
 
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
 
   return React.createElement(
     'div',
@@ -66,7 +69,7 @@ var RelatedContent = function RelatedContent(props) {
               LazyLoad,
               { once: true },
               React.createElement('img', {
-                src: article.thumbnail ? urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 500 }) : defaultImage,
+                src: article.thumbnail ? urlFor(article.thumbnail.asset).width(500).url() : defaultImage,
                 alt: article.title
               })
             )

package/dist/esm/SeriesListingDeck.js

@@ -5,7 +5,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
 import { l as lib_3 } from './index-2446af28.js';
 import { I as InfiniteScroll } from './index.es-c6222053.js';
-import { S as SeriesSlider } from './SeriesSlider-8f2aca58.js';
+import { S as SeriesSlider } from './SeriesSlider-8414085b.js';
 import { V as VisibilitySensor } from './visibility-sensor-f40c2564.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
@@ -20,7 +20,6 @@ import './index-c7e2ac95.js';
 import './index-35bdcc81.js';
 import 'react-dom';
 import './smoothscroll-fa4e3f8c.js';
-import './urlFor.js';
 import './index-0dbff1d1.js';
 import './main-b5c5aac1.js';
 

package/dist/esm/{SeriesSlider-8f2aca58.js → SeriesSlider-8414085b.js}

@@ -3,7 +3,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import { g as getYoutubeId } from './index-c7e2ac95.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import { s as smoothscroll } from './smoothscroll-fa4e3f8c.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { m as main_43, a as main_49, b as main_42 } from './main-b5c5aac1.js';
 
 /*
@@ -52,6 +52,11 @@ var SeriesSlider = function SeriesSlider(_ref) {
       tileHeight = _useState8[0],
       setTileHeight = _useState8[1];
 
+  var urlFor = function urlFor(source, client) {
+    var builder = imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
+
   useEffect(function () {
     //IE11 Polyfill
     smoothscroll.polyfill();
@@ -246,7 +251,7 @@ var SeriesSlider = function SeriesSlider(_ref) {
           var url = '/view/' + article.url.current;
           var thumbnail = void 0;
           if (article.thumbnail && article.thumbnail.asset) {
-            thumbnail = urlFor({ source: article.thumbnail, client: client });
+            thumbnail = urlFor(article.thumbnail, client);
           } else {
             thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(article.url) + '/hqdefault.jpg';
           }

package/dist/esm/TaxonomyCard.js

@@ -5,14 +5,13 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Card from 'react-bootstrap/Card';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import { r as reactSocialIcons_1 } from './react-social-icons-91f9716f.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './_to-object-b50e61c3.js';
 import './_object-pie-133f504a.js';
 import 'prop-types';
-import './index-0dbff1d1.js';
 import 'react-dom';
 
 var TaxonomyCard = function TaxonomyCard(props) {
@@ -26,16 +25,20 @@ var TaxonomyCard = function TaxonomyCard(props) {
       client = props.client,
       _props$imageHeight = props.imageHeight,
       imageHeight = _props$imageHeight === undefined ? 270 : _props$imageHeight,
-      _props$imageWidth = props.imageWidth,
-      imageWidth = _props$imageWidth === undefined ? null : _props$imageWidth,
-      _props$imageFit = props.imageFit,
-      imageFit = _props$imageFit === undefined ? null : _props$imageFit,
+      imageWidth = props.imageWidth,
       getSerializers = props.getSerializers;
 
+  var builder = imageUrlBuilder(client);
+
+  var urlFor = function urlFor(source) {
+    return builder.image(source).auto('format');
+  };
 
   var renderCardImage = function renderCardImage(row) {
-    var url = urlFor({ client: client, source: row.thumbnail, imageHeight: imageHeight, imageWidth: imageWidth, imageFit: imageFit });
-    return url;
+    var url = urlFor(row.thumbnail);
+    if (imageHeight) url = url.height(imageHeight);
+    if (imageWidth) url = url.width(imageWidth);
+    return url.url();
   };
 
   var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';

package/dist/esm/TaxonomyDescription.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-e8c6a892.js';
+import { g as getSerializers } from './index-04c4d8d6.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
 import './_to-object-b50e61c3.js';
@@ -17,7 +17,6 @@ import 'prop-types';
 import './index-0dbff1d1.js';
 import './slicedToArray-be2f7a22.js';
 import 'react-bootstrap';
-import './urlFor.js';
 import './index-2446af28.js';
 import './events-6c3a7a63.js';
 import './index-c7e2ac95.js';

package/dist/esm/ThumbnailCard.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import Media from 'react-bootstrap/Media';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import { c as clean_html_1 } from './entities-932b50cf.js';
-import './index-0dbff1d1.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import 'react-dom';
 import 'prop-types';
@@ -14,6 +13,11 @@ var ThumbnailCard = function ThumbnailCard(_ref) {
       client = _ref.client,
       defaultImage = _ref.defaultImage;
 
+  var builder = imageUrlBuilder(client);
+
+  var urlFor = function urlFor(source) {
+    return builder.image(source).auto('format');
+  };
 
   return React.createElement(
     'div',
@@ -25,7 +29,7 @@ var ThumbnailCard = function ThumbnailCard(_ref) {
         React.createElement(
           LazyLoad,
           { height: size },
-          React.createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail ? urlFor({ client: client, source: item.thumbnail }) : defaultImage, alt: 'Generic placeholder' })
+          React.createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail ? urlFor(item.thumbnail).url() : defaultImage, alt: 'Generic placeholder' })
         ),
         React.createElement(
           Media.Body,