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}}

config/locales/client.en.yml

@@ -11,6 +11,7 @@ en:
     discourse_subscriptions_campaign_type: Selects the type of campaign to run (subscribers or monthly amount raised).
     discourse_subscriptions_campaign_banner_location: Selects the location of the campaign banner (top or sidebar).
     discourse_subscriptions_campaign_banner_shadow_color: Selects the color of the campaign banner drop shadow.
+    discourse_subscriptions_campaign_banner_bg_image: Upload a custom image to use as the background on the campaign banner.
     discourse_subscriptions_campaign_show_contributors: Show avatars of the most recent purchases of subscription products.
     discourse_subscriptions_campaign_product: The Stripe product id to send supporters when they click the button on the campaign. If this setting is blank, supporters will be directed to the main products page.
     errors:

config/settings.yml

@@ -48,6 +48,10 @@ plugins:
     choices:
       - Top
       - Sidebar
+  discourse_subscriptions_campaign_banner_bg_image:
+    client: true
+    type: upload
+    default: ""
   discourse_subscriptions_campaign_banner_shadow_color:
     client: true
     type: color