sfc-utils 1.4.13 → 1.4.15

package/components/devhubcredit.mjs

@@ -4,7 +4,7 @@ const DevHubCredit = () => {
   return (
     <>
         <span className="devhub-credit">
-            Powered by the <a target="_blank" href="https://www.poynter.org/business-work/2022/coming-off-big-digital-subscription-growth-hearst-newspapers-plan-a-new-data-and-product-hub-for-2022/">Hearst Newspapers DevHub</a>.
+            Powered by the <a target="_blank" href="https://www.sfchronicle.com/projects/about-the-devhub-hearst-newspapers/">Hearst Newspapers DevHub</a>.
             <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
         </span>
     </>

package/components/topper2.mjs

@@ -12,7 +12,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Video_Mp4, Image_Caption, Image_Credits,
     HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset,
     HeaderDek_Horizontal_Position, Inverted_Colors, Inverted_Layout, Inverted_Text_Color,
-    Topper_Background_Color, Small_Visual_Max_Width
+    Topper_Background_Color, Small_Visual_Max_Width, Small_Visual_Topper_Url
   } = settings
 
   // During server-side rendering, access to ":root" is unavailable. This is okay; we just need
@@ -156,7 +156,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     if (!listStr) return [];
     // For backwards compat, handle both ; and , as delimiters
     let charSearch = ","
-    if (listStr.toString().indexOf(";") !== -1){
+    if (listStr.toString().indexOf(";") !== -1) {
       charSearch = ";"
     }
     return listStr.toString().split(charSearch).map((d) => parseInt(d));
@@ -244,11 +244,20 @@ const Topper2 = ({ settings, wcmData, mods }) => {
           />
         )
       case "small-visual":
-        // If there is a "Small_Visual_Max_Width" column, set the custom max width
+        // If there is a "Small_Visual_Max_Width" column, override the max width of the topper image
         if (Small_Visual_Max_Width && r) {
           r.style.setProperty('--small-visual-max-width', Small_Visual_Max_Width)
         }
 
+        // If there is a custom topper image or gif url, override the WCM image
+        if (Small_Visual_Topper_Url) {
+          return <img
+            className={imageStyles.cImgSmallVisualUrl}
+            src={Small_Visual_Topper_Url}
+            alt={Image_Alt}
+          />
+        }
+
         return (
           <TopperImage
             wcm={Image}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.4.13",
+  "version": "1.4.15",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",

package/styles/modules/topperimage.module.less

@@ -119,6 +119,16 @@
   padding: 0;
 }
 
+.c-img-small-visual-url {
+  max-width: var(--small-visual-max-width);
+  width: calc(100vw - 32px);
+  margin: @s16 @s16 0 @s16;
+
+  @media @mobile {
+    margin: auto;
+  }
+}
+
 .c-container-side-by-side {
   height: 100%;
 }