From 4639935eb8a1f19889582ef78929b475d1d3ede8 Mon Sep 17 00:00:00 2001 From: DrMint <29893320+DrMint@users.noreply.github.com> Date: Mon, 11 Mar 2024 23:53:53 +0100 Subject: [PATCH] Show more of the background images --- src/components/AppLayout/AppEmptyLayout.astro | 8 +-- src/components/AppLayout/AppLayout.astro | 7 ++- .../components/AppLayoutBackgroundImg.astro | 48 +++++++++------- src/pages/[locale]/collectibles/[slug].astro | 2 +- src/pages/[locale]/index.astro | 55 +++++++++++-------- src/pages/[locale]/pages/[slug].astro | 2 +- src/shared/payload/payload-sdk.ts | 1 + 7 files changed, 70 insertions(+), 53 deletions(-) diff --git a/src/components/AppLayout/AppEmptyLayout.astro b/src/components/AppLayout/AppEmptyLayout.astro index 4d90f1f..83378a9 100644 --- a/src/components/AppLayout/AppEmptyLayout.astro +++ b/src/components/AppLayout/AppEmptyLayout.astro @@ -2,7 +2,7 @@ import Html from "./components/Html.astro"; import Topbar from "./components/Topbar/Topbar.astro"; import Footer from "./components/Footer.astro"; -import type { ParentPage } from "src/shared/payload/payload-sdk"; +import type { ParentPage, PayloadImage } from "src/shared/payload/payload-sdk"; import AppLayoutBackgroundImg from "./components/AppLayoutBackgroundImg.astro"; import type { ComponentProps } from "astro/types"; @@ -10,17 +10,17 @@ interface Props { openGraph?: ComponentProps["openGraph"]; parentPages?: ParentPage[]; hideFooterLinks?: boolean; - backgroundIllustration?: string | undefined; + backgroundImage?: PayloadImage | undefined; } -const { openGraph, hideFooterLinks = false, parentPages, backgroundIllustration } = Astro.props; +const { openGraph, hideFooterLinks = false, parentPages, backgroundImage } = Astro.props; --- {/* ------------------------------------------- HTML ------------------------------------------- */}
- {backgroundIllustration && } + {backgroundImage && }
diff --git a/src/components/AppLayout/AppLayout.astro b/src/components/AppLayout/AppLayout.astro index e2b5d8f..e56f123 100644 --- a/src/components/AppLayout/AppLayout.astro +++ b/src/components/AppLayout/AppLayout.astro @@ -5,6 +5,7 @@ import Topbar from "./components/Topbar/Topbar.astro"; import Footer from "./components/Footer.astro"; import AppLayoutTitle from "./components/AppLayoutTitle.astro"; import type { ComponentProps } from "astro/types"; +import type { PayloadImage } from "src/shared/payload/payload-sdk"; interface Props { openGraph?: ComponentProps["openGraph"]; @@ -16,7 +17,7 @@ interface Props { illustration?: string; illustrationSize?: string; illustrationPosition?: string; - backgroundIllustration?: string | undefined; + backgroundImage?: PayloadImage | undefined; hideFooterLinks?: boolean; hideHomeButton?: boolean; } @@ -28,7 +29,7 @@ const { pretitle, description, illustration, - backgroundIllustration, + backgroundImage, parentPages, illustrationSize = "contain", illustrationPosition = "center", @@ -41,7 +42,7 @@ const {
- {backgroundIllustration && } + {backgroundImage && } { diff --git a/src/components/AppLayout/components/AppLayoutBackgroundImg.astro b/src/components/AppLayout/components/AppLayoutBackgroundImg.astro index a6d0a16..06955da 100644 --- a/src/components/AppLayout/components/AppLayoutBackgroundImg.astro +++ b/src/components/AppLayout/components/AppLayoutBackgroundImg.astro @@ -1,24 +1,34 @@ --- +import type { PayloadImage } from "src/shared/payload/payload-sdk"; import { getRandomId } from "src/utils/random"; interface Props { - src: string; - alt?: string; - id?: string; - class?: string; + img: PayloadImage; } -const { src, alt } = Astro.props; +const { + img: { url, width, height }, +} = Astro.props; const uniqueId = getRandomId(); + +const style = ` +@media (max-aspect-ratio: ${width}/${height}) { + #${uniqueId} { + mask-image: linear-gradient( to bottom, rgba(0 0 0 / 30%) 0%, transparent 100% ); + } +} +`; --- {/* ------------------------------------------- HTML ------------------------------------------- */} -{alt} -{alt} + + {/* ------------------------------------------- CSS -------------------------------------------- */} + +