sfc-utils 1.3.64 → 1.3.65

package/brands2.js

@@ -39,7 +39,9 @@ let getBrands2 = function(market){
 				"twitter": "sfchronicle",
 				"gaAccount": "UA-1616916-26",
 				"subscribeLink": "https://www.sfchronicle.com/subproject",
-				"sailCustomer": "fca2a0390286f0e53120a668534d9529"
+				"sailCustomer": "fca2a0390286f0e53120a668534d9529",
+				"sailSiteName": "san-francisco-chronicle",
+				"siteId": 35,
 			}
 		},
 
@@ -61,7 +63,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-24",
 				"subscribeLink": "https://www.houstonchronicle.com/subproject",
-				"sailCustomer": "48e30b5083cf6bf47c519651453c9e8a"
+				"sailCustomer": "48e30b5083cf6bf47c519651453c9e8a",
+				"sailSiteName": "houston-chronicle",
+				"siteId": 33
 			}
 		},
 
@@ -83,7 +87,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-7",
 				"subscribeLink": "https://www.timesunion.com/subproject",
-				"sailCustomer": "5bb9eee089bdc2e27cbd265535ad1f90"
+				"sailCustomer": "5bb9eee089bdc2e27cbd265535ad1f90",
+				"sailSiteName": "times-union",
+				"siteId": 3
 			}
 		},
 
@@ -100,7 +106,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-27",
 				"subscribeLink": "https://www.expressnews.com/subproject",
-				"sailCustomer": "aec52c4681ed63b5beab139a2584f0d4"
+				"sailCustomer": "aec52c4681ed63b5beab139a2584f0d4",
+				"sailSiteName": "san-antonio-express-news",
+				"siteId": 36
 			}
 		},
 
@@ -117,7 +125,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-99",
 				"subscribeLink": "https://www.ctinsider.com/subproject",
-				"sailCustomer": "9b21160afa226c9f84d27b47c3d52364"
+				"sailCustomer": "9b21160afa226c9f84d27b47c3d52364",
+				"sailSiteName": "ct-insider",
+				"siteId": 61
 			}
 		},
 
@@ -134,7 +144,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-99",
 				"subscribeLink": "/subproject",
-				"sailCustomer": "4a181de0b63a131cf27f8ea9485e5e1c"
+				"sailCustomer": "4a181de0b63a131cf27f8ea9485e5e1c",
+				"sailSiteName": "midland-reporter-telegram",
+				"siteId": 57
 			}
 		},
 		Midcom: {
@@ -149,7 +161,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-99",
 				"subscribeLink": "/subproject",
-				"sailCustomer": "f3dc0abb53995f957783e76eff3ef01e"
+				"sailCustomer": "4a181de0b63a131cf27f8ea9485e5e1c",
+				"sailSiteName": "midland-daily-news",
+				"siteId": 61
 			}
 		},
 		Conroe: {
@@ -164,7 +178,9 @@ let getBrands2 = function(market){
 				"invert": true,
 				"gaAccount": "UA-1616916-99",
 				"subscribeLink": "https://www.yourconroenews.com/subproject",
-				"sailCustomer": "4a181de0b63a131cf27f8ea9485e5e1c"
+				"sailCustomer": "4a181de0b63a131cf27f8ea9485e5e1c",
+				"sailSiteName": "the-courier-of-montgomery-county",
+				"siteId": 68
 			}
 		},
 

package/components/slideshow/captioncreditslideshow.mjs

@@ -0,0 +1,53 @@
+import React, { useEffect, useState, useRef } from "react"
+
+const CaptionCreditSlideshow = ({ captionList, creditList, extraStyles }) => {
+  let captionCss = ["topper-image", "caption"];
+  if (extraStyles) captionCss = captionCss.concat(extraStyles);
+
+  const [index, setIndex] = useState(0);
+  const timeoutRef = useRef(null);
+
+  function resetTimeout() {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  }
+
+  useEffect(() => {
+    resetTimeout();
+    timeoutRef.current = setTimeout(() => {
+      // Set current image index
+      setIndex((prevIndex) => (prevIndex === captionList.length - 1) ? 0 : prevIndex + 1);
+    },
+      4000 // Delay for switching images
+    );
+
+    return () => {
+      resetTimeout();
+    };
+  }, [index]);
+
+  const hasCaption = (captionList.length > 0)
+  const hasCredit = (creditList.length > 0)
+  return (
+    <>
+      {hasCaption && hasCredit && (
+        <figcaption className={captionCss.join(' ')}>
+          {captionList[index]} <span className="credit">{creditList[index]}</span>
+        </figcaption>
+      )}
+      {!hasCaption && hasCredit && (
+        <figcaption className={captionCss.join(' ')}>
+          <span className="credit">{creditList[index]}</span>
+        </figcaption>
+      )}
+      {hasCaption && !hasCredit && (
+        <figcaption className={captionCss.join(' ')}>
+          {captionList[index]}
+        </figcaption>
+      )}
+    </>
+  )
+}
+
+export default CaptionCreditSlideshow

package/components/slideshow/imageslideshow.mjs

@@ -0,0 +1,95 @@
+import React, { useEffect, useState, useRef } from "react"
+import TopperImage from "../topperimage.mjs"
+import * as styles from "../../styles/modules/imageslideshow.module.less"
+import * as imageStyles from "../../styles/modules/topperimage.module.less"
+import { TransitionGroup, CSSTransition } from "react-transition-group"
+
+const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle }) => {
+  const [index, setIndex] = useState(0);
+  const timeoutRef = useRef(null);
+
+  function resetTimeout() {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  }
+
+  useEffect(() => {
+    resetTimeout();
+    timeoutRef.current = setTimeout(() => {
+      // Set current image index
+      setIndex((prevIndex) => (prevIndex === imageList.length - 1) ? 0 : prevIndex + 1);
+    },
+      4000 // Delay for switching images
+    );
+
+    return () => {
+      resetTimeout();
+    };
+  }, [index]);
+
+  const getContainerClass = () => {
+    switch (topperStyle) {
+      case "stacked":
+        return styles.containerStacked;
+      case "full-screen":
+        return styles.containerStacked;
+      default:
+        return "";
+    }
+  }
+
+  const getWrapperClass = () => {
+    switch (topperStyle) {
+      case "stacked":
+        return styles.imageWrapperStacked;
+      case "full-screen":
+        return styles.imageWrapperFullscreen;
+      default:
+        return "";
+    }
+  }
+
+  const getImageClassList = () => {
+    switch (topperStyle) {
+      case "stacked":
+        return [imageStyles.cForceAspectRatio];
+      case "full-screen":
+        return [imageStyles.cImgSlideshowFullscreen];
+      default:
+        return [""];
+    }
+  }
+
+  /**
+   * Overall CSS architecture:
+   * <Container>
+   *   <Wrapper>
+   *    <Image/>
+   *  </Wrapper> 
+   * </Container> 
+   */
+  return (
+    <div className={getContainerClass()}>
+      <TransitionGroup>
+        <CSSTransition
+          key={index}
+          timeout={4000}
+          classNames={{
+            enter: styles.fadeEnter,
+            enterActive: styles.fadeEnterActive,
+            exit: styles.fadeExit,
+            exitActive: styles.fadeExitActive,
+            exitDone: styles.fadeExitDone
+          }}
+        >
+          <div className={getWrapperClass()}>
+            <TopperImage wcm={imageList[index]} alt={altList[index]} wcmData={wcmData} overrideCssList={getImageClassList()} />
+          </div>
+        </CSSTransition>
+      </TransitionGroup>
+    </div>
+  )
+}
+
+export default ImageSlideshow

package/components/topper2.mjs

@@ -1,38 +1,46 @@
 import React from "react"
 import Heading from "./heading.mjs"
-import WCMImage2 from "./wcmimage2.mjs"
+import TopperImage from "./topperimage.mjs"
 import CaptionCredit from "./captioncredit.mjs"
+import CaptionCreditSlideshow from "./slideshow/captioncreditslideshow.mjs"
+import ImageSlideshow from "./slideshow/imageslideshow.mjs"
 import * as topperStyles from "../styles/modules/topper2.module.less"
+import * as imageStyles from "../styles/modules/topperimage.module.less"
 
 const Topper2 = ({ settings, wcmData }) => {
-  const { 
-    Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Image_Caption, Image_Credits, 
-    HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset, HeaderDek_Horizontal_Position, Inverted_Colors 
+  const {
+    Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Image_Caption, Image_Credits,
+    HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset, HeaderDek_Horizontal_Position, Inverted_Colors
   } = settings
 
   const headerDekStyleList = () => {
-    switch(Topper_Style) {
+    switch (Topper_Style) {
       case "stacked":
       case "no-visual":
         return [topperStyles.headerDekStacked, " mw-lg mt-lg mb-md"];
-      case "full-screen": 
-        // apply margin offsets from spreadsheet
+      case "full-screen":
+        // Check if css ":root" is accessible
         if (typeof window != "undefined") {
+          // Apply margin offsets from spreadsheet
           calculatefullScreenOffsets();
         }
 
         return [
-          topperStyles.headerDekFullScreen, fullScreenHorizontalCss(),
+          topperStyles.headerDekFullScreen,
+          // Add styling for header-deck container position
+          fullScreenHorizontalCss(),
+          // Add styling for text position inside header-deck
           ... (HeaderDek_Vertical_Position === "top") ? [topperStyles.headerDekTop] : [topperStyles.headerDekBottom],
+          // Add styling for header-deck container background
           ... (Inverted_Colors === "black-text-white-bg") ? [topperStyles.blackTextWhiteBg] : [topperStyles.whiteTextBlackBg]
         ];
-      case "side-by-side": 
+      case "side-by-side":
         return [];
     }
   }
 
-   /** get horizontal positioning css for full screen header-deck container **/
-   const fullScreenHorizontalCss = () => {
+  /** get horizontal positioning css for full screen header-deck container **/
+  const fullScreenHorizontalCss = () => {
     switch (HeaderDek_Horizontal_Position) {
       case "left": return topperStyles.headerDekLeft;
       case "right": return topperStyles.headerDekRight;
@@ -41,22 +49,23 @@ const Topper2 = ({ settings, wcmData }) => {
   }
 
   const headerStyleList = () => {
-    let defaultStyles; 
-    switch(Topper_Style) {
-      case "stacked": 
+    let defaultStyles;
+    switch (Topper_Style) {
+      case "stacked":
         defaultStyles = [];
         break;
       case "no-visual":
         defaultStyles = ["left"];
         break;
-      case "full-screen": 
+      case "full-screen":
         defaultStyles = [topperStyles.hedFullScreen, fullScreenTextAlignCss()];
         break;
-      case "side-by-side": 
+      case "side-by-side":
         defaultStyles = [];
         break;
     }
 
+    // Apply extra custom styling if it exists in the spreadsheet
     if (Title_Style !== "") {
       let extraStyles = Title_Style.split(", ");
       defaultStyles = defaultStyles.concat(extraStyles);
@@ -66,14 +75,14 @@ const Topper2 = ({ settings, wcmData }) => {
   }
 
   const deckStyleList = () => {
-    switch(Topper_Style) {
+    switch (Topper_Style) {
       case "stacked":
         return ["deck"];
-      case "no-visual": 
+      case "no-visual":
         return ["deck left"];
-      case "full-screen": 
+      case "full-screen":
         return ["deck", topperStyles.deckFullScreen, fullScreenTextAlignCss()];
-      case "side-by-side": 
+      case "side-by-side":
         return ["deck"];
     }
   }
@@ -87,18 +96,60 @@ const Topper2 = ({ settings, wcmData }) => {
     }
   }
 
-  const ImageHTML = () => <WCMImage2 wcm={Image} alt={Image_Alt} isNotLazyloaded={false} wcmData={wcmData} isFullScreenTopper={false}/>
-  const FullScreenImageHTML = () => <WCMImage2 wcm={Image} alt={Image_Alt} isNotLazyloaded={false} ratio={calculateFullScreenImageRatio()} wcmData={wcmData} isFullScreenTopper={true}/>
-  
+  /** Converts wcm string from spreadsheet into a list of WCM ids */
+  const getWcmIdList = (listStr) => {
+    return listStr.split(";").map((d) => parseInt(d));
+  }
+
+  /** Checks if WCM list represents an image slideshow */
+  const isSlideshow = (wcmIdList) => {
+    return (wcmIdList.length > 1);
+  }
+
+  /** Converts string from spreadsheet into a list and pads the list if the length is incorrect */
+  const convertStringToList = (str, size) => {
+    var list = str.split(";");
+    if (list.length === size) return list;
+
+    for (var i = (list.length - 1); i < (size - 1); i++) {
+      list.push("");
+    }
+
+    console.error(`The topper slideshow does not have the correct amount of metadata!`);
+    return list;
+  }
+
+  const ImageHTML = () => <TopperImage wcm={Image} alt={Image_Alt} wcmData={wcmData} />
+  const FullScreenImageHTML = () => <TopperImage wcm={Image} alt={Image_Alt} wcmData={wcmData} overrideCssList={[imageStyles.cImgFullscreen]} />
+  const ImageSlideshowHTML = () =>
+    <ImageSlideshow
+      wcmData={wcmData}
+      imageList={wcmIdList}
+      altList={convertStringToList(Image_Alt, wcmIdList.length)}
+      topperStyle={Topper_Style}
+    />
+
+  const wcmIdList = getWcmIdList(Image);
   const TopperHtml = () => {
     switch (Topper_Style) {
-      case "full-screen": 
+      case "full-screen":
+        let containerCss = isSlideshow(wcmIdList) ? topperStyles.topperContainerSlideshowFullScreen : topperStyles.topperContainerFullScreen;
         return (
           <>
-          <div className={topperStyles.topperContainerFullScreen}>
-              <figure className={`topper-image ${topperStyles.imageFullScreen}` } aria-labelledby="topperCaptionText">
-                <FullScreenImageHTML/>
-                <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={topperStyles.hideWhenDesktop}/>
+            <div className={containerCss}>
+              <figure className={`topper-image ${topperStyles.imageFullScreen}`} aria-labelledby="topperCaptionText">
+                {isSlideshow(wcmIdList) && <ImageSlideshowHTML />}
+                {!isSlideshow(wcmIdList) && <FullScreenImageHTML />}
+
+                {/* This caption-credit only shows when the screen size is tablet or mobile */}
+                {isSlideshow(wcmIdList) &&
+                  <CaptionCreditSlideshow
+                    captionList={convertStringToList(Image_Caption, wcmIdList.length)}
+                    creditList={convertStringToList(Image_Credits, wcmIdList.length)}
+                    extraStyles={topperStyles.hideWhenDesktop}
+                  />
+                }
+                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={topperStyles.hideWhenDesktop} />}
               </figure>
               <div className={headerDekStyleList().join(' ')}>
                 <Heading level={1} text={Title}
@@ -110,74 +161,92 @@ const Topper2 = ({ settings, wcmData }) => {
                   className={deckStyleList().join(' ')}
                 />
               </div>
-          </div>
-          <div className="topperCaptionText">
-            <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.hideWhenMobile, topperStyles.smallPaddingLeft]}/>
-          </div>
+            </div>
+            <div className="topperCaptionText">
+              {/* This caption-credit only shows when the screen size is desktop */}
+              {isSlideshow(wcmIdList) &&
+                <CaptionCreditSlideshow
+                  captionList={convertStringToList(Image_Caption, wcmIdList.length)}
+                  creditList={convertStringToList(Image_Credits, wcmIdList.length)}
+                  extraStyles={[topperStyles.hideWhenTablet, topperStyles.smallPaddingLeft]}
+                />
+              }
+              {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.hideWhenTablet, topperStyles.smallPaddingLeft]} />}
+            </div>
           </>
         );
 
       case "stacked":
         return (
           <>
-          <div>
-            <div className={headerDekStyleList().join('')}>
-              <Heading
-                level={1}
-                text={Title}
-                className={headerStyleList().join(' ')}
-              />
-              <Heading
-                level={2}
-                text={Deck}
-                className={deckStyleList().join(' ')}
-              />
+            <div>
+              <div className={headerDekStyleList().join('')}>
+                <Heading
+                  level={1}
+                  text={Title}
+                  className={headerStyleList().join(' ')}
+                />
+                <Heading
+                  level={2}
+                  text={Deck}
+                  className={deckStyleList().join(' ')}
+                />
+              </div>
+              <figure className={`mw-xl ml-auto mr-auto ${topperStyles.imageStacked}`}>
+                {isSlideshow(wcmIdList) && <ImageSlideshowHTML />}
+                {!isSlideshow(wcmIdList) && <ImageHTML />}
+                {isSlideshow(wcmIdList) &&
+                  <CaptionCreditSlideshow
+                    captionList={convertStringToList(Image_Caption, wcmIdList.length)}
+                    creditList={convertStringToList(Image_Credits, wcmIdList.length)}
+                    extraStyles={[topperStyles.smallPaddingLeftWhenTablet]}
+                  />
+                }
+                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.smallPaddingLeftWhenTablet]}/>}
+              </figure>
             </div>
-            <figure className={`mw-xl ml-auto mr-auto ${topperStyles.imageStacked}`}>
-              <ImageHTML/>
-              <CaptionCredit caption={Image_Caption} credit={Image_Credits} />
-            </figure>
-          </div>
           </>
         );
 
       case "no-visual":
         return (
           <>
-          <div>
-            <div className={headerDekStyleList().join('')}>
-              <Heading
-                level={1}
-                text={Title}
-                className={headerStyleList().join(' ')}
-              />
-              <Heading
-                level={2}
-                text={Deck}
-                className={deckStyleList().join(' ')}
-              />
+            <div>
+              <div className={headerDekStyleList().join('')}>
+                <Heading
+                  level={1}
+                  text={Title}
+                  className={headerStyleList().join(' ')}
+                />
+                <Heading
+                  level={2}
+                  text={Deck}
+                  className={deckStyleList().join(' ')}
+                />
+              </div>
             </div>
-          </div>
           </>
         );
     }
-  } 
+  }
 
+  /** Calculate offsets for header-deck container based on the spreadsheet, for full-screen toppers only **/
   const calculatefullScreenOffsets = () => {
     var r = document.querySelector(':root');
 
     let verticalOffset = convertStringToNumber(HeaderDek_Vertical_Offset, (HeaderDek_Vertical_Position === "bottom"));
     let horizontalOffset = convertStringToNumber(HeaderDek_Horizontal_Offset, (HeaderDek_Horizontal_Position === "right"));
 
-    r.style.setProperty('--headerDek-vertical-offset', verticalOffset + "px" ); 
-    r.style.setProperty('--headerDek-horizontal-offset', horizontalOffset + "px"); 
+    r.style.setProperty('--headerDek-vertical-offset', verticalOffset + "px");
+    r.style.setProperty('--headerDek-horizontal-offset', horizontalOffset + "px");
   }
 
+  /** Convert offset values from the spreadsheet into Number type **/
   const convertStringToNumber = (maybeStr, isFlipped) => {
     var num = 0;
-    if (typeof(maybeStr) === "string") {
+    if (typeof (maybeStr) === "string") {
       // remove all non-number characters and "-" from string
-      num = Number(maybeStr.replace(/(?!^)-|[^0-9-]/g,''))
+      num = Number(maybeStr.replace(/(?!^)-|[^0-9-]/g, ''))
     } else {
       num = maybeStr
     }
@@ -188,19 +257,9 @@ const Topper2 = ({ settings, wcmData }) => {
     return num;
   }
 
-  const calculateFullScreenImageRatio = () => {
-      // ratio needs to account for height of nav bar which is 37px
-    if (typeof window === "undefined") return "56.25%"
-    const windowRatio = ((window.innerHeight-37) / window.innerWidth)*100;
-    let fullScreenRatio = "56.25%"; // defaults to 16/9;
-
-    if (windowRatio < 56.25) fullScreenRatio = (windowRatio + "%")
-    return fullScreenRatio
-  }
-
-  return (     
-      <TopperHtml/>
-    )
-  }
+  return (
+    <TopperHtml />
+  )
+}
 
 export default Topper2

package/components/{wcmimage2.mjs → topperimage.mjs}

@@ -1,23 +1,23 @@
-import React, {useRef, useEffect, useState} from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import * as wcmimageStyles from "../styles/modules/wcmimage2.module.less"
+import * as wcmimageStyles from "../styles/modules/topperimage.module.less"
 import { debounce } from './helpers/utilfunctions.mjs'
 
 const currentEnv = process.env.GATSBY_DEPLOY_ENV
 
-const ImageHTML = ({fullPath, imageRez, alt, isFullScreenTopper}) => {
+const ImageHTML = ({ fullPath, imageRez, alt, overrideCssList }) => {
   let imageCss = [wcmimageStyles.cImg];
-  if (isFullScreenTopper) imageCss.push(wcmimageStyles.cImgFullscreen);
+  if (overrideCssList) imageCss = overrideCssList
 
   return (
-    <img  
-      className={imageCss.join(' ')} 
-      src={`${fullPath}${imageRez}x0.jpg`} 
-      alt={alt}/>
+    <img
+      className={imageCss.join(' ')}
+      src={`${fullPath}${imageRez}x0.jpg`}
+      alt={alt} />
   )
 }
 
-const WCMImage = ({ wcm, alt, ratio, wcmData, isFullScreenTopper }) => {
+const TopperImage = ({ wcm, alt, ratio, wcmData, overrideCssList }) => {
   // When the wrapping div is rendered, we're going to figure out the best size for this image to be
   let picRef = useRef(null)
   let [imageRez, setImageRez] = useState(0)
@@ -25,10 +25,10 @@ const WCMImage = ({ wcm, alt, ratio, wcmData, isFullScreenTopper }) => {
   let setImageWidth = () => {
     let pixelWidth = 900 // Default width if we need a fallback
     let pixelRatio = window.devicePixelRatio || 1
-    if (picRef.current && picRef.current.offsetWidth){
+    if (picRef.current && picRef.current.offsetWidth) {
       pixelWidth = Math.round(picRef.current.offsetWidth * pixelRatio)
     }
-    if (imageRez < pixelWidth){ // No need to resize if we're just scaling down
+    if (imageRez < pixelWidth) { // No need to resize if we're just scaling down
       setImageRez(pixelWidth)
     }
   }
@@ -50,31 +50,32 @@ const WCMImage = ({ wcm, alt, ratio, wcmData, isFullScreenTopper }) => {
 
   // If this is actually undefined, return null
   // No error, nothing is rendered
-  if (!wcm){
+  if (!wcm) {
     return null
   }
 
+  // During server-side rendering, access to ":root" is unavailable. This is okay; we just need
+  // to make sure that the site does not crash during SSR
+  let r = (typeof window != "undefined") ? document.querySelector(':root') : null;
+
   // This calculation is not used for the topper impl, but keeping it here just in case
   // it is needed for the general WCMImage utils migration
-  let r = null;
-  if (typeof window != "undefined") {
-    r = document.querySelector(':root');
-  }
-
   let photoRatio = "56.25%"; // Default to 16/9
   let fullPath = `https://s.hdnux.com/photos/0/0/0/${wcm}/0/`;
-  if (!ratio){
+  if (!ratio) {
     let matchedPhoto = wcmData.nodes.find((item) => {
-        return (item.photo.wcmid).toString() === (wcm).toString()
+      return (item.photo.wcmid).toString() === (wcm).toString()
     })
-    if (!matchedPhoto && currentEnv !== "development"){
+    if (!matchedPhoto && currentEnv !== "development") {
       throw `WCMImage error: No matching ID for ${wcm} present in the array at the top of gatsby-node.js! If it's already there, you might need to reboot dev.`
-    } 
-    if (matchedPhoto){  
+    }
+    if (matchedPhoto) {
       // Set ratio of the actual photo like a legit hacker
-      photoRatio = (matchedPhoto.photo.ratio*100)+"%";
-      if (r) { 
-        r.style.setProperty('--img-bottom-padding-ratio', photoRatio); 
+      photoRatio = (matchedPhoto.photo.ratio * 100) + "%";
+
+      // If css :root is available, set the photo ratio
+      if (r) {
+        r.style.setProperty('--img-bottom-padding-ratio', photoRatio);
       }
 
       fullPath = matchedPhoto.photo.full_path;
@@ -85,27 +86,31 @@ const WCMImage = ({ wcm, alt, ratio, wcmData, isFullScreenTopper }) => {
   } else {
     // If an override is being passed in, use that
     photoRatio = ratio
+
+    // If css :root is available, set the photo ratio
     if (r) {
-      r.style.setProperty('--img-bottom-padding-ratio', photoRatio); 
+      r.style.setProperty('--img-bottom-padding-ratio', photoRatio);
     }
   }
 
   // Get serious about alt tags
-  if (typeof alt !== "string"){
+  if (typeof alt !== "string") {
     throw `WCMImage error: Image for ${wcm} needs an alt tag! Please add a good, descriptive alt tag. Suggestion from Mozilla: When choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there's an image on the page.`
   }
 
   return (
     <div ref={picRef}>
-          <ImageHTML fullPath={fullPath} imageRez={imageRez} alt={alt} isFullScreenTopper={isFullScreenTopper}/>
+      <ImageHTML fullPath={fullPath} imageRez={imageRez} alt={alt} overrideCssList={overrideCssList} />
     </div>
   )
 }
 
-WCMImage.propTypes = {
+TopperImage.propTypes = {
   wcm: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   alt: PropTypes.string.isRequired,
-  ratio: PropTypes.string
+  ratio: PropTypes.string, // This prop is currently not being used, might be ok to delete? 
+  wcmData: PropTypes.object,
+  overrideCssList: PropTypes.array
 }
 
-export default WCMImage
+export default TopperImage

package/example/gatsby-node.js

@@ -11,10 +11,22 @@ let topperData = require("./src/data/topper2_settings.sheet.json");
 // NOTE: Leave this as an empty array if you aren't importing any WCM photos, but you won't be able to use the WCMImage component
 const wcmPhotos = [20374215]
 
-// Add topper image to wcmPhotos list
+const addValidWcmId = (numStr, wcmPhotos) => {
+  let isNum = /^\d+$/.test(numStr.trim())
+  if (isNum && !wcmPhotos.includes(numStr.trim())) wcmPhotos.push((numStr.trim()));
+}
+
+// Add topper image(s) to wcmPhotos list
 let numStr = (topperData[0].Image).toString()
-let isNum = /^\d+$/.test(numStr.trim())
-if (isNum && !wcmPhotos.includes(numStr.trim())) wcmPhotos.push((numStr.trim()));
+if (numStr.includes(";")) {
+  let numList = numStr.split(";");
+  for (var num of numList) {
+    addValidWcmId(num, wcmPhotos);
+  }
+} else { 
+  addValidWcmId(numStr, wcmPhotos);
+}
+
 
 // Create nodes so GraphQL can access
 exports.sourceNodes = async ({

package/example/package-lock.json

@@ -3903,6 +3903,11 @@
       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
       "dev": true
     },
+    "chain-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz",
+      "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg=="
+    },
     "chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4995,6 +5000,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -11024,6 +11037,18 @@
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
       "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw=="
     },
+    "react-transition-group": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
+      "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==",
+      "requires": {
+        "chain-function": "^1.0.0",
+        "dom-helpers": "^3.2.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.5.6",
+        "warning": "^3.0.0"
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -12938,6 +12963,14 @@
         }
       }
     },
+    "warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.3.64",
+  "version": "1.3.65",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",
@@ -10,6 +10,7 @@
     "htmlparser2": "4.1.0",
     "opn": "^6.0.0",
     "prop-types": "^15.8.1",
+    "react-transition-group": "^4.4.5",
     "write": "^2.0.0"
   }
 }

package/styles/modules/imageslideshow.module.less

@@ -0,0 +1,62 @@
+@import (less) '../values';
+
+.container-stacked {
+  margin: 0 auto;
+  white-space: nowrap;
+  padding-bottom: calc(@xl*2/3);
+
+  @media @tablet {
+    padding-bottom: calc(100vw * (2/3));
+  }
+}
+
+.container-fullscreen {
+  padding-bottom: calc(100vh - 37px);
+  width: 100%;
+
+  @media @tablet {
+    margin: 0 auto;
+    white-space: nowrap;
+    padding-bottom: calc(100vw * (2/3));
+  }
+}
+
+.image-wrapper-stacked {
+  position: absolute;
+  width: 100%;
+}
+
+.image-wrapper-fullscreen {
+  position: absolute;
+  width: 100%;
+
+  @media @mobile {
+    margin: 0;
+    padding: 0;
+    height: auto;
+  }
+}
+
+/* enter animation */
+.fade-enter {
+  opacity: 0;
+}
+
+.fade-enter.fade-enter-active {
+  opacity: 1;
+  transition: opacity 1500ms linear;
+}
+
+/* exit animation */
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit.fade-exit-active {
+  opacity: 0;
+  transition: opacity 2000ms linear;
+}
+
+.fade-exit-done {
+  opacity: 0;
+}

package/styles/modules/topper2.module.less

@@ -1,49 +1,66 @@
 @import (less) "../variables.less";
 
-:root { 
-    --headerDek-vertical-offset: 0px;
-    --headerDek-horizontal-offset: 0px;
+:root {
+  --headerDek-vertical-offset: 0px;
+  --headerDek-horizontal-offset: 0px;
 }
 
 .topperContainerFullScreen {
-    max-width: 100%;
-    position: relative;
+  max-width: 100%;
+  position: relative;
+}
+
+.topperContainerSlideshowFullScreen {
+  max-width: 100%;
+  position: relative;
+  height: calc(100vh - 37px);
+
+  @media @tablet {
+    height: auto;
+  }
 }
 
 .imageFullScreen {
-    top: 0 !important;
-    width: 100%;
+  top: 0 !important;
+  width: 100%;
+
+  @media @mobile {
+    height: 100%;
+  }
 }
 
 .imageStacked {
-    position: relative;
-    overflow: hidden;
+  position: relative;
+  max-width: @xl;
 
-    @media @mobile {
-        width: 100%;
-    }
+  @media @mobile {
+    width: 100%;
+  }
 }
 
 .headerDekStacked {
   margin-left: auto;
   margin-right: auto;
+
   @media (max-width: 960px) {
     margin-left: 0;
     margin-right: 0;
   }
 }
+
 .headerDekFullScreen {
-    position: absolute;
-    padding: @s24; 
-    width: @md;
-    @media @tablet {
-        width: @sm;
-        position: static;
-        transform: none;
-        margin: 0;
-        padding: 0;
-        width: 100%;
-    }
+  position: absolute;
+  padding: @s24;
+  width: @md;
+
+  @media @tablet {
+    width: @sm;
+    position: static;
+    transform: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
 }
 
 .hedFullScreen {
@@ -51,51 +68,55 @@
 }
 
 .deckFullScreen {
-  margin-bottom: 0px; 
+  margin-bottom: 0px;
 }
 
 .headerDekTop {
   top: 0%;
   margin-top: var(--headerDek-vertical-offset);
+
   @media @tablet {
-      margin-top: 0px;
+    margin-top: 0px;
   }
 }
 
 .headerDekBottom {
   bottom: 0%;
   margin-bottom: var(--headerDek-vertical-offset);
+
   @media @tablet {
-      margin-bottom: 0px;
+    margin-bottom: 0px;
   }
 }
 
 .headerDekLeft {
   left: 0%;
   margin-left: var(--headerDek-horizontal-offset);
+
   @media @tablet {
-      margin-left: 0px;
+    margin-left: 0px;
   }
 }
 
 .headerDekRight {
   right: 0%;
   margin-right: var(--headerDek-horizontal-offset);
+
   @media @tablet {
-      margin-right: 0px;
+    margin-right: 0px;
   }
 }
 
 .headerDekCenter {
-  left: 50%; 
+  left: 50%;
   transform: translate(-50%, 0%);
   margin-left: var(--headerDek-horizontal-offset);
 
-  @media @tablet { 
-      transform: none;
-      top: 0%;
-      left: 0%;
-      margin-left: 0px;
+  @media @tablet {
+    transform: none;
+    top: 0%;
+    left: 0%;
+    margin-left: 0px;
   }
 }
 
@@ -105,6 +126,7 @@
 
 .textAlignCenter {
   text-align: center;
+
   @media @tablet {
     text-align: left;
   }
@@ -113,6 +135,7 @@
 .whiteTextBlackBg {
   color: @white;
   background-color: rgba(0, 0, 0, 0.54);
+
   @media @tablet {
     color: @black;
     background-color: transparent;
@@ -124,15 +147,16 @@
   background-color: rgba(255, 255, 255, 0.54);
 }
 
-.hideWhenMobile {
-  @media @mobile { 
-      display: none;
+.hideWhenTablet {
+  @media @tablet {
+    display: none;
   }
 }
 
 .hideWhenDesktop {
   display: none;
-  @media @mobile {
+
+  @media @tablet {
     display: block;
     padding-left: @s8;
   }
@@ -140,4 +164,10 @@
 
 .smallPaddingLeft {
   padding-left: @s8;
+}
+
+.smallPaddingLeftWhenTablet {
+  @media @tablet {
+    padding-left: @s8;
+  }
 }

package/styles/modules/{wcmimage2.module.less → topperimage.module.less}

@@ -1,10 +1,35 @@
 @import (less) '../values';
 @import (less) "../variables.less";
 
-:root { 
+:root {
   --img-bottom-padding-ratio: "56.25%";
 }
 
+.c-force-aspect-ratio {
+  display: static;
+  width: @xl;
+  object-fit: cover;
+  height: calc(@xl*2/3);
+  margin: 0 auto;
+
+  @media @tablet {
+    height: calc(100vw*2/3);
+  }
+}
+
+.c-img-slideshow-fullscreen {
+  display: static;
+  width: 100%;
+  object-fit: cover;
+  height: calc(100vh - 37px);
+  margin: 0 auto;
+
+  @media @tablet {
+    width: @xl;
+    height: calc(100vw*2/3);
+  }
+}
+
 .c-img {
   display: block;
   position: relative;
@@ -17,7 +42,9 @@
 .c-img-fullscreen {
   position: static;
   object-fit: cover;
+  width: 100%;
   height: calc(100vh - 37px);
+
   @media @tablet {
     height: auto;
   }
@@ -25,7 +52,8 @@
 
 .c-fig-hidden-when-desktop {
   display: none;
-  @media @mobile {
+
+  @media @tablet {
     display: block;
     padding-left: @s8;
   }

package/styles/values.less

@@ -94,6 +94,7 @@
 .pa-xl {padding: @s40;}
 .pa-xxl {padding: @s48;}
 
+.mw-xs {max-width: @xs;}
 .mw-sm {max-width: @sm;}
 .mw-md {max-width: @md;}
 .mw-lg {max-width: @lg;}