studio-variable/world-game
4
1
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

portfolio : fix gallery loading and optimize image sizes refs #59
All checks were successful
Deploy / Deploy to Production (push) Successful in 25s
Details

Browse source 
- Remove GalleryAnimation preloading (was downloading full-size originals
  via new Image(), causing 5MB+ redundant downloads on top of WebP srcset)
- Gallery now shows immediately, images load lazily via DOM
- Force eager loading on mockup img when slide becomes active (fixes
  first-project gallery never showing — lazy img off-screen on bg slide)
- Resize all direct ->url() calls to appropriate display dimensions:
  gallery src 600px, mockup src 960px, backgrounds 1920px,
  play lettering 500px, play preview 1000px, team photos 400px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-04-15 08:12:55 +02:00
parent 3d8d709165
commit 689ec3b138
5 changed files with 21 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

8
site/templates/portfolio.json.php
View file

@ -3,7 +3,7 @@
$defaultLang = kirby()->defaultLanguage()->code();
$specificData = [
'backgroundImage' => $page->backgroundImage()->toFile()?->url(),
'backgroundImage' => $page->backgroundImage()->toFile()?->resize(1920, null, 80)->url(),
'projects' => $page->children()->listed()->map(function($project) use ($defaultLang) {
$mockupFile = $project->content($defaultLang)->mockup()->toFile();
return [
@ -13,18 +13,18 @@ $specificData = [
'description' => $project->description()->value(),
'thumbnail' => $project->thumbnail()->toFile()?->resize(160, null, 80)->url(),
'imagesGallery' => $project->imagesGallery()->toFiles()->map(fn($f) => [
'src' => $f->url(),
'src' => $f->resize(600, null, 80)->url(),
'srcset' => $f->srcset('gallery'),
'webp' => $f->srcset('gallery-webp'),
])->values(),
'mockup' => $mockupFile?->url(),
'mockup' => $mockupFile?->resize(960, null, 80)->url(),
'mockupSrcset' => $mockupFile?->srcset('mockup'),
'mockupWebp' => $mockupFile?->srcset('mockup-webp'),
'galleryAnimationMode' => $project->galleryAnimationMode()->value() ?: 'vertical',
'mockupPosition' => $project->mockupPosition()->value() ?: 'center',
'secondsPerImage' => $project->secondsPerImage()->isNotEmpty() ? (int) $project->secondsPerImage()->value() : 8,
'galleryBackgroundColor' => $project->galleryBackgroundColor()->value(),
'galleryBackgroundImage' => $project->galleryBackgroundImage()->isNotEmpty() ? $project->galleryBackgroundImage()->toFile()->url() : null,
'galleryBackgroundImage' => $project->galleryBackgroundImage()->isNotEmpty() ? $project->galleryBackgroundImage()->toFile()->resize(1200, null, 80)->url() : null,
'keywords' => $project->keywords()->toStructure()->map(fn($i) => [
'label' => $i->label()->value(),
'text' => $i->text()->value(),