FEATURE: Add ability to use custom background image (#76)

* FEATURE: Add ability to use custom background image

* Prettier

assets/javascripts/discourse/components/campaign-banner.js.es6

@@ -13,6 +13,9 @@ export default Component.extend({
   dropShadowColor: setting(
     "discourse_subscriptions_campaign_banner_shadow_color"
   ),
+  backgroundImageUrl: setting(
+    "discourse_subscriptions_campaign_banner_bg_image"
+  ),
   isSidebar: equal(
     "siteSettings.discourse_subscriptions_campaign_banner_location",
     "Sidebar"
@@ -34,6 +37,21 @@ export default Component.extend({
 
     this.set("contributors", []);
 
+    // add background-image url to stylesheet
+    if (this.backgroundImageUrl) {
+      const backgroundUrl = `url(${this.backgroundImageUrl}`.replace(/\\/g, "");
+      if (
+        document.documentElement.style.getPropertyValue(
+          "--campaign-background-image"
+        ) !== backgroundUrl
+      ) {
+        document.documentElement.style.setProperty(
+          "--campaign-background-image",
+          backgroundUrl
+        );
+      }
+    }
+
     if (this.showContributors) {
       return ajax("/s/contributors", { method: "get" }).then((result) => {
         this.setProperties({

assets/javascripts/discourse/templates/components/campaign-banner.hbs

@@ -5,7 +5,13 @@
       action="dismissBanner"
       class="close"
     }}
-    <div class="campaign-banner-info">
+    <div class="campaign-banner-info" style="{{if backgroundImageUrl 'background-image: linear-gradient(
+        0deg,
+        rgba(var(--secondary-rgb), 0.75) 0%,
+        rgba(var(--secondary-rgb), 0.75) 100%),
+        var(--campaign-background-image);
+      background-size: cover;
+      background-repeat: no-repeat;' ''}}">
       <h2 class="campaign-banner-info-header">{{i18n 'discourse_subscriptions.campaign.title'}}</h2>
         <p class="campaign-banner-info-description">{{i18n 'discourse_subscriptions.campaign.body'}}</p>
         {{#if product}}