audacity/audacity.github.io
1
0
Fork 0
mirror of https://github.com/audacity/audacity.github.io.git synced 2026-04-18 21:50:00 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Optimise audiodotcom block bg image

Browse Source
This commit is contained in:
Dilson's Pickles
2025-03-25 14:08:38 +11:00
parent 569b54494e
commit 4648d2e291
1 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/homepage/Audiodotcom.astro
View File

@@ -1,10 +1,20 @@
---
import { getImage, Image } from "astro:assets";
import { getImage } from "astro:assets";
import audiocomBackground from "../../assets/img/audiocom-background.webp";
import { Image } from "astro:assets";
import FeaturedVideo from "../video/FeaturedVideo";
import JoinAudioDotComButton from "../button/JoinAudioDotComButton";
import AudioDotComLogo from "../../assets/img/audio-dot-com.svg";
import VideoPlaceholder from '../../assets/img/audiocom-placeholder.webp'
// Optimize the background image
const optimizedBg = await getImage({
src: audiocomBackground,
format: "webp",
width: 1920, // Default size, you can adjust based on your needs
quality: 80,
});
const releaseVideoPlaceholderImage = await getImage({
src: VideoPlaceholder,
format: "webp",
@@ -20,7 +30,8 @@ const releaseVideo = {
};
---
<section class="bg-[url('../assets/img/audiocom-background.webp')] bg-cover">
<!-- Apply the background using inline style -->
<section style={`background-image: url('${optimizedBg.src}'); background-size: cover;`}>
<div
class="grid md:grid-cols-2 max-w-screen-xl px-6 sm:px-12 py-12 gap-8 mx-auto"
>
@@ -34,7 +45,7 @@ const releaseVideo = {
matomoEventName={releaseVideo.title}
/>
</div>
<div class="col-span-2 md:col-span-1 md:col-start-2 md:row-start-1 flex flex-col gap-8 lg:py-12">
<div class="col-span-2 md:col-span-1 md:col-start-2 md:row-start-1 flex flex-col gap-8 lg:py-12">
<Image src={AudioDotComLogo} class="w-20" alt="audio.com" />
<div>
<h2 class="text-white">Level up your Audacity</h2>
@@ -46,8 +57,8 @@ const releaseVideo = {
</div>
<JoinAudioDotComButton
href=" https://audio.com/audacity/auth/sign-in?mtm_campaign=audacityteamorg&mtm_content=Block_button"
href="https://audio.com/audacity/auth/sign-in?mtm_campaign=audacityteamorg&mtm_content=Block_button"
/>
</div>
</div>
</section>
</section>