sfc-utils 1.3.65 → 1.3.67

package/components/captioncredit.mjs

@@ -1,29 +1,29 @@
 import React from 'react'
-// import * as capcredStyles from "../styles/modules/captioncredit.module.less"
 
-const CaptionCredit = (props) => {
-  let {caption, credit, extraStyles} = props
-
-  let captionCss = ["topper-image", "caption"]; //capcredStyles.cFigCap, 
-  if (extraStyles) captionCss = captionCss.concat(extraStyles);
+const CaptionCredit = ({ caption, credit, extraStyles, creditStyles = [] }) => {
+  let captionCss = ["topper-image", "caption"];
+  if (extraStyles) {
+    captionCss = captionCss.concat(extraStyles);
+  }
 
+  let creditCss = `credit ${creditStyles.join(" ")}`
   return (
     <>
-    {caption && credit && (
-      <figcaption className={captionCss.join(' ')}>
-        {caption} <span className="credit">{credit}</span>
-      </figcaption>
-    )}
-    {!caption && credit && (
-      <figcaption className={captionCss.join(' ')}>
-        <span className="credit">{credit}</span>
-      </figcaption>
-    )}
-    {caption && !credit && (
-      <figcaption className={captionCss.join(' ')}>
-        {caption}
-      </figcaption>
-    )}
+      {caption && credit && (
+        <figcaption className={captionCss.join(' ')}>
+          {caption} <span className={creditCss}>{credit}</span>
+        </figcaption>
+      )}
+      {!caption && credit && (
+        <figcaption className={captionCss.join(' ')}>
+          <span className={creditCss}>{credit}</span>
+        </figcaption>
+      )}
+      {caption && !credit && (
+        <figcaption className={captionCss.join(' ')}>
+          {caption}
+        </figcaption>
+      )}
     </>
   )
 }

package/components/helpers/utilfunctions.mjs

@@ -1,12 +1,75 @@
+import { getBlueconic } from "../../blueconic"
+import { appCheck, blendHDN } from "../../index"
+
+/** Used for resizing the WCM Image */
 function debounce(fn, ms) {
-    let timer
-    return _ => {
-      clearTimeout(timer)
-      timer = setTimeout(_ => {
-        timer = null
-        fn.apply(this, arguments)
-      }, ms)
+  let timer
+  return _ => {
+    clearTimeout(timer)
+    timer = setTimeout(_ => {
+      timer = null
+      fn.apply(this, arguments)
+    }, ms)
+  }
+}
+
+function appendLayoutScripts(isEmbedded, isAdRemoved) {
+  const isApp = appCheck();
+
+  // React Helmet is actually terrible and runs these scripts twice, so we are including them async ourselves
+  // Run analytics and resizing scripts right away so we take care of that
+  if (!isEmbedded) {
+    let script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://nexus.ensighten.com/hearst/news/Bootstrap.js';
+    document.body.appendChild(script);
+  } else {
+    let script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://projects.sfchronicle.com/shared/js/responsive-child.js';
+    document.body.appendChild(script);
+  }
+
+  if (!isEmbedded && !isAdRemoved) {
+    let script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.id = 'adPositionManagerScriptTag';
+    script.src = 'https://aps.hearstnp.com/Scripts/loadAds.js';
+    document.body.appendChild(script);
+  }
+
+  // Wait a beat, then add to body so it doesn't mess with the head (which Helmet seems to want to manage)
+  setTimeout(() => {
+    if (!isEmbedded && !isApp) {
+      let blueconicURL = getBlueconic(window.location.origin)
+      let script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.defer = true;
+      script.src = blueconicURL;
+      document.body.appendChild(script);
+    }
+  }, 5000)
+}
+
+function formatHDN(isEmbedded, url_add, meta) {
+  const isApp = appCheck();
+
+  // Combine our settings with what Hearst puts on page
+  let stringHDN = ''
+  if (!isEmbedded) {
+    // Put url_add into a new meta object to pass in
+    const metaHDN = Object.assign({}, meta)
+    metaHDN.URL_ADD = url_add
+    // Make sure this is free on app
+    if (isApp) {
+      metaHDN.PAYWALL_SETTING = "free"
     }
+    // Allow gift button to appear next to sharebuttons
+    metaHDN.GIFT_ENABLED = true
+    let blended = blendHDN(metaHDN)
+    stringHDN = blended.stringHDN
   }
+  return stringHDN;
+}
 
-export { debounce }
+export { debounce, appendLayoutScripts, formatHDN }

package/components/layout/layouthelmet.mjs

@@ -0,0 +1,125 @@
+import React from 'react'
+
+import { Helmet } from 'react-helmet'
+import { appCheck, getBrands2 } from "../../index"
+
+const LayoutHelmet = ({ meta, url_add }) => {
+  let {
+    EMBEDDED,
+    MAIN_DOMAIN,
+    PROJECT: {
+      AUTHORS,
+      DESCRIPTION,
+      IMAGE,
+      ISO_MODDATE,
+      ISO_PUBDATE,
+      OPT_SLASH,
+      SLUG,
+      SOCIAL_TITLE,
+      SUBFOLDER,
+      TITLE,
+      MARKET_KEY,
+      CANONICAL_URL
+    },
+  } = meta
+
+  const isApp = appCheck()
+  const thisBrand = getBrands2(MARKET_KEY);
+
+  // Get stylesheet id from market key
+  let styleSheetID
+  if ((MARKET_KEY === "SFC") || (MARKET_KEY === "Houston") || (MARKET_KEY === "Albany")) {
+    styleSheetID = MARKET_KEY
+  }
+  else {
+    styleSheetID = "default"
+  }
+
+  // Handle author data
+  let authorObj = []
+  let newAuthor = {}
+  try {
+    AUTHORS.forEach(author => {
+      newAuthor = {
+        '@type': 'Person',
+        name: author.AUTHOR_NAME,
+        url: author.AUTHOR_PAGE,
+      }
+      authorObj.push(newAuthor)
+    })
+  } catch (err) {
+    // If it errored, just set to neutral default
+    authorObj = {
+      '@type': 'Person',
+      name: thisBrand.attributes.siteName,
+      url: MAIN_DOMAIN,
+    }
+  }
+
+  return (
+    <Helmet>
+      <title>{TITLE}</title>
+      <meta name="description" content={DESCRIPTION} />
+      <link
+        rel="shortcut icon"
+        href="/favicon.ico"
+        type="image/x-icon"
+      />
+      <link rel="canonical" href={`${CANONICAL_URL}/${url_add}`} />
+      <link rel="stylesheet" href={`https://files.sfchronicle.com/brand-styles/${styleSheetID}.css`} />
+
+      {(isApp || EMBEDDED) ? (
+        <meta name="robots" content="noindex, nofollow" />
+      ) : (
+        <meta name="robots" content="max-image-preview:large" />
+      )}
+
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={SOCIAL_TITLE} />
+      <meta name="twitter:site" content={"@" + thisBrand.attributes.twitter} />
+      <meta
+        name="twitter:url"
+        content={`${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}`}
+      />
+      <meta name="twitter:image" content={IMAGE} />
+      <meta name="twitter:description" content={DESCRIPTION} />
+
+      <meta property="og:type" content="article" />
+      <meta property="og:title" content={SOCIAL_TITLE} />
+      <meta property="og:site_name" content={thisBrand.attributes.siteName} />
+      <meta property="og:url" content={`${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}`} />
+      <meta property="og:image" content={IMAGE} />
+      <meta property="og:description" content={DESCRIPTION} />
+
+      <script data-schema="NewsArticle" type="application/ld+json">{`{
+          "@context": "http://schema.org",
+          "@type": "NewsArticle",
+          "mainEntityOfPage": {
+            "@type": "WebPage",
+            "@id": "${MAIN_DOMAIN}/${SUBFOLDER}${OPT_SLASH}${SLUG}/${url_add}"
+          },
+          "headline": "${TITLE}",
+          "image": {
+            "@type": "ImageObject",
+            "url": "${IMAGE}"
+          },
+          "datePublished": "${ISO_PUBDATE}",
+          "dateModified": "${ISO_MODDATE}",
+          "author": ${JSON.stringify(authorObj)},
+          "publisher": {
+            "@type": "Organization",
+            "name": "${thisBrand.attributes.siteName}",
+            "logo": {
+              "@type": "ImageObject",
+              "url": "/apple-touch-icon.png",
+              "width": "180",
+              "height": "180"
+            }
+          },
+          "description": "${DESCRIPTION}"
+        }`}</script>
+    </Helmet>
+  )
+}
+
+export default LayoutHelmet

package/components/layout/layoutscript.mjs

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const LayoutScript = () => {
+  return (
+    <>
+      <script src="https://projects.sfchronicle.com/shared/js/jquery.min.js"></script>
+      <script src="https://treg.hearstnp.com/treg.js"></script>
+    </>
+  )
+}
+
+export default LayoutScript

package/components/ogpubdate.mjs

@@ -0,0 +1,18 @@
+import React from "react"
+
+import {
+  pubdateString,
+  moddateString
+} from './helpers/datehelpers.mjs'
+
+const OgPubDate = ({ settings }) => {
+  return (
+    <>
+      {moddateString && 
+        <p><i>Originally published on {pubdateString}</i></p>
+      }
+    </>
+  )
+}
+
+export default OgPubDate

package/components/slideshow/captioncreditslideshow.mjs

@@ -1,8 +1,10 @@
 import React, { useEffect, useState, useRef } from "react"
 
-const CaptionCreditSlideshow = ({ captionList, creditList, extraStyles }) => {
+const CaptionCreditSlideshow = ({ captionList, creditList, extraStyles, creditStyles = [] }) => {
   let captionCss = ["topper-image", "caption"];
-  if (extraStyles) captionCss = captionCss.concat(extraStyles);
+  if (extraStyles) {
+    captionCss = extraStyles.concat(captionCss);
+  }
 
   const [index, setIndex] = useState(0);
   const timeoutRef = useRef(null);
@@ -29,16 +31,17 @@ const CaptionCreditSlideshow = ({ captionList, creditList, extraStyles }) => {
 
   const hasCaption = (captionList.length > 0)
   const hasCredit = (creditList.length > 0)
+  let creditCss = `credit ${creditStyles.join(" ")}`
   return (
     <>
       {hasCaption && hasCredit && (
         <figcaption className={captionCss.join(' ')}>
-          {captionList[index]} <span className="credit">{creditList[index]}</span>
+          {captionList[index]} <span className={creditCss}>{creditList[index]}</span>
         </figcaption>
       )}
       {!hasCaption && hasCredit && (
         <figcaption className={captionCss.join(' ')}>
-          <span className="credit">{creditList[index]}</span>
+          <span className={creditCss}>{creditList[index]}</span>
         </figcaption>
       )}
       {hasCaption && !hasCredit && (

package/components/slideshow/imageslideshow.mjs

@@ -4,7 +4,7 @@ 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 ImageSlideshow = ({ wcmData, imageList, altList, topperStyle, isLayoutInverted = false }) => {
   const [index, setIndex] = useState(0);
   const timeoutRef = useRef(null);
 
@@ -31,7 +31,6 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle }) => {
   const getContainerClass = () => {
     switch (topperStyle) {
       case "stacked":
-        return styles.containerStacked;
       case "full-screen":
         return styles.containerStacked;
       default:
@@ -45,6 +44,10 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle }) => {
         return styles.imageWrapperStacked;
       case "full-screen":
         return styles.imageWrapperFullscreen;
+      case "side-by-side":
+        return styles.imageWrapperSideBySide;
+      case "side-by-side-portrait":
+        return styles.imageWrapperSideBySidePortrait;
       default:
         return "";
     }
@@ -56,6 +59,18 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle }) => {
         return [imageStyles.cForceAspectRatio];
       case "full-screen":
         return [imageStyles.cImgSlideshowFullscreen];
+      case "side-by-side":
+        return [imageStyles.cImgSlideshowSideBySide].concat(
+          // Add styling for left padding on topper image
+          (isLayoutInverted) ? [imageStyles.cLargePaddingLeft] : [imageStyles.cLargePaddingRight]
+        );
+      case "side-by-side-portrait":
+        return [imageStyles.cImgSlideshowSideBySidePortrait].concat(
+          [
+            // Add styling for left padding on image caption
+            (isLayoutInverted) ? [] : [styles.sideBySidePortraitMarginLeft]
+          ]
+        );
       default:
         return [""];
     }

package/components/topper2.mjs

@@ -10,7 +10,9 @@ 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
+    HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset,
+    HeaderDek_Horizontal_Position, Inverted_Colors, Inverted_Layout, Inverted_Text_Color,
+    Topper_Background_Color
   } = settings
 
   const headerDekStyleList = () => {
@@ -35,6 +37,19 @@ const Topper2 = ({ settings, wcmData }) => {
           ... (Inverted_Colors === "black-text-white-bg") ? [topperStyles.blackTextWhiteBg] : [topperStyles.whiteTextBlackBg]
         ];
       case "side-by-side":
+        return [
+          topperStyles.headerDekSideBySide,
+          // Add styling for left padding on header-deck
+          ... (Inverted_Layout === "headerdek-right-image-left") ? [topperStyles.largePaddingRight] : [topperStyles.largePaddingLeft]
+        ];
+      case "side-by-side-portrait":
+        return [
+          topperStyles.headerDekSideBySide,
+          // Add styling for left padding on header-deck
+          ... (Inverted_Layout === "headerdek-right-image-left") ? [topperStyles.largePaddingRight] : [topperStyles.largePaddingLeft]
+        ];
+      default:
+        console.error(`${Topper_Style} is not a valid topper style!`)
         return [];
     }
   }
@@ -49,7 +64,7 @@ const Topper2 = ({ settings, wcmData }) => {
   }
 
   const headerStyleList = () => {
-    let defaultStyles;
+    let defaultStyles = [];
     switch (Topper_Style) {
       case "stacked":
         defaultStyles = [];
@@ -61,7 +76,8 @@ const Topper2 = ({ settings, wcmData }) => {
         defaultStyles = [topperStyles.hedFullScreen, fullScreenTextAlignCss()];
         break;
       case "side-by-side":
-        defaultStyles = [];
+      case "side-by-side-portrait":
+        defaultStyles = ["left"];
         break;
     }
 
@@ -83,11 +99,14 @@ const Topper2 = ({ settings, wcmData }) => {
       case "full-screen":
         return ["deck", topperStyles.deckFullScreen, fullScreenTextAlignCss()];
       case "side-by-side":
-        return ["deck"];
+      case "side-by-side-portrait":
+        return ["deck left"];
+      default:
+        return [""]
     }
   }
 
-  /** get text alignment based on header-deck position **/
+  /** Get text alignment based on header-deck position **/
   const fullScreenTextAlignCss = () => {
     switch (HeaderDek_Horizontal_Position) {
       case "left": return topperStyles.textAlignLeft;
@@ -96,6 +115,27 @@ const Topper2 = ({ settings, wcmData }) => {
     }
   }
 
+  /** Add styling for text color on topper slideshow captions. Note that the credits 
+   * are grey when the caption is black and white when the captions are white. */
+  const sideBySideCapCredColorCss = () => {
+    return (Inverted_Text_Color === "black") ? topperStyles.captionTextColor : topperStyles.captionTextColorImportant;
+  }
+
+  /** Add styling for left padding on topper slideshow captions */
+  const sideBySideCapCredPaddingCss = () => {
+    return (Inverted_Layout === "headerdek-right-image-left") ? topperStyles.captionLargePaddingLeft : topperStyles.captionLargePaddingRight
+  }
+
+  /** Add styling for left padding on topper slideshow captions */
+  const sideBySidePortraitCapCredPaddingCss = () => {
+    return (Inverted_Layout === "headerdek-right-image-left") ? topperStyles.captionSmallPaddingLeft : topperStyles.captionSideBySidePortraitPadding;
+  }
+
+  /** Add styling for float position for side-by-side-portrait image */
+  const sideBySidePortraitFloatCss = () => {
+    return (Inverted_Layout === "headerdek-right-image-left") ? topperStyles.floatLeftWhenDesktop : topperStyles.floatRightWhenDesktop;
+  }
+
   /** Converts wcm string from spreadsheet into a list of WCM ids */
   const getWcmIdList = (listStr) => {
     return listStr.split(";").map((d) => parseInt(d));
@@ -119,15 +159,52 @@ const Topper2 = ({ settings, wcmData }) => {
     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}
-    />
+  /* Returns the corresponding image HTML for each topper style and slideshow status */
+  const getImageHTML = (isSlideshow) => {
+    if (isSlideshow) return (
+      <ImageSlideshow
+        wcmData={wcmData}
+        imageList={wcmIdList}
+        altList={convertStringToList(Image_Alt, wcmIdList.length)}
+        topperStyle={Topper_Style}
+        isLayoutInverted={(Inverted_Layout === "headerdek-right-image-left")}
+      />
+    )
+
+    switch (Topper_Style) {
+      case "stacked":
+        return (<TopperImage wcm={Image} alt={Image_Alt} wcmData={wcmData} />)
+      case "full-screen":
+        return (<TopperImage
+          wcm={Image}
+          alt={Image_Alt}
+          wcmData={wcmData}
+          overrideCssList={[imageStyles.cImgFullscreen]}
+        />)
+      case "side-by-side":
+        return (
+          <TopperImage
+            wcm={Image}
+            alt={Image_Alt}
+            wcmData={wcmData}
+            containerCssList={[imageStyles.cContainerSideBySide]}
+            overrideCssList={[imageStyles.cImgSideBySide]}
+          />)
+      case "side-by-side-portrait":
+        return (
+          <TopperImage
+            wcm={Image}
+            alt={Image_Alt}
+            wcmData={wcmData}
+            containerCssList={[imageStyles.cContainerSideBySidePortrait, sideBySidePortraitFloatCss()]}
+            overrideCssList={[imageStyles.cImgSideBySidePortrait]}
+          />
+        )
+      case "no-visual":
+      default:
+        return null
+    }
+  }
 
   const wcmIdList = getWcmIdList(Image);
   const TopperHtml = () => {
@@ -138,15 +215,14 @@ const Topper2 = ({ settings, wcmData }) => {
           <>
             <div className={containerCss}>
               <figure className={`topper-image ${topperStyles.imageFullScreen}`} aria-labelledby="topperCaptionText">
-                {isSlideshow(wcmIdList) && <ImageSlideshowHTML />}
-                {!isSlideshow(wcmIdList) && <FullScreenImageHTML />}
+                {getImageHTML(isSlideshow(wcmIdList))}
 
                 {/* 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}
+                    extraStyles={[topperStyles.hideWhenDesktop]}
                   />
                 }
                 {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={topperStyles.hideWhenDesktop} />}
@@ -193,8 +269,8 @@ const Topper2 = ({ settings, wcmData }) => {
                 />
               </div>
               <figure className={`mw-xl ml-auto mr-auto ${topperStyles.imageStacked}`}>
-                {isSlideshow(wcmIdList) && <ImageSlideshowHTML />}
-                {!isSlideshow(wcmIdList) && <ImageHTML />}
+                {getImageHTML(isSlideshow(wcmIdList))}
+
                 {isSlideshow(wcmIdList) &&
                   <CaptionCreditSlideshow
                     captionList={convertStringToList(Image_Caption, wcmIdList.length)}
@@ -202,7 +278,7 @@ const Topper2 = ({ settings, wcmData }) => {
                     extraStyles={[topperStyles.smallPaddingLeftWhenTablet]}
                   />
                 }
-                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.smallPaddingLeftWhenTablet]}/>}
+                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.smallPaddingLeftWhenTablet]} />}
               </figure>
             </div>
           </>
@@ -227,18 +303,90 @@ const Topper2 = ({ settings, wcmData }) => {
             </div>
           </>
         );
+
+      case "side-by-side":
+        let figureCss = isSlideshow(wcmIdList) ? `${topperStyles.imageSideBySideSlideshow}` : `${topperStyles.imageSideBySide}`;
+        let sideBySideContainerCss = (Inverted_Layout === "headerdek-right-image-left") ? `${topperStyles.topperContainerSideBySide} ${topperStyles.reverseFlexbox}` : `${topperStyles.topperContainerSideBySide}`;
+        setBackgroundAndTextColor();
+        return (
+          <div className={sideBySideContainerCss}>
+            <div className={headerDekStyleList().join(' ')}>
+              <Heading
+                level={1}
+                text={Title}
+                className={headerStyleList().join(' ')}
+              />
+              <Heading
+                level={2}
+                text={Deck}
+                className={deckStyleList().join(' ')}
+              />
+            </div>
+            <figure className={figureCss}>
+              {getImageHTML(isSlideshow(wcmIdList))}
+
+              {isSlideshow(wcmIdList) &&
+                <CaptionCreditSlideshow
+                  captionList={convertStringToList(Image_Caption, wcmIdList.length)}
+                  creditList={convertStringToList(Image_Credits, wcmIdList.length)}
+                  extraStyles={[topperStyles.slideshowCaptionSideBySide, sideBySideCapCredColorCss(), sideBySideCapCredPaddingCss()]}
+                  creditStyles={[sideBySideCapCredColorCss()]}
+                />
+              }
+              {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySide, sideBySideCapCredColorCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
+            </figure>
+          </div>
+        );
+
+      case "side-by-side-portrait":
+        let portraitFigureCss = isSlideshow(wcmIdList) ? `${topperStyles.imageSideBySidePortraitSlideshow}` : `${topperStyles.imageSideBySidePortrait}`;
+        let sideBySidePortraitContainerCss = (Inverted_Layout === "headerdek-right-image-left") ? `${topperStyles.topperContainerSideBySidePortrait} ${topperStyles.reverseFlexbox}` : `${topperStyles.topperContainerSideBySidePortrait}`;
+        setBackgroundAndTextColor();
+        return (
+          <div className={topperStyles.fullWidthContainer}>
+            <div className={sideBySidePortraitContainerCss}>
+              <div className={headerDekStyleList().join(' ')}>
+                <Heading
+                  level={1}
+                  text={Title}
+                  className={headerStyleList().join(' ')}
+                />
+                <Heading
+                  level={2}
+                  text={Deck}
+                  className={deckStyleList().join(' ')}
+                />
+              </div>
+              <figure className={portraitFigureCss}>
+                {getImageHTML(isSlideshow(wcmIdList))}
+
+                {isSlideshow(wcmIdList) &&
+                  <CaptionCreditSlideshow
+                    captionList={convertStringToList(Image_Caption, wcmIdList.length)}
+                    creditList={convertStringToList(Image_Credits, wcmIdList.length)}
+                    extraStyles={[topperStyles.slideshowCaptionSideBySidePortrait, sideBySideCapCredColorCss(), sideBySidePortraitCapCredPaddingCss()]}
+                    creditStyles={[sideBySideCapCredColorCss()]}
+                  />
+                }
+                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySidePortrait, sideBySideCapCredColorCss(), sideBySidePortraitFloatCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
+              </figure>
+            </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 r = (typeof window != "undefined") ? document.querySelector(':root') : null;
 
     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");
+    if (r) {
+      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 **/
@@ -257,6 +405,19 @@ const Topper2 = ({ settings, wcmData }) => {
     return num;
   }
 
+  /** Sets the background and text color in topper for side-by-side and side-by-side-portrait topper styles **/
+  const setBackgroundAndTextColor = () => {
+    let r = (typeof window != "undefined") ? document.querySelector(':root') : null;
+
+    if (r && Topper_Background_Color) {
+      r.style.setProperty('--container-background-color', Topper_Background_Color)
+    }
+
+    if (r && Inverted_Text_Color) {
+      r.style.setProperty('--side-by-side-text-color', Inverted_Text_Color)
+    }
+  }
+
   return (
     <TopperHtml />
   )