Seeking Knowledge
The first real image in the Photo Dojo.
Artifacts
Photo Dojo
The future home of the photo upload and gallery experiment. For now, real images mixed with placeholder tiles.
Later Today
The second real image in the Photo Dojo.
Taunting Temptation
The third real image in the Photo Dojo.
Training Notes
What building this project taught me.
next/image needs a positioned parent for fill mode
Using fill on an Image component requires the parent to have position: relative (or absolute/fixed) and an explicit size. The aspect-square utility with relative does the job cleanly for square tiles.
Public folder files are served from the root path
Files placed in apps/web/public/sample-photos/ are referenced in JSX as /sample-photos/filename.jpg — the public/ directory itself is not part of the URL.
object-cover keeps portrait and landscape photos from distorting
Without object-cover, fill images stretch to fill the box. Pairing fill + object-cover + a fixed-aspect-ratio parent gives consistent card sizes regardless of the original image dimensions.