feat: set org landing page background (#471)

* landing page background settings * translations * worrked on the reviews --------- Co-authored-by: Rotimi Best <[email protected]>
2024-10-05 23:33:09 +01:00
parent 8298a621ea
commit 1ee02cdf3a
11 changed files with 110 additions and 11 deletions
@@ -147,6 +147,21 @@
    }
  }

+  function getBgImage(settings) {
+    const { show, image } = settings.header.background || {
+      show: true,
+      image: '/images/org-landingpage-banner.jpeg'
+    };
+
+    if (!show) {
+      return undefined;
+    }
+
+    if (image) {
+      return `url('${image}')`;
+    }
+  }
+
  $: initPlyr(player, $landingPageSettings.header?.banner?.video);
  $: setDefault(org?.landingpage);
 </script>
@@ -165,7 +180,15 @@
  <main>
    <!-- Header Section -->
    {#if $landingPageSettings.header.show}
-      <header id="header" class="banner w-full h-[100vh] md:h-[90vh] mb-10 relative">
+      <header
+        id="header"
+        class={`w-full h-[100vh] md:h-[90vh] mb-10 relative ${
+          $landingPageSettings.header.background.show
+            ? 'bg-cover bg-center'
+            : 'border-b border-gray-300'
+        }`}
+        style="background-image: {getBgImage($landingPageSettings)}"
+      >
        <Navigation
          logo={org.avatar_url}
          orgName={org.name}
@@ -585,13 +608,3 @@
    {/if}
  </main>
 {/if}
-
-<style>
-  .banner {
-    background: url('/images/org-landingpage-banner.jpeg') no-repeat center center fixed;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-  }
-</style>
@@ -109,6 +109,10 @@
        landingpage.header.banner = $landingPageSettings.header.banner;
      }

+      if (!landingpage?.header?.background) {
+        landingpage.header.background = $landingPageSettings.header.background;
+      }
+
      $landingPageSettings = {
        ...landingpage
      };
@@ -218,6 +222,39 @@
      {#if $handleOpenWidget.open && widgetKey === 'banner'}
        <UploadWidget bind:imageURL={$landingPageSettings.header.banner.image} />
      {/if}
+
+      <!-- background -->
+
+      <div class="mt-4">
+        <p class="font-bold mb-4">{$t('settings.landing_page.background.title')}</p>
+        <PrimaryButton
+          variant={VARIANTS.OUTLINED}
+          label={$t('settings.landing_page.about.select_image')}
+          className="mt-3"
+          onClick={() => widgetControl('background')}
+        />
+
+        {#if $landingPageSettings.header.background?.image}
+          <img
+            alt="backgroundImage"
+            src={$landingPageSettings.header.background.image}
+            class="mt-2 rounded-md w-full"
+          />
+        {/if}
+
+        <Toggle bind:toggled={$landingPageSettings.header.background.show} size="sm">
+          <span slot="labelA" style="color: gray"
+            >{$t('settings.landing_page.background.hide_background')}</span
+          >
+          <span slot="labelB" style="color: gray"
+            >{$t('settings.landing_page.background.show_background')}</span
+          >
+        </Toggle>
+
+        {#if $handleOpenWidget.open && widgetKey === 'background'}
+          <UploadWidget bind:imageURL={$landingPageSettings.header.background.image} />
+        {/if}
+      </div>
    </Column>
  </Row>

@@ -17,6 +17,10 @@ export interface OrgLandingPageJson {
      type: string;
      show: boolean;
    };
+    background?: {
+      image: string;
+      show: boolean;
+    };
    show: boolean;
  };
  aboutUs: {
@@ -81,6 +85,10 @@ export const landingPageSettings: Writable<OrgLandingPageJson> = writable({
      type: 'video',
      show: true
    },
+    background: {
+      image: '',
+      show: true
+    },
    show: true
  },
  aboutUs: {
@@ -1218,6 +1218,11 @@
          "video": "Video",
          "image": "Bild"
        }
+      },
+      "background": {
+        "title": "Hintergrundbild",
+        "show_background": "Hintergrund anzeigen",
+        "hide_background": "Hintergrund ausblenden"
      }
    },
    "organization": {
@@ -128,6 +128,11 @@
      "title": "Title",
      "title_highlight": "Title-Highlight",
      "subtitle": "Subtitle",
+      "background": {
+        "title": "Background Image",
+        "show_background": "Show background",
+        "hide_background": "Hide background"
+      },
      "actions": {
        "heading": "Actions",
        "label": "Label",
@@ -139,6 +144,7 @@
          "video": "Video",
          "image": "Image"
        },
+
        "show_banner": "Show banner",
        "hide_banner": "Hide banner"
      },
@@ -1218,6 +1218,11 @@
          "video": "Video",
          "image": "Imagen"
        }
+      },
+      "background": {
+        "title": "Imagen de fondo",
+        "show_background": "Mostrar fondo",
+        "hide_background": "Ocultar fondo"
      }
    },
    "organization": {
@@ -1218,6 +1218,11 @@
          "video": "Vidéo",
          "image": "Image"
        }
+      },
+      "background": {
+        "title": "Image d'arrière-plan",
+        "show_background": "Afficher l'arrière-plan",
+        "hide_background": "Masquer l'arrière-plan"
      }
    },
    "organization": {
@@ -1218,6 +1218,11 @@
          "video": "वीडियो",
          "image": "छवि"
        }
+      },
+      "background": {
+        "title": "पृष्ठभूमि छवि",
+        "show_background": "पृष्ठभूमि दिखाएँ",
+        "hide_background": "पृष्ठभूमि छिपाएँ"
      }
    },
    "organization": {
@@ -1218,6 +1218,11 @@
          "video": "Vídeo",
          "image": "Imagem"
        }
+      },
+      "background": {
+        "title": "Imagem de fundo",
+        "show_background": "Mostrar plano de fundo",
+        "hide_background": "Ocultar plano de fundo"
      }
    },
    "organization": {
@@ -1218,6 +1218,11 @@
          "video": "видео",
          "image": "Изображение"
        }
+      },
+      "background": {
+        "title": "Фоновое изображение",
+        "show_background": "Показать фон",
+        "hide_background": "Скрыть фон"
      }
    },
    "organization": {
@@ -1218,6 +1218,11 @@
          "video": "Băng hình",
          "image": "Hình ảnh"
        }
+      },
+      "background": {
+        "title": "Hình nền",
+        "show_background": "Hiển thị nền",
+        "hide_background": "Ẩn nền"
      }
    },
    "organization": {