A directory of images can become a gallery's content source. In Velvet Gallery, Gatsby's file graph supplies the bridge between source files and responsive image rendering.
Register the source directory#
The Gatsby configuration uses the filesystem source plugin for the project's image directory. That creates file nodes which other processing plugins and GraphQL queries can use.
The source name matters because the gallery query filters file nodes to the images source. Without that boundary, the query could also encounter unrelated files from other registered directories.
Request the processed image data#
The gallery asks each file for its child image data, with a width of 400, a blurred placeholder, and automatic, WebP, and AVIF formats.
Those options describe the generated image pipeline. They do not themselves establish a measured page-speed score, and the actual transfer depends on the generated output and requesting browser.
Render through the image component#
The page uses getImage and GatsbyImage rather than manually choosing one image file for every display size. The gallery grid uses auto-fill columns with a minimum width of 200 pixels.
Image processing and grid layout address different concerns: one prepares media variants, while the other decides how the available space holds the gallery items.
Add editorial metadata when filenames stop being enough#
The current page uses filenames as alternative text. That gives the component a value, but a filename can be an unhelpful description of the artwork.
A future content model could pair each source file with an authored title and alternative description. That would preserve the build pipeline while improving the information attached to the image. This is a proposed improvement to the gallery project, rather than a change made by publishing its portfolio article.