Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: allow subpages to override title and add subtitle in gallery.yaml

Browse Source
This commit is contained in:
ralksta
2026-03-08 22:46:27 +01:00
parent 88f03fe2ce
commit 32bb6cb2ca
6 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
app/[...path]/SubpageGridView.tsx
View File

@@ -17,46 +17,56 @@ interface Placeholder {
interface SubpageGridViewProps {
slug: string;
title?: string;
subtitle?: string;
albums: SubpageAlbum[];
coverPlaceholders: (Placeholder | null)[];
}
export function SubpageGridView({ slug, albums, coverPlaceholders }: SubpageGridViewProps) {
export function SubpageGridView({ slug, title, subtitle, albums, coverPlaceholders }: SubpageGridViewProps) {
return (
<div className="subpage-grid">
{albums.map((album, i) => {
const ph = coverPlaceholders[i];
return (
<Link
key={album.id}
href={`/${slug}/${album.slug}`}
className="subpage-grid__item"
style={ph?.dominantColor ? { backgroundColor: ph.dominantColor } : undefined}
>
{album.albumThumbnailAssetId ? (
<Image
src={imageUrl(album.albumThumbnailAssetId, 'preview')}
alt={album.albumName}
fill
sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
loading="lazy"
{...(ph ? { placeholder: 'blur' as const, blurDataURL: ph.blurDataURL } : {})}
/>
) : (
<div className="skeleton" style={{ width: '100%', height: '100%' }} />
)}
<span className="subpage-grid__item-badge">
{album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
</span>
<div className="subpage-grid__item-overlay">
<span className="subpage-grid__item-title">{album.albumName}</span>
<span className="subpage-grid__item-count">
<div className="subpage-container">
{(title || subtitle) && (
<header className="subpage-header">
{title && <h1 className="subpage-title">{title}</h1>}
{subtitle && <p className="subpage-subtitle">{subtitle}</p>}
</header>
)}
<div className="subpage-grid">
{albums.map((album, i) => {
const ph = coverPlaceholders[i];
return (
<Link
key={album.id}
href={`/${slug}/${album.slug}`}
className="subpage-grid__item"
style={ph?.dominantColor ? { backgroundColor: ph.dominantColor } : undefined}
>
{album.albumThumbnailAssetId ? (
<Image
src={imageUrl(album.albumThumbnailAssetId, 'preview')}
alt={album.albumName}
fill
sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
loading="lazy"
{...(ph ? { placeholder: 'blur' as const, blurDataURL: ph.blurDataURL } : {})}
/>
) : (
<div className="skeleton" style={{ width: '100%', height: '100%' }} />
)}
<span className="subpage-grid__item-badge">
{album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
</span>
</div>
</Link>
);
})}
<div className="subpage-grid__item-overlay">
<span className="subpage-grid__item-title">{album.albumName}</span>
<span className="subpage-grid__item-count">
{album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
</span>
</div>
</Link>
);
})}
</div>
</div>
);
}

2
app/[...path]/page.tsx
View File

@@ -222,6 +222,8 @@ export default async function PathPage({ params }: PathPageProps) {
return (
<SubpageGridView
slug={slug}
title={result.subpage.title || result.subpage.name}
subtitle={result.subpage.subtitle}
albums={albums}
coverPlaceholders={coverPlaceholders}
/>