Net Gala: Netlify Img Transforms

#netlifychallenge #devchallenge #webdev #javascript

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

It's more of a snack than a feast, but I made a gallery app to recreate pieces of a couple of sites I found on awwwards. It's got nice transitions, has a monochromatic feel and takes advantage of Netlify's Image CDN and it's transforms feature.

Demo

Give it a try: Link ✨
Here's the Code💻

Platform Primitives

I used the CDN for fetching and transforming images in my NextJS app, it also provides some amazing cache out of the box. Using the custom loader prop in the next/image component, I was able to apply the following transforms:

Sizing
Object Fit
Format
Quality

Here's a snippet of the loader:

  const loadImage = (args: ImageLoaderProps) => {
    const { src } = args;

    return `.netlify/images?url=${src}&w=${transforms.width}&h=${transforms.height}&q=${transforms.quality}&fit=${transforms.fit}&fm=${transforms.format}`;
  };

And here's the UI implementation:

Generally, when using NextJS 13.5+ with Netlify, you don't need a custom loader, the cdn works by default with next/image but I needed the loader for some of the transforms and flexibility in rendering. Thanks @hrishikeshk for pointing that out.

Conclusion

It was a fun experience building this, I got the chance to implement some nice designs and transitions, play around with CSS and try out a new component library. I'm also really delighted with how the bottom section turned out: