@mjhls/mjh-framework 1.0.113 → 1.0.114

package/dist/index.es.js

@@ -8501,7 +8501,10 @@ var DeckContent = function (_React$Component) {
       return builder.image(source);
     }, _this.renderCardImage = function (row, page) {
       if (row.thumbnail && row.thumbnail.asset) {
-        return _this.urlFor(row.thumbnail).url();
+        var url = _this.urlFor(row.thumbnail);
+        if (_this.props.imageHeight) url = url.height(_this.props.imageHeight);
+        if (_this.props.imageWidth) url = url.width(_this.props.imageWidth);
+        return url.url();
       } else {
         return _this.defaultImage;
       }
@@ -8574,6 +8577,50 @@ var DeckContent = function (_React$Component) {
           }
         }
       }
+    }, _this.renderAuthor = function (authorDetail, index$$1, length) {
+      if (authorDetail) {
+        var _id = authorDetail._id,
+            displayName = authorDetail.displayName,
+            url = authorDetail.url;
+
+        if (displayName && url && url.current) {
+          return React__default.createElement(
+            'div',
+            { key: _id },
+            index$$1 === 0 && React__default.createElement(
+              'span',
+              { className: 'pr-1' },
+              'By'
+            ),
+            React__default.createElement(
+              Link,
+              { href: '/authors/[url]', as: '/authors/' + url.current },
+              React__default.createElement(
+                'a',
+                { className: 'text-muted' },
+                displayName,
+                length !== index$$1 + 1 && React__default.createElement('br', null)
+              )
+            )
+          );
+        } else if (displayName) {
+          return React__default.createElement(
+            'div',
+            { key: _id },
+            index$$1 === 0 && React__default.createElement(
+              'span',
+              { className: 'pr-1' },
+              'By'
+            ),
+            React__default.createElement(
+              'span',
+              { className: 'text-muted' },
+              displayName,
+              length !== index$$1 + 1 && React__default.createElement('br', null)
+            )
+          );
+        }
+      } else return null;
     }, _this.cardLoader = function (page, columns, variant) {
       var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';
 
@@ -8628,18 +8675,21 @@ var DeckContent = function (_React$Component) {
                         Card.Title,
                         null,
                         row.title
-                      ),
-                      _this.props.showPublished && row.published && React__default.createElement(
-                        Card.Subtitle,
-                        null,
-                        moment(row.published).format('MMMM DD, YYYY')
-                      ),
-                      React__default.createElement(
-                        Card.Text,
-                        null,
-                        row.summary
                       )
                     )
+                  ),
+                  _this.props.showPublished && row.published && React__default.createElement(
+                    Card.Subtitle,
+                    null,
+                    moment(row.published).format('MMMM DD, YYYY')
+                  ),
+                  _this.props.showAuthor && row.authorMapping && row.authorMapping.length > 0 && row.authorMapping.map(function (authorDetail, index$$1) {
+                    return _this.renderAuthor(authorDetail, index$$1, row.authorMapping.length);
+                  }),
+                  React__default.createElement(
+                    Card.Text,
+                    null,
+                    row.summary
                   )
                 )
               )
@@ -9832,7 +9882,10 @@ var GridContent = function (_React$Component) {
       return builder.image(source);
     }, _this.renderCardImage = function (row, page) {
       if (row.thumbnail && row.thumbnail.asset) {
-        return _this.urlFor(row.thumbnail).url();
+        var url = _this.urlFor(row.thumbnail);
+        if (_this.props.imageHeight) url = url.height(_this.props.imageHeight);
+        if (_this.props.imageWidth) url = url.width(_this.props.imageWidth);
+        return url.url();
       } else {
         return _this.defaultImage;
       }
@@ -9895,47 +9948,49 @@ var GridContent = function (_React$Component) {
         }
       }
     }, _this.renderAuthor = function (authorDetail, index$$1, length) {
-      var _id = authorDetail._id,
-          displayName = authorDetail.displayName,
-          url = authorDetail.url;
+      if (authorDetail) {
+        var _id = authorDetail._id,
+            displayName = authorDetail.displayName,
+            url = authorDetail.url;
 
-      if (displayName && url && url.current) {
-        return React__default.createElement(
-          'div',
-          { key: _id },
-          index$$1 === 0 && React__default.createElement(
-            'span',
-            { className: 'pr-1' },
-            'By'
-          ),
-          React__default.createElement(
-            Link,
-            { href: '/authors/[url]', as: '/authors/' + url.current },
+        if (displayName && url && url.current) {
+          return React__default.createElement(
+            'div',
+            { key: _id },
+            index$$1 === 0 && React__default.createElement(
+              'span',
+              { className: 'pr-1' },
+              'By'
+            ),
             React__default.createElement(
-              'a',
+              Link,
+              { href: '/authors/[url]', as: '/authors/' + url.current },
+              React__default.createElement(
+                'a',
+                { className: 'text-muted' },
+                displayName,
+                length !== index$$1 + 1 && React__default.createElement('br', null)
+              )
+            )
+          );
+        } else if (displayName) {
+          return React__default.createElement(
+            'div',
+            { key: _id },
+            index$$1 === 0 && React__default.createElement(
+              'span',
+              { className: 'pr-1' },
+              'By'
+            ),
+            React__default.createElement(
+              'span',
               { className: 'text-muted' },
               displayName,
               length !== index$$1 + 1 && React__default.createElement('br', null)
             )
-          )
-        );
-      } else if (displayName) {
-        return React__default.createElement(
-          'div',
-          { key: _id },
-          index$$1 === 0 && React__default.createElement(
-            'span',
-            { className: 'pr-1' },
-            'By'
-          ),
-          React__default.createElement(
-            'span',
-            { className: 'text-muted' },
-            displayName,
-            length !== index$$1 + 1 && React__default.createElement('br', null)
-          )
-        );
-      }
+          );
+        }
+      } else return null;
     }, _this.renderManualPagination = function () {
       var currentPage = _this.state.currentPage;
 
@@ -9969,7 +10024,6 @@ var GridContent = function (_React$Component) {
           null,
           this.state.data && this.state.data.map(function (row, index$$1) {
             // const thumbnailURL = get(row, 'thumbnail.asset.url', this.props.defaultImage)
-            var thumbnailURL = row.thumbnail ? _this2.urlFor(row.thumbnail).url() : _this2.props.defaultImage;
             return React__default.createElement(
               Col,
               { key: index$$1, md: 12, lg: lgVar, style: { display: 'flex', flex: '1 0 auto' } },
@@ -9988,7 +10042,7 @@ var GridContent = function (_React$Component) {
                       React__default.createElement(
                         'a',
                         null,
-                        React__default.createElement(Card.Img, { variant: 'top', src: thumbnailURL })
+                        React__default.createElement(Card.Img, { variant: 'top', src: _this2.renderCardImage(row, page), alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : '' })
                       )
                     )
                   ),
@@ -10240,6 +10294,15 @@ var DeckQueue = function (_React$Component) {
 
       var builder = imageUrlBuilder(client);
       return builder.image(source);
+    }, _this.renderCardImage = function (row) {
+      if (row.thumbnail && row.thumbnail.asset) {
+        var url = _this.urlFor(row.thumbnail);
+        if (_this.props.imageHeight) url = url.height(_this.props.imageHeight);
+        if (_this.props.imageWidth) url = url.width(_this.props.imageWidth);
+        return url.url();
+      } else {
+        return _this.defaultImage;
+      }
     }, _this.changePageNumber = function (pageNumber) {
       var _this$props = _this.props,
           seoPaginate = _this$props.seoPaginate,
@@ -10332,7 +10395,7 @@ var DeckQueue = function (_React$Component) {
         this.state.data && this.state.data.map(function (row, index$$1) {
           var pageNumber = row.pageNumber || _this2.state.page;
           // const thumbnailURL = get(row, 'thumbnail.asset.url', this.props.defaultImage)
-          var thumbnailURL = row.thumbnail && row.thumbnail.asset ? _this2.urlFor(row.thumbnail).url() : _this2.props.defaultImage;
+
           return React__default.createElement(
             VisibilitySensor,
             {
@@ -10355,7 +10418,7 @@ var DeckQueue = function (_React$Component) {
                     React__default.createElement(
                       Link,
                       { href: _this2.page + '/[url]', as: _this2.page + '/' + get_1(row, 'url.current') },
-                      React__default.createElement(Card.Img, { variant: 'top', src: thumbnailURL })
+                      React__default.createElement(Card.Img, { variant: 'top', src: _this2.renderCardImage(row), alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : '' })
                     )
                   ),
                   React__default.createElement(
@@ -10491,7 +10554,13 @@ var ThumbnailCard = function ThumbnailCard(_ref) {
       return React__default.createElement(
         Media,
         { className: 'mb-3 thumbnail-card' },
-        React__default.createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail ? urlFor(item.thumbnail).url() : defaultImage, alt: 'Generic placeholder' }),
+        React__default.createElement('img', {
+          width: size,
+          height: size,
+          className: 'mr-3',
+          src: item.thumbnail ? urlFor(item.thumbnail).url() : defaultImage,
+          alt: 'Generic placeholder'
+        }),
         React__default.createElement(
           Media.Body,
           null,
@@ -10518,7 +10587,9 @@ var TaxonomyCard = function TaxonomyCard(props) {
       icon = _props$icon === undefined ? false : _props$icon,
       data = props.dataRecord,
       defaultImage = props.defaultImage,
-      client = props.client;
+      client = props.client,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth;
 
 
   var builder = imageUrlBuilder(client);
@@ -10527,6 +10598,13 @@ var TaxonomyCard = function TaxonomyCard(props) {
     return builder.image(source);
   };
 
+  var renderCardImage = function renderCardImage(row) {
+    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';
 
   var itemCounter = 0;
@@ -10549,7 +10627,7 @@ var TaxonomyCard = function TaxonomyCard(props) {
           } else {
             lgVar = 6;
           }
-          var thumbnailURL = row.thumbnail && row.thumbnail.asset ? urlFor(row.thumbnail.asset).url() : defaultImage;
+          var thumbnailURL = row.thumbnail && row.thumbnail.asset ? renderCardImage(row) : defaultImage;
           return React__default.createElement(
             Col,
             { key: itemCounter, md: 12, lg: lgVar, counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
@@ -10622,15 +10700,6 @@ var TaxonomyCard = function TaxonomyCard(props) {
   );
 };
 
-/*
-GROQ query -
-*[_type == "article" && references(*[_type == 'documentGroup' && name == 'test']._id)][0...10]{
-  title,
-  published,
-  "thumbnail":  thumbnail.asset->url,
-	"url": url.current
-}
-*/
 var GroupDeck = function GroupDeck(props) {
   // Props should be an array of objects containing Thumbnail, title, and URL
   var get2 = props.get2 ? '/' + props.get2 + '/' : '/view/';
@@ -10975,10 +11044,17 @@ var YoutubeGroup = function YoutubeGroup(props) {
   );
 };
 
-var urlFor = function urlFor(builder, source) {
+var urlFor = function urlFor(source, builder) {
   return builder.image(source);
 };
 
+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) {
   setValues({
     page: values.page + 1,
@@ -11063,50 +11139,52 @@ var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pagevi
 };
 
 var renderAuthor = function renderAuthor(authorDetail, index$$1, length) {
-  var _id = authorDetail._id,
-      displayName = authorDetail.displayName,
-      url = authorDetail.url;
+  if (authorDetail) {
+    var _id = authorDetail._id,
+        displayName = authorDetail.displayName,
+        url = authorDetail.url;
 
-  if (displayName && url && url.current) {
-    return React__default.createElement(
-      'div',
-      { key: _id },
-      index$$1 === 0 && React__default.createElement(
-        'span',
-        { className: 'pr-1' },
-        'By'
-      ),
-      React__default.createElement(
-        Link,
-        { href: '/authors/[url]', as: '/authors/' + url.current },
+    if (displayName && url && url.current) {
+      return React__default.createElement(
+        'div',
+        { key: _id },
+        index$$1 === 0 && React__default.createElement(
+          'span',
+          { className: 'pr-1' },
+          'By'
+        ),
         React__default.createElement(
-          'a',
+          Link,
+          { href: '/authors/[url]', as: '/authors/' + url.current },
+          React__default.createElement(
+            'a',
+            { className: 'text-muted' },
+            displayName,
+            length !== index$$1 + 1 && React__default.createElement('br', null)
+          )
+        )
+      );
+    } else if (displayName) {
+      return React__default.createElement(
+        'div',
+        { key: _id },
+        index$$1 === 0 && React__default.createElement(
+          'span',
+          { className: 'pr-1' },
+          'By'
+        ),
+        React__default.createElement(
+          'span',
           { className: 'text-muted' },
           displayName,
           length !== index$$1 + 1 && React__default.createElement('br', null)
         )
-      )
-    );
-  } else if (displayName) {
-    return React__default.createElement(
-      'div',
-      { key: _id },
-      index$$1 === 0 && React__default.createElement(
-        'span',
-        { className: 'pr-1' },
-        'By'
-      ),
-      React__default.createElement(
-        'span',
-        { className: 'text-muted' },
-        displayName,
-        length !== index$$1 + 1 && React__default.createElement('br', null)
-      )
-    );
-  }
+      );
+    }
+  } else return null;
 };
 
-var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory) {
+var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth) {
   return React__default.createElement(
     'div',
     null,
@@ -11132,11 +11210,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
               React__default.createElement(
                 'a',
                 null,
-                article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', {
-                  className: 'mr-3',
-                  src: urlFor(builder, article.thumbnail).width(240).height(135).url(),
-                  alt: article.title
-                }) : React__default.createElement('img', { src: defaultImage, className: 'mr-3', width: '240', height: '135' })
+                article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : React__default.createElement('img', { src: defaultImage, className: 'mr-3', width: '240', height: '135' })
               )
             ),
             React__default.createElement(
@@ -11228,7 +11302,9 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       pageview = props.pageview,
       defaultImage = props.defaultImage,
       showAuthor = props.showAuthor,
-      showCategory = props.showCategory;
+      showCategory = props.showCategory,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth;
   var initialCurrentPage = props.currentPage,
       showPublished = props.showPublished;
 
@@ -11286,7 +11362,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
         React__default.createElement(
           Container$1,
           null,
-          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory)
+          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth)
         )
       ),
       React__default.createElement(
@@ -11756,11 +11832,74 @@ var LeftNav = function LeftNav(props) {
   );
 };
 
+var PageFilter = function PageFilter(props) {
+  var getParams = props.getParams,
+      filters = props.filters,
+      defaultFilter = props.defaultFilter;
+
+  var _useState = useState(''),
+      _useState2 = slicedToArray(_useState, 2),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
+  var usePrevious = function usePrevious(value) {
+    var ref = useRef();
+    useEffect(function () {
+      ref.current = value;
+    });
+    return ref.current;
+  };
+
+  var sortAttr = usePrevious({ filter: filter });
+
+  useEffect(function () {
+    if (sortAttr && sortAttr.filter !== filter) {
+      getParams(filter);
+    }
+  }, [filter, sortAttr, getParams]);
+
+  if (filters.length) {
+    return React__default.createElement(
+      Dropdown,
+      null,
+      React__default.createElement(
+        Dropdown.Toggle,
+        { id: 'filter-dropdown' },
+        filter || defaultFilter
+      ),
+      React__default.createElement(
+        Dropdown.Menu,
+        { className: 'select-dropdown' },
+        filters.map(function (filter, index) {
+          return React__default.createElement(
+            Dropdown.Item,
+            { key: index, onClick: function onClick() {
+                return setFilter(filter);
+              } },
+            filter
+          );
+        })
+      ),
+      React__default.createElement(
+        'style',
+        { jsx: true },
+        '\n          .select-dropdown > a {\n            color: #8e8c84;\n          }\n        '
+      )
+    );
+  }
+  return null;
+};
+
 var Column3 = function Column3(props) {
   var leftItems = props.leftItems,
       rightItems = props.rightItems,
       title = props.title,
-      website = props.website;
+      website = props.website,
+      showFilter = props.showFilter,
+      getParams = props.getParams,
+      filters = props.filters,
+      defaultFilter = props.defaultFilter;
+
 
   return React__default.createElement(
     'section',
@@ -11776,20 +11915,38 @@ var Column3 = function Column3(props) {
       React__default.createElement(
         Col,
         { md: true, className: 'middleCol', style: { maxWidth: '640px', marginTop: !title && '10px' } },
-        title && React__default.createElement(
+        showFilter ? React__default.createElement(
+          'div',
+          { className: 'title-wrap' },
+          React__default.createElement(
+            'h1',
+            { className: 'title' },
+            title
+          ),
+          React__default.createElement(
+            'div',
+            { className: 'filter-box' },
+            React__default.createElement(PageFilter, { getParams: getParams, filters: filters, defaultFilter: defaultFilter })
+          )
+        ) : title && React__default.createElement(
           'h1',
-          null,
+          { className: 'title' },
           title
         ),
         props.children
       ),
+      React__default.createElement(
+        'style',
+        { jsx: true },
+        '\n            .filter-box {\n              padding-top: 6px;\n              padding-right: 18px;\n            }\n            @media only screen and (min-width: 768px) {\n              .title-wrap {\n                display: flex;\n                justify-content: space-between;\n              }\n            }\n            @media only screen and (max-width: 767px) {\n              .filter-box {\n                float: right;\n                display: flex;\n                justify-content: flex-end;\n              }\n              .title-wrap {\n                display: flex;\n                flex-direction: column;\n                margin-bottom: 10px;\n              }\n            }\n          '
+      ),
       React__default.createElement(
         Col,
         { xs: 12, className: 'rightCol' },
         website && website.conferenceBannerContent && React__default.createElement(ConferenceBanner, { website: website }),
         React__default.createElement(
           'div',
-          { style: { position: "sticky", top: "60px" } },
+          { style: { position: 'sticky', top: '60px' } },
           rightItems && rightItems.map(function (row, index) {
             return React__default.createElement(
               'div',
@@ -12042,59 +12199,6 @@ var SocialShare = function SocialShare(props) {
   );
 };
 
-var PageFilter = function PageFilter(props) {
-  var getParams = props.getParams,
-      filters = props.filters,
-      defaultFilter = props.defaultFilter;
-
-  var _useState = useState(''),
-      _useState2 = slicedToArray(_useState, 2),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
-
-  var usePrevious = function usePrevious(value) {
-    var ref = useRef();
-    useEffect(function () {
-      ref.current = value;
-    });
-    return ref.current;
-  };
-
-  var sortAttr = usePrevious({ filter: filter });
-
-  useEffect(function () {
-    if (sortAttr && sortAttr.filter !== filter) {
-      getParams(filter);
-    }
-  }, [filter, sortAttr, getParams]);
-
-  if (filters.length) {
-    return React__default.createElement(
-      Dropdown,
-      null,
-      React__default.createElement(
-        Dropdown.Toggle,
-        { id: 'filter-dropdown' },
-        filter || defaultFilter
-      ),
-      React__default.createElement(
-        Dropdown.Menu,
-        null,
-        filters.map(function (filter, index) {
-          return React__default.createElement(
-            Dropdown.Item,
-            { key: index, onClick: function onClick() {
-                return setFilter(filter);
-              } },
-            filter
-          );
-        })
-      )
-    );
-  }
-  return null;
-};
-
 var Search = function Search(props) {
   var _props$placeholder = props.placeholder,
       placeholder = _props$placeholder === undefined ? 'Search' : _props$placeholder,
@@ -13654,7 +13758,11 @@ var TemplateNormal = function TemplateNormal(props) {
       keywords = props.keywords,
       description = props.description,
       website = props.website,
-      horizontalAD = props.config.horizontalAD;
+      horizontalAD = props.config.horizontalAD,
+      showFilter = props.showFilter,
+      filterParams = props.filterParams,
+      filters = props.filters,
+      defaultFilter = props.defaultFilter;
 
 
   var navigation = function navigation() {
@@ -13694,7 +13802,15 @@ var TemplateNormal = function TemplateNormal(props) {
       case '3':
         return React__default.createElement(
           Column3,
-          { title: title, leftItems: config.leftItems, rightItems: config.rightItems, website: website },
+          {
+            title: title,
+            leftItems: config.leftItems,
+            rightItems: config.rightItems,
+            website: website,
+            showFilter: showFilter,
+            getParams: filterParams,
+            filters: filters,
+            defaultFilter: defaultFilter },
           props.children
         );
       default:
@@ -13841,7 +13957,12 @@ var FigureComponent = function FigureComponent(_ref) {
     link ? React__default.createElement(
       'a',
       { href: link, target: blank ? '_blank' : '_self' },
-      React__default.createElement(Figure.Image, { ref: imgElement, onLoad: loadImg, src: urlFor$1(node$$1, client).url(), alt: alt && alt }),
+      React__default.createElement(Figure.Image, {
+        ref: imgElement,
+        onLoad: loadImg,
+        src: urlFor$1(node$$1, client).url(),
+        alt: alt && alt
+      }),
       caption && React__default.createElement(
         Figure.Caption,
         { style: { width: captionWidth } },
@@ -13850,7 +13971,12 @@ var FigureComponent = function FigureComponent(_ref) {
     ) : React__default.createElement(
       React__default.Fragment,
       null,
-      React__default.createElement(Figure.Image, { ref: imgElement, onLoad: loadImg, src: urlFor$1(node$$1, client).url(), alt: alt && alt }),
+      React__default.createElement(Figure.Image, {
+        ref: imgElement,
+        onLoad: loadImg,
+        src: urlFor$1(node$$1, client).url(),
+        alt: alt && alt
+      }),
       caption && React__default.createElement(
         Figure.Caption,
         { style: { width: captionWidth } },
@@ -13896,7 +14022,11 @@ var Slideshow = function Slideshow(_ref) {
         return React__default.createElement(
           Carousel.Item,
           { key: slide._key },
-          React__default.createElement('img', { src: slide.asset && urlFor$2(slide.asset, builder).url(), alt: slide.alt && slide.alt, style: { width: '100%' } }),
+          React__default.createElement('img', {
+            src: slide.asset && urlFor$2(slide.asset, builder).url(),
+            alt: slide.alt && slide.alt,
+            style: { width: '100%' }
+          }),
           slide.caption && React__default.createElement(
             'p',
             { className: 'p-2' },
@@ -17515,7 +17645,10 @@ var Media$2 = function Media$$1(_ref) {
         React__default.createElement(
           'a',
           { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
-          React__default.createElement(Figure.Image, { src: urlFor(poster.asset).url(), fluid: true }),
+          React__default.createElement(Figure.Image, {
+            src: urlFor(poster.asset).url(),
+            fluid: true
+          }),
           caption && React__default.createElement(
             Figure.Caption,
             null,
@@ -17527,7 +17660,9 @@ var Media$2 = function Media$$1(_ref) {
       return React__default.createElement(
         Figure,
         { className: 'd-block text-center mb-3' },
-        React__default.createElement(Figure.Image, { src: urlFor(poster.asset).url() }),
+        React__default.createElement(Figure.Image, {
+          src: urlFor(poster.asset).url()
+        }),
         caption && React__default.createElement(
           Figure.Caption,
           null,
@@ -20473,9 +20608,18 @@ var urlFor$3 = function urlFor(source, client) {
   return builder.image(source);
 };
 
+var renderCardImage$1 = function renderCardImage(thumbnail, client, imageHeight, imageWidth) {
+  var url = urlFor$3(thumbnail, client);
+  if (imageHeight) url = url.height(imageHeight);
+  if (imageWidth) url = url.width(imageWidth);
+  return url.url();
+};
+
 var Hero = function Hero(_ref) {
   var data = _ref.data,
-      client = _ref.client;
+      client = _ref.client,
+      imageHeight = _ref.imageHeight,
+      imageWidth = _ref.imageWidth;
   var title = data.title,
       summary = data.summary,
       thumbnail = data.thumbnail,
@@ -20495,7 +20639,7 @@ var Hero = function Hero(_ref) {
           { className: 'h4' },
           title
         ),
-        thumbnail && React__default.createElement(Card$1.Img, { src: urlFor$3(thumbnail, client).url() }),
+        thumbnail && client && React__default.createElement(Card$1.Img, { src: renderCardImage$1(thumbnail, client, imageHeight, imageWidth) }),
         summary && React__default.createElement(
           Card$1.Footer,
           { className: 'h6' },