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

1
.gitignore vendored
View File

@@ -31,6 +31,7 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
server.log
# env files (can opt-in for committing if needed)
.env*

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}
/>

2
content/gallery.yaml.example
View File

@@ -18,6 +18,8 @@ subpages:
- "album-uuid-3"
- "album-uuid-4"
"Projects":
title: "My Creative Projects" # Optional: Header title, defaults to Navigation key ("Projects")
subtitle: "A collection of 2026 highlights in 35mm film." # Optional: Sub-text for headers
password: "your-password" # Optional protection
albums:
- "album-uuid-5"

6
lib/config/index.ts
View File

@@ -78,6 +78,8 @@ export function getConfig(): AppConfig {
return {
name: sp.name,
slug: slugify(sp.name),
title: sp.title,
subtitle: sp.subtitle,
albumIds: sp.albums.map((entry) => processAlbumEntry(entry, `subpage "${sp.name}"`)),
password: sp.password,
...(sp.grid ? {
@@ -95,12 +97,14 @@ export function getConfig(): AppConfig {
if (Array.isArray(value)) {
return { name, slug: slugify(name), albumIds: value.map((entry) => processAlbumEntry(entry, `subpage "${name}"`)) };
}
interface SubpageObjectValue { albums?: Array<string | Record<string, string>>; password?: string; grid?: { columns?: number; gap?: number; aspectRatio?: string; layout?: string; }; }
interface SubpageObjectValue { title?: string; subtitle?: string; albums?: Array<string | Record<string, string>>; password?: string; grid?: { columns?: number; gap?: number; aspectRatio?: string; layout?: string; }; }
const sp = value as SubpageObjectValue;
const albumEntries = sp.albums || [];
return {
name,
slug: slugify(name),
title: sp.title,
subtitle: sp.subtitle,
albumIds: albumEntries.map((entry) => processAlbumEntry(entry, `subpage "${name}"`)),
password: sp.password,
...(sp.grid ? {

4
lib/config/schema.ts
View File

@@ -1,6 +1,8 @@
export interface SubpageConfig {
name: string;
slug: string;
title?: string;
subtitle?: string;
albumIds: string[];
password?: string;
grid?: Partial<GridConfig>;
@@ -79,6 +81,8 @@ export interface GalleryYaml {
| Record<string, string[] | Array<string | Record<string, string>>>
| Array<{
name: string;
title?: string;
subtitle?: string;
albums: Array<string | Record<string, string>>;
password?: string;
grid?: {