By William Imoh
Building responsive web apps involves the cumbersome task of adding media queries in CSS.
Thanks to the rapid advancements in CSS and CSS-in-JS libraries, web responsiveness is only a few lines of code away.
This three-part series explains how to use the React component gatsby-image to create a responsive banner-and-grid gallery with remote, optimized images sourced from Cloudinary. Specifically:
- Part 1 explains how to build an optimized webpage by leveraging Cloudinary’s gatsby-transformer-cloudinary plugin and gatsby-image, sourcing and transforming responsive remote images in a GatsbyJS project.
- Part 2 describes how to source images from Cloudinary into gatsby-image by means of the getFluidImageObject and getFixedImageObject APIs?