PosterImage
Picks the poster for the reader’s language, or shows the title on a tint.
import { PosterImage } from '@iffday/web/src/kit';
import { Poster } from '@iffday/web/src/components';Which poster
A film often has dozens of posters. PosterImage picks in this order: the poster the festival entry chose, the main poster for the reader’s language (for Simplified Chinese readers zh-hans, zh-cn and zh-sg, then zh), the film’s main poster, and last the entry’s own posterUrl. Traditional Chinese readers are never shown a Simplified or zh poster.
import { PosterImage } from '@iffday/web/src/kit';
import { useSampleFilms } from '../../../samples';
export default function Example() {
const [first, second, third] = useSampleFilms();
return (
<>
<div style={{ width: 72 }}>
<PosterImage entry={first!} size="sm" />
</div>
<div style={{ width: 120 }}>
<PosterImage entry={second!} />
</div>
<div style={{ width: 180 }}>
<PosterImage entry={third!} size="lg" />
</div>
</>
);
}No poster
Without a poster, or when the image fails to load, a brand-colored panel shows the English title in its lower left corner. The entry ID picks the color, so a film always gets the same one. size only changes that title: 10px for sm and 15px otherwise. The poster is always 2:3 and as wide as its container.
import { PosterImage } from '@iffday/web/src/kit';
import { useSampleFilm } from '../../../samples';
export default function Example() {
const film = useSampleFilm(4);
const withoutArtwork = { ...film, posterUrl: null, posters: [], mainPosterId: null };
return (
<>
<div style={{ width: 120 }}>
<PosterImage entry={film} />
</div>
<div style={{ width: 120 }}>
<PosterImage entry={withoutArtwork} />
</div>
<div style={{ width: 72 }}>
<PosterImage entry={withoutArtwork} size="sm" />
</div>
</>
);
}Usage
- Posters live in R2 at addresses like
img.filmcdn.com/film-poster/…; images from other sites are never linked directly. bleedputs a copy scaled to 1.2 behind the poster, so a blur on the poster never shows the page at its edges.components.tsxstill has an olderPosterthat no page uses; new pages usePosterImage.
Props
PosterImage
apps/web/src/kit.tsx:102| Prop | Type | Default |
|---|---|---|
entry* | { id: string; title: string; titleEn?: string; posterUrl?: string | null } & FilmVisuals | |
size | 'sm' | 'md' | 'lg' | 'md' |
- src/kit.tsx2
- src/pages/editorial.tsx2
- src/pages/film-entry.tsx2
- src/pages/personal.tsx2
- src/pages/social.tsx2
- src/components.tsx1
- src/pages/community.tsx1
- src/pages/feed.tsx1
- src/pages/general-movie.tsx1
- src/pages/list-page.tsx1
- src/pages/profile.tsx1
- src/pages/schedule.tsx1
- src/pages/screening.tsx1
- src/pages/search.tsx1
| Prop | Type | Default |
|---|---|---|
entry* | Pick<Entry, 'id' | 'title' | 'titleEn' | 'originalTitle' | 'year' | 'posterUrl'> & FilmVisuals & { section?: string; } | |
large | boolean | false |
Not used directly in apps/web yet.