Improve ad display by hiding empty ad slots

Fixes the "black spots" issue by ensuring that ad components are hidden when they fail to load, preventing visual clutter in the development environment. Updates are also made to gallery image URLs.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 5ba6db93-b599-4f97-9ded-f81b616eb41d
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/V5dWXpq
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-05 12:04:57 +00:00
parent 69a7514ca0
commit 16cef1a33e
2 changed files with 546 additions and 538 deletions

View File

@ -82,40 +82,48 @@ let adSeedCounter = 1;
export function ArticleCardAd() { export function ArticleCardAd() {
const seed = useMemo(() => adSeedCounter++, []); const seed = useMemo(() => adSeedCounter++, []);
const [filled, setFilled] = useState(false);
return ( return (
<ArtistPatternBg className="rounded-md border border-card-border h-full bg-card" seed={seed}> <div className={filled ? "" : "hidden"}>
<AdSense <ArtistPatternBg className="rounded-md border border-card-border h-full bg-card" seed={seed}>
slot="3854634730" <AdSense
format="fluid" slot="3854634730"
layoutKey="-6r+cy-10+8a-3" format="fluid"
style={{ display: "block" }} layoutKey="-6r+cy-10+8a-3"
/> style={{ display: "block" }}
</ArtistPatternBg> onAdStatus={(f) => setFilled(f)}
/>
</ArtistPatternBg>
</div>
); );
} }
export function InArticleAd() { export function InArticleAd() {
const [filled, setFilled] = useState(false);
return ( return (
<div className="my-8 py-4 border-y border-border/30"> <div className={filled ? "my-8 py-4 border-y border-border/30" : "hidden"}>
<div className="text-[10px] text-muted-foreground/40 text-center mb-2 uppercase tracking-widest">Anzeige</div> <div className="text-[10px] text-muted-foreground/40 text-center mb-2 uppercase tracking-widest">Anzeige</div>
<AdSense <AdSense
slot="4154017639" slot="4154017639"
format="fluid" format="fluid"
layout="in-article" layout="in-article"
style={{ display: "block", textAlign: "center" }} style={{ display: "block", textAlign: "center" }}
onAdStatus={(f) => setFilled(f)}
/> />
</div> </div>
); );
} }
export function MultiplexAd() { export function MultiplexAd() {
const [filled, setFilled] = useState(false);
return ( return (
<div className="bg-card rounded-md border border-card-border overflow-hidden"> <div className={filled ? "bg-card rounded-md border border-card-border overflow-hidden" : "hidden"}>
<AdSense <AdSense
slot="4593001335" slot="4593001335"
format="autorelaxed" format="autorelaxed"
style={{ display: "block" }} style={{ display: "block" }}
className="w-full min-h-[250px]" className="w-full min-h-[250px]"
onAdStatus={(f) => setFilled(f)}
/> />
</div> </div>
); );

File diff suppressed because it is too large Load Diff