Use body banner images as fallback background

packages/scripts/dist/app.js

@@ -180,6 +180,8 @@ export class App extends ENGrid {
         new CustomCurrency();
         // Auto Country Select
         new AutoCountrySelect();
+        // Page Background
+        new PageBackground(this.options.UseBodyBannerImageAsBackground);
         // Add Image Attribution
         if (this.options.MediaAttribution)
             new MediaAttribution();
@@ -230,8 +232,6 @@ export class App extends ENGrid {
         new A11y();
         new AddNameToMessage();
         new ExpandRegionName();
-        // Page Background
-        new PageBackground();
         // Url Params to Form Fields
         new UrlToForm();
         // Required if Visible Fields

packages/scripts/dist/interfaces/options.d.ts

@@ -1,5 +1,6 @@
 export interface Options {
     backgroundImage?: string | string[];
+    UseBodyBannerImageAsBackground?: boolean;
     MediaAttribution?: boolean;
     applePay?: boolean;
     CapitalizeFields?: boolean;

packages/scripts/dist/interfaces/options.js

@@ -54,4 +54,5 @@ export const OptionsDefaults = {
         "rightright1col",
         "none",
     ],
+    UseBodyBannerImageAsBackground: false,
 };

packages/scripts/dist/page-background.d.ts

@@ -1,12 +1,18 @@
 export declare class PageBackground {
     private pageBackground;
+    private bodyBanner;
+    private bodyBannerImage;
     private mutationObserver;
     private logger;
-    constructor();
+    constructor(useBodyBannerImage?: boolean);
+    private findBodyBannerImage;
     /**
      * Initialize background image by finding and setting CSS custom property
      */
     private initializeBackgroundImage;
+    private getBackgroundImage;
+    private useBodyBannerAsBackground;
+    private getImageSource;
     /**
      * Set the background image URL as a CSS custom property
      */

packages/scripts/dist/page-background.js

@@ -1,11 +1,16 @@
 import { ENGrid, EngridLogger } from ".";
 export class PageBackground {
-    constructor() {
+    constructor(useBodyBannerImage = false) {
         // @TODO: Change page-backgroundImage to page-background
         this.pageBackground = document.querySelector(".page-backgroundImage");
+        this.bodyBanner = document.querySelector(".body-banner");
+        this.bodyBannerImage = null;
         this.mutationObserver = null;
         this.logger = new EngridLogger("PageBackground", "lightblue", "darkblue", "🖼️");
-        if (!this.pageBackground) {
+        if (useBodyBannerImage) {
+            this.bodyBannerImage = this.findBodyBannerImage();
+        }
+        if (!this.pageBackground && !this.bodyBannerImage) {
             this.logger.log("A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used");
             return;
         }
@@ -14,28 +19,64 @@ export class PageBackground {
         this.processAttributionPositioning();
         this.setupMutationObserver();
     }
+    findBodyBannerImage() {
+        if (!this.bodyBanner) {
+            return null;
+        }
+        return this.bodyBanner.querySelector(".body-banner img.preferred-image, .body-banner img");
+    }
     /**
      * Initialize background image by finding and setting CSS custom property
      */
     initializeBackgroundImage() {
-        if (!this.pageBackground)
+        const backgroundImg = this.getBackgroundImage();
+        if (!backgroundImg) {
+            this.logger.log("No image found in page background and no body banner image found (or pageBackground is already occupied), any default image set in the theme on --engrid__page-backgroundImage_url will be used");
             return;
-        const pageBackgroundImg = this.pageBackground.querySelector("img");
-        if (!pageBackgroundImg) {
-            this.logger.log("A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used");
+        }
+        const imageSource = this.getImageSource(backgroundImg);
+        if (!imageSource) {
+            this.logger.log("A background image set in the page was found but without a data-src or src value, no action taken", backgroundImg);
             return;
         }
-        const dataSrc = pageBackgroundImg.getAttribute("data-src");
-        const src = pageBackgroundImg.src;
-        if (dataSrc) {
-            this.setBackgroundImageUrl(dataSrc, "data-src");
+        this.setBackgroundImageUrl(imageSource.url, imageSource.sourceType);
+    }
+    getBackgroundImage() {
+        if (!this.pageBackground) {
+            return null;
         }
-        else if (src) {
-            this.setBackgroundImageUrl(src, "src");
+        const existingImage = this.pageBackground.querySelector("img");
+        if (existingImage) {
+            return existingImage;
         }
-        else {
-            this.logger.log("A background image set in the page was found but without a data-src or src value, no action taken", pageBackgroundImg);
+        if (this.bodyBannerImage && this.pageBackground.children.length === 0) {
+            return this.useBodyBannerAsBackground();
+        }
+        return null;
+    }
+    useBodyBannerAsBackground() {
+        if (!this.pageBackground || !this.bodyBanner) {
+            return null;
+        }
+        this.logger.log("No image found in page background, using body banner image as background image instead");
+        const clonedBodyBanner = this.bodyBanner.cloneNode(true);
+        while (clonedBodyBanner.firstChild) {
+            this.pageBackground.appendChild(clonedBodyBanner.firstChild);
+        }
+        document.body.removeAttribute("data-engrid-no-page-backgroundImage");
+        ENGrid.setBodyData("use-body-banner-background", "");
+        return this.pageBackground.querySelector("img.preferred-image, img");
+    }
+    getImageSource(backgroundImg) {
+        const dataSrc = backgroundImg.getAttribute("data-src");
+        if (dataSrc) {
+            return { sourceType: "data-src", url: dataSrc };
+        }
+        const src = backgroundImg.src;
+        if (src) {
+            return { sourceType: "src", url: src };
         }
+        return null;
     }
     /**
      * Set the background image URL as a CSS custom property

packages/scripts/src/app.ts

@@ -336,6 +336,9 @@ export class App extends ENGrid {
     // Auto Country Select
     new AutoCountrySelect();
 
+    // Page Background
+    new PageBackground(this.options.UseBodyBannerImageAsBackground);
+
     // Add Image Attribution
     if (this.options.MediaAttribution) new MediaAttribution();
     // Apple Pay
@@ -392,8 +395,6 @@ export class App extends ENGrid {
     new AddNameToMessage();
     new ExpandRegionName();
 
-    // Page Background
-    new PageBackground();
 
     // Url Params to Form Fields
     new UrlToForm();

packages/scripts/src/interfaces/options.ts

@@ -1,5 +1,6 @@
 export interface Options {
   backgroundImage?: string | string[];
+  UseBodyBannerImageAsBackground?: boolean;
   MediaAttribution?: boolean;
   applePay?: boolean;
   CapitalizeFields?: boolean;
@@ -263,4 +264,5 @@ export const OptionsDefaults: Options = {
     "rightright1col",
     "none",
   ],
+  UseBodyBannerImageAsBackground: false,
 };

packages/scripts/src/page-background.ts

@@ -5,6 +5,10 @@ export class PageBackground {
   private pageBackground: HTMLElement | null = document.querySelector(
     ".page-backgroundImage"
   );
+  private bodyBanner: HTMLElement | null = document.querySelector(
+    ".body-banner"
+  );
+  private bodyBannerImage: HTMLImageElement | null = null;
   private mutationObserver: MutationObserver | null = null;
   private logger: EngridLogger = new EngridLogger(
     "PageBackground",
@@ -13,8 +17,12 @@ export class PageBackground {
     "🖼️"
   );
 
-  constructor() {
-    if (!this.pageBackground) {
+  constructor(useBodyBannerImage: boolean = false) {
+    if (useBodyBannerImage) {
+      this.bodyBannerImage = this.findBodyBannerImage();
+    }
+
+    if (!this.pageBackground && !this.bodyBannerImage) {
       this.logger.log(
         "A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used"
       );
@@ -27,36 +35,95 @@ export class PageBackground {
     this.setupMutationObserver();
   }
 
+  private findBodyBannerImage(): HTMLImageElement | null {
+    if (!this.bodyBanner) {
+      return null;
+    }
+
+    return this.bodyBanner.querySelector(
+      ".body-banner img.preferred-image, .body-banner img"
+    ) as HTMLImageElement | null;
+  }
+
   /**
    * Initialize background image by finding and setting CSS custom property
    */
   private initializeBackgroundImage(): void {
-    if (!this.pageBackground) return;
-
-    const pageBackgroundImg = this.pageBackground.querySelector(
-      "img"
-    ) as HTMLImageElement | null;
+    const backgroundImg = this.getBackgroundImage();
 
-    if (!pageBackgroundImg) {
+    if (!backgroundImg) {
       this.logger.log(
-        "A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used"
+        "No image found in page background and no body banner image found (or pageBackground is already occupied), any default image set in the theme on --engrid__page-backgroundImage_url will be used"
       );
       return;
     }
 
-    const dataSrc = pageBackgroundImg.getAttribute("data-src");
-    const src = pageBackgroundImg.src;
+    const imageSource = this.getImageSource(backgroundImg);
 
-    if (dataSrc) {
-      this.setBackgroundImageUrl(dataSrc, "data-src");
-    } else if (src) {
-      this.setBackgroundImageUrl(src, "src");
-    } else {
+    if (!imageSource) {
       this.logger.log(
         "A background image set in the page was found but without a data-src or src value, no action taken",
-        pageBackgroundImg
+        backgroundImg
       );
+      return;
+    }
+
+    this.setBackgroundImageUrl(imageSource.url, imageSource.sourceType);
+  }
+
+  private getBackgroundImage(): HTMLImageElement | null {
+    if (!this.pageBackground) {
+      return null;
+    }
+
+    const existingImage = this.pageBackground.querySelector("img");
+    if (existingImage) {
+      return existingImage;
     }
+
+    if (this.bodyBannerImage && this.pageBackground.children.length === 0) {
+      return this.useBodyBannerAsBackground();
+    }
+
+    return null;
+  }
+
+  private useBodyBannerAsBackground(): HTMLImageElement | null {
+    if (!this.pageBackground || !this.bodyBanner) {
+      return null;
+    }
+
+    this.logger.log(
+      "No image found in page background, using body banner image as background image instead"
+    );
+
+    const clonedBodyBanner = this.bodyBanner.cloneNode(true) as HTMLElement;
+    while (clonedBodyBanner.firstChild) {
+      this.pageBackground.appendChild(clonedBodyBanner.firstChild);
+    }
+
+    document.body.removeAttribute("data-engrid-no-page-backgroundImage");
+    ENGrid.setBodyData("use-body-banner-background", "");
+
+    return this.pageBackground.querySelector(
+      "img.preferred-image, img"
+    ) as HTMLImageElement | null;
+  }
+
+  private getImageSource(
+    backgroundImg: HTMLImageElement
+  ): { sourceType: string; url: string } | null {
+    const dataSrc = backgroundImg.getAttribute("data-src");
+    if (dataSrc) {
+      return { sourceType: "data-src", url: dataSrc };
+    }
+
+    const src = backgroundImg.src;
+    if (src) {
+      return { sourceType: "src", url: src };
+    }
+
+    return null;
   }
 
   /**

packages/styles/src/_engrid-banner-image.scss

@@ -16,6 +16,14 @@
   }
 }
 
+@mixin engrid_hide-body-banner-on-desktop {
+  &[data-engrid-use-body-banner-background]:not(#en__pagebuilder) {
+    .body-banner {
+      display: none !important;
+    }
+  }
+}
+
 @mixin engrid_mobile-banner {
   // If there is content in the body-title, hide the body-bannerOverlay on mobile
   body[data-engrid-has-body-title] .en__component--advrow .body-bannerOverlay {

packages/styles/src/layouts/_engrid-layout-centercenter1col.scss

@@ -95,6 +95,7 @@ $centercenter1col_body-column_offset-width-remaining: $centercenter1col_content-
     }
 
     @include engrid_hide-background-on-desktop;
+    @include engrid_hide-body-banner-on-desktop;
   }
 
   @media screen and (max-width: $centercenter1col_content-column_min-width_minus-1px) {

packages/styles/src/layouts/_engrid-layout-centerleft1col.scss

@@ -61,6 +61,7 @@ $centerleft1col_body-column_offset-width-remaining: $centerleft1col_content-colu
     }
 
     @include engrid_hide-background-on-desktop;
+    @include engrid_hide-body-banner-on-desktop;
   }
 
   @media screen and (max-width: $centerleft1col_content-column_min-width_minus-1px) {