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

package/dist/cjs/RelatedContent.js

@@ -3,10 +3,9 @@
 var React = require('react');
 var moment = require('./moment-aca40de1.js');
 require('react-bootstrap/Media');
-var urlFor = require('./urlFor.js');
-var index = require('./index-eadd5035.js');
+var index = require('./index-efca863c.js');
+var index$1 = require('./index-eadd5035.js');
 require('./_commonjsHelpers-06173234.js');
-require('./index-efca863c.js');
 require('react-dom');
 require('prop-types');
 
@@ -49,6 +48,10 @@ var RelatedContent = function RelatedContent(props) {
       _props$defaultImage = props.defaultImage,
       defaultImage = _props$defaultImage === undefined ? '' : _props$defaultImage;
 
+  var builder = index.imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
 
   return React__default['default'].createElement(
     'div',
@@ -61,18 +64,18 @@ var RelatedContent = function RelatedContent(props) {
     React__default['default'].createElement(
       'div',
       { className: 'related-articles-container' },
-      dataRecord.map(function (article, index$1) {
+      dataRecord.map(function (article, index) {
         return React__default['default'].createElement(
           'a',
-          { key: index$1, href: '/view/' + article.url.current, className: 'related-article' },
+          { key: index, href: '/view/' + article.url.current, className: 'related-article' },
           React__default['default'].createElement(
             'figure',
             null,
             React__default['default'].createElement(
-              index.LazyLoad,
+              index$1.LazyLoad,
               { once: true },
               React__default['default'].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/cjs/SeriesListingDeck.js

@@ -7,7 +7,7 @@ var React = require('react');
 var Router = require('next/router');
 var index = require('./index-fc2f1ca2.js');
 var index_es = require('./index.es-f3e47207.js');
-var SeriesSlider = require('./SeriesSlider-d54fa925.js');
+var SeriesSlider = require('./SeriesSlider-c022ce04.js');
 var visibilitySensor = require('./visibility-sensor-eb2c5b69.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -22,7 +22,6 @@ require('./index-187c967e.js');
 require('./index-eadd5035.js');
 require('react-dom');
 require('./smoothscroll-99df7f93.js');
-require('./urlFor.js');
 require('./index-efca863c.js');
 require('./main-025fdc78.js');
 

package/dist/cjs/{SeriesSlider-d54fa925.js → SeriesSlider-c022ce04.js}

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./index-187c967e.js');
 var index$1 = require('./index-eadd5035.js');
 var smoothscroll = require('./smoothscroll-99df7f93.js');
-var urlFor = require('./urlFor.js');
+var index$2 = require('./index-efca863c.js');
 var main = require('./main-025fdc78.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -58,6 +58,11 @@ var SeriesSlider = function SeriesSlider(_ref) {
       tileHeight = _useState8[0],
       setTileHeight = _useState8[1];
 
+  var urlFor = function urlFor(source, client) {
+    var builder = index$2.imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
+
   React.useEffect(function () {
     //IE11 Polyfill
     smoothscroll.smoothscroll.polyfill();
@@ -252,7 +257,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/' + index.getYoutubeId(article.url) + '/hqdefault.jpg';
           }

package/dist/cjs/TaxonomyCard.js

@@ -7,14 +7,13 @@ var Container = require('react-bootstrap/Container');
 var Row = require('react-bootstrap/Row');
 var Col = require('react-bootstrap/Col');
 var Card = require('react-bootstrap/Card');
-var urlFor = require('./urlFor.js');
-var index = require('./index-eadd5035.js');
+var index = require('./index-efca863c.js');
+var index$1 = require('./index-eadd5035.js');
 var reactSocialIcons = require('./react-social-icons-af932527.js');
 require('./_commonjsHelpers-06173234.js');
 require('./_to-object-6de10e57.js');
 require('./_object-pie-083f2dd6.js');
 require('prop-types');
-require('./index-efca863c.js');
 require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,16 +35,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 = index.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';
@@ -62,7 +65,7 @@ var TaxonomyCard = function TaxonomyCard(props) {
       React__default['default'].createElement(
         Row__default['default'],
         null,
-        data && data.map(function (row, index$1) {
+        data && data.map(function (row, index) {
           if (columns === 'rotate' && itemCounter % 3 === 0) {
             lgVar = 12;
           } else if (columns && columns !== 'rotate') {
@@ -115,7 +118,7 @@ var TaxonomyCard = function TaxonomyCard(props) {
                     Col__default['default'],
                     null,
                     React__default['default'].createElement(
-                      index.LazyLoad,
+                      index$1.LazyLoad,
                       { height: imageHeight },
                       row && row.thumbnail && React__default['default'].createElement(
                         'figure',

package/dist/cjs/TaxonomyDescription.js

@@ -6,7 +6,7 @@ var React = require('react');
 var Router = require('next/router');
 var Head = require('next/head');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-55c6de08.js');
+var getSerializers = require('./index-e5fd35c7.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
 require('./_to-object-6de10e57.js');
@@ -19,7 +19,6 @@ require('prop-types');
 require('./index-efca863c.js');
 require('./slicedToArray-5d1bc3b3.js');
 require('react-bootstrap');
-require('./urlFor.js');
 require('./index-fc2f1ca2.js');
 require('./events-1b438fe7.js');
 require('./index-187c967e.js');

package/dist/cjs/ThumbnailCard.js

@@ -2,10 +2,9 @@
 
 var React = require('react');
 var Media = require('react-bootstrap/Media');
-var urlFor = require('./urlFor.js');
-var index = require('./index-eadd5035.js');
+var index = require('./index-efca863c.js');
+var index$1 = require('./index-eadd5035.js');
 var entities = require('./entities-3f9d0f2f.js');
-require('./index-efca863c.js');
 require('./_commonjsHelpers-06173234.js');
 require('react-dom');
 require('prop-types');
@@ -21,18 +20,23 @@ var ThumbnailCard = function ThumbnailCard(_ref) {
       client = _ref.client,
       defaultImage = _ref.defaultImage;
 
+  var builder = index.imageUrlBuilder(client);
+
+  var urlFor = function urlFor(source) {
+    return builder.image(source).auto('format');
+  };
 
   return React__default['default'].createElement(
     'div',
     null,
-    mediaData && mediaData.map(function (item, index$1) {
+    mediaData && mediaData.map(function (item, index) {
       return React__default['default'].createElement(
         Media__default['default'],
         { className: 'mb-3 thumbnail-card' },
         React__default['default'].createElement(
-          index.LazyLoad,
+          index$1.LazyLoad,
           { height: size },
-          React__default['default'].createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail ? urlFor({ client: client, source: item.thumbnail }) : defaultImage, alt: 'Generic placeholder' })
+          React__default['default'].createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail ? urlFor(item.thumbnail).url() : defaultImage, alt: 'Generic placeholder' })
         ),
         React__default['default'].createElement(
           Media__default['default'].Body,

package/dist/cjs/VerticalHero.js

@@ -2,9 +2,8 @@
 
 var React = require('react');
 require('./moment-aca40de1.js');
-var urlFor = require('./urlFor.js');
+var index = require('./index-efca863c.js');
 require('./_commonjsHelpers-06173234.js');
-require('./index-efca863c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,6 +11,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var VerticalHero = function VerticalHero(props) {
   var client = props.client;
+
+  var builder = index.imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
   var _props$heroTitle = props.heroTitle,
       heroTitle = _props$heroTitle === undefined ? '' : _props$heroTitle;
 
@@ -35,7 +39,7 @@ var VerticalHero = function VerticalHero(props) {
         var articleThumbnail = '';
         var articleAltText = article.title;
         if (article.thumbnail && article.thumbnail.asset) {
-          articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 500 });
+          articleThumbnail = urlFor(article.thumbnail.asset).width(500).url();
           articleAltText = article.thumbnail.asset.originalFileName;
         } else if (props.thumbnail) {
           articleThumbnail = props.thumbnail;

package/dist/cjs/VideoProgramLandingPage.js

@@ -7,7 +7,7 @@ var BlockContent = require('./BlockContent-36e54d77.js');
 var Col = require('react-bootstrap/Col');
 var Form = require('react-bootstrap/Form');
 var Button = require('react-bootstrap/Button');
-var getSerializers = require('./index-55c6de08.js');
+var getSerializers = require('./index-e5fd35c7.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -21,7 +21,6 @@ require('prop-types');
 require('./index-efca863c.js');
 require('./slicedToArray-5d1bc3b3.js');
 require('react-bootstrap');
-require('./urlFor.js');
 require('./index-fc2f1ca2.js');
 require('./events-1b438fe7.js');
 require('next/router');

package/dist/cjs/VideoSeriesCard.js

@@ -2,8 +2,8 @@
 
 var _typeof = require('./typeof-88a668c5.js');
 var React = require('react');
-var index = require('./index-eadd5035.js');
-var urlFor = require('./urlFor.js');
+var index$1 = require('./index-eadd5035.js');
+var index = require('./index-efca863c.js');
 var moment = require('./moment-aca40de1.js');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
 require('prop-types');
@@ -15,7 +15,6 @@ require('./_is-array-6128bd56.js');
 require('./_object-pie-083f2dd6.js');
 require('./_library-dd23b178.js');
 require('react-dom');
-require('./index-efca863c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,10 +29,10 @@ var VideoSeriesCard = function VideoSeriesCard(props) {
       variant = props.variant,
       defaultImage = props.defaultImage,
       client = props.client,
-      index$1 = props.index;
-
-  var episode = parseInt(index$1) + 1;
+      index$2 = props.index;
 
+  var episode = parseInt(index$2) + 1;
+  var builder = index.imageUrlBuilder(client);
   return React__default['default'].createElement(
     'div',
     { className: styles.article },
@@ -47,10 +46,10 @@ var VideoSeriesCard = function VideoSeriesCard(props) {
           'figure',
           null,
           React__default['default'].createElement(
-            index.LazyLoad,
+            index$1.LazyLoad,
             null,
             React__default['default'].createElement('img', {
-              src: data.thumbnail && data.thumbnail.asset ? urlFor({ client: client, source: data.thumbnail }) : data.thumbnail && _typeof._typeof(data.thumbnail == 'string') ? data.thumbnail : defaultImage
+              src: data.thumbnail && data.thumbnail.asset ? builder.image(data.thumbnail).url() : data.thumbnail && _typeof._typeof(data.thumbnail == 'string') ? data.thumbnail : defaultImage
             })
           )
         )

package/dist/cjs/VideoSeriesLandingPage.js

@@ -48,7 +48,6 @@ require('./Segment.js');
 require('./main-025fdc78.js');
 require('./ADInfeed-1ac86856.js');
 require('./index-eadd5035.js');
-require('./urlFor.js');
 require('./style-inject.es-dcee06b6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/cjs/VideoSeriesListing.js

@@ -31,7 +31,6 @@ require('./core.get-iterator-method-f474eacc.js');
 require('./index-187c967e.js');
 require('./index-eadd5035.js');
 require('./smoothscroll-99df7f93.js');
-require('./urlFor.js');
 require('./index-efca863c.js');
 require('./main-025fdc78.js');
 require('./isSymbol-03abbdf0.js');
@@ -261,7 +260,7 @@ var VideoSeriesListing = function (_React$Component) {
   inherits._createClass(VideoSeriesListing, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
-      // console.log(this.state)
+      console.log(this.state);
     }
   }, {
     key: 'render',

package/dist/cjs/View.js

@@ -17,9 +17,9 @@ var FormControl = require('react-bootstrap/FormControl');
 var Button = require('react-bootstrap/Button');
 var visibilitySensor = require('./visibility-sensor-eb2c5b69.js');
 var SocialShare = require('./SocialShare.js');
-var getSerializers = require('./index-55c6de08.js');
+var getSerializers = require('./index-e5fd35c7.js');
 var AdSlot = require('./AdSlot.js');
-var SeriesSlider = require('./SeriesSlider-d54fa925.js');
+var SeriesSlider = require('./SeriesSlider-c022ce04.js');
 var getTargeting = require('./getTargeting-be6168ad.js');
 var getKeywords = require('./getKeywords.js');
 var urlFor = require('./urlFor.js');
@@ -153,7 +153,7 @@ var DocumentGroup = function DocumentGroup(_ref) {
   var thumbnailUrl = false;
 
   if (article.documentGroup.thumbnail) {
-    thumbnailUrl = urlFor({ client: client, source: article.documentGroup.thumbnail });
+    thumbnailUrl = urlFor(client, article.documentGroup.thumbnail).url();
   }
 
   return React__default['default'].createElement(
@@ -245,7 +245,7 @@ var ISI = function ISI(props) {
       var article_body = document.getElementById('article__block');
       var isi = document.getElementById('isi');
       var articleBottomPosition = article_body.getBoundingClientRect().bottom - window.innerHeight;
-      // console.log(articleBottomPosition, bottomOfArticle)
+      console.log(articleBottomPosition, bottomOfArticle);
       if (articleBottomPosition < 30 && !isi.classList.contains('in-view')) {
         setbottomOfArticle(true);
       }
@@ -371,7 +371,7 @@ var RelatedArticle = function RelatedArticle(_ref) {
           { className: styles.imgWrapper, href: '/view/' + (article.url ? article.url.current : '') },
           article.thumbnail ? React__default['default'].createElement('img', {
             style: { objectFit: 'cover', objectPosition: 'center' },
-            src: article.thumbnail && urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 }),
+            src: article.thumbnail && urlFor(client, article.thumbnail.asset).width(250).url(),
             alt: article.title
           }) : React__default['default'].createElement(
             React__default['default'].Fragment,
@@ -975,7 +975,7 @@ var Article = React.forwardRef(function (props, ref) {
     var shareUrl = shareBaseUrl + props.article.url.current;
     var shareTitle = article.title;
     var shareSummary = article.summary;
-    var shareImage = thumbnail && thumbnail.asset ? urlFor({ client: props.client, source: thumbnail.asset }) : shareImageDefault;
+    var shareImage = thumbnail && thumbnail.asset ? urlFor(props.client, thumbnail.asset).url() : shareImageDefault;
     var siteName = props.website && props.website.title ? props.website.title : '';
     var shareKeywords = getKeywords(props.article).join(',');
 
@@ -1074,7 +1074,7 @@ var Article = React.forwardRef(function (props, ref) {
                     return React__default['default'].createElement(
                       'span',
                       { key: index },
-                      getSerializers.renderAuthor(authorDetail.displayName, authorDetail.url, index, authorDetails.length, authorPrefix, authorDetail.biography && renderAuthorBiography(authorDetail.biography[0]), authorDetail.profileImage && urlFor({ client: props.client, source: authorDetail.profileImage, imageHeight: authorImgHeight }))
+                      getSerializers.renderAuthor(authorDetail.displayName, authorDetail.url, index, authorDetails.length, authorPrefix, authorDetail.biography && renderAuthorBiography(authorDetail.biography[0]), authorDetail.profileImage && urlFor(props.client, authorDetail.profileImage).height(authorImgHeight).url())
                     );
                   }),
                   React__default['default'].createElement(
@@ -1784,7 +1784,7 @@ View.returnGetInitialProps = function () {
                         seriesUrl: '?seriesArticle=' + seriesArticle,
                         seriesTitle: subArticle.title,
                         seriesSummary: subArticle.summary,
-                        seriesThumbnail: subArticle.thumbnail && subArticle.thumbnail.asset ? urlFor({ client: client, source: subArticle.thumbnail.asset }) : null
+                        seriesThumbnail: subArticle.thumbnail && subArticle.thumbnail.asset ? urlFor(client, subArticle.thumbnail.asset).url() : null
                       };
                       article.seriesShareOptions = seriesShareOptions;
                     }
@@ -1797,7 +1797,7 @@ View.returnGetInitialProps = function () {
                         seriesUrl: '?seriesVid=' + seriesVid,
                         seriesTitle: video.title,
                         seriesSummary: video.intro,
-                        seriesThumbnail: video.thumbnail && video.thumbnail.asset ? urlFor({ client: client, source: video.thumbnail.asset }) : null
+                        seriesThumbnail: video.thumbnail && video.thumbnail.asset ? urlFor(client, video.thumbnail.asset).url() : null
                       };
                       article.seriesShareOptions = seriesShareOptions;
                     }

package/dist/cjs/YahooHero.js

@@ -2,12 +2,11 @@
 
 var React = require('react');
 var moment = require('./moment-aca40de1.js');
-var urlFor = require('./urlFor.js');
+var index = require('./index-efca863c.js');
 var entities = require('./entities-3f9d0f2f.js');
 var AuthorComponent = require('./AuthorComponent-c21aac7f.js');
-var index = require('./index-eadd5035.js');
+var index$1 = require('./index-eadd5035.js');
 require('./_commonjsHelpers-06173234.js');
-require('./index-efca863c.js');
 require('./slicedToArray-5d1bc3b3.js');
 require('./web.dom.iterable-46657b5c.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -27,11 +26,15 @@ var YahooHero = function YahooHero(props) {
   var subArticles = props.dataRecord.slice(1, props.dataRecord.length);
   var client = props.client;
 
+  var builder = index.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: 600 });
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(600).url();
     topArticleAltText = topArticle.thumbnail.asset.originalFileName;
   } else if (props.thumbnail) {
     topArticleThumbnail = props.thumbnail;
@@ -76,12 +79,11 @@ var YahooHero = function YahooHero(props) {
     React__default['default'].createElement(
       'div',
       { className: 'yh-sub-article-container' },
-      subArticles.map(function (article, index$1) {
+      subArticles.map(function (article, index) {
         var articleThumbnail = '';
         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();
           article.thumbnail.asset.originalFileName;
         } else if (props.thumbnail) {
           articleThumbnail = props.thumbnail;
@@ -89,7 +91,7 @@ var YahooHero = function YahooHero(props) {
 
         return React__default['default'].createElement(
           'div',
-          { key: index$1, className: 'yh-sub-article' },
+          { key: index, className: 'yh-sub-article' },
           React__default['default'].createElement(
             'a',
             { href: '/view/' + article.url.current },
@@ -110,9 +112,9 @@ var YahooHero = function YahooHero(props) {
             moment.moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
           ),
           article.authorMapping && article.authorMapping.length > 0 && React__default['default'].createElement(
-            index.LazyLoad,
+            index$1.LazyLoad,
             { height: 50 },
-            React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: article.authorMapping })
+            React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
           )
         );
       })
@@ -120,7 +122,7 @@ var YahooHero = function YahooHero(props) {
     React__default['default'].createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-hero{\n          padding-bottom:15px\n        }\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: Roboto, sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 615px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          max-height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
+      '\n        .article-hero{\n          padding-bottom:15px\n        }\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: Roboto, sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
     )
   );
 };

package/dist/cjs/YoutubeGroup.js

@@ -6,7 +6,7 @@ var React = require('react');
 var index = require('./index-187c967e.js');
 var index$1 = require('./index-eadd5035.js');
 var smoothscroll = require('./smoothscroll-99df7f93.js');
-var urlFor = require('./urlFor.js');
+var index$2 = require('./index-efca863c.js');
 var main = require('./main-025fdc78.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -18,7 +18,6 @@ require('./_library-dd23b178.js');
 require('./core.get-iterator-method-f474eacc.js');
 require('react-dom');
 require('prop-types');
-require('./index-efca863c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -57,6 +56,11 @@ var YoutubeGroup = function YoutubeGroup(props) {
       tileHeight = _useState8[0],
       setTileHeight = _useState8[1];
 
+  var urlFor = function urlFor(source, client) {
+    var builder = index$2.imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
+
   React.useEffect(function () {
     //IE11 Polyfill
     smoothscroll.smoothscroll.polyfill();
@@ -250,7 +254,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
             var url = video.url;
             var thumbnail = void 0;
             if (video.thumbnail && video.thumbnail.asset) {
-              thumbnail = urlFor({ source: video.thumbnail, client: props.client });
+              thumbnail = urlFor(video.thumbnail, props.client);
             } else if (_typeof._typeof(video.thumbnail == 'string')) {
               thumbnail = video.thumbnail;
             } else {
@@ -305,7 +309,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
             var _url = '' + video.link;
             var _thumbnail = void 0;
             if (video.thumbnail && video.thumbnail.asset) {
-              _thumbnail = urlFor({ source: video.thumbnail, client: props.client });
+              _thumbnail = urlFor(video.thumbnail, props.client);
             } else {
               _thumbnail = 'https://img.youtube.com/vi/' + index.getYoutubeId(video.url) + '/hqdefault.jpg';
             }

package/dist/cjs/getSerializers.js

@@ -1,7 +1,7 @@
 'use strict';
 
 require('react');
-var getSerializers = require('./index-55c6de08.js');
+var getSerializers = require('./index-e5fd35c7.js');
 require('./BlockContent-36e54d77.js');
 require('./entities-3f9d0f2f.js');
 require('./slicedToArray-5d1bc3b3.js');
@@ -11,7 +11,6 @@ require('./es6.string.iterator-c2573ffd.js');
 require('./_to-object-6de10e57.js');
 require('./core.get-iterator-method-f474eacc.js');
 require('react-bootstrap');
-require('./urlFor.js');
 require('./index-efca863c.js');
 require('./index-fc2f1ca2.js');
 require('./events-1b438fe7.js');