Photo Gallery With Automatic Thumbnails Using React & Cloudinary

Jason Lengstorf

Generating thumbnails for a photo gallery can feel tedious if you have to do it all by hand. With Cloudinary, we can automatically generate thumbnails from our full-size images that focus in on faces. In this tutorial, we’ll learn how to automatically generate both full-sized and thumbnail images for a React-powered photo gallery.

Upload your assets to Cloudinary.

First, we need to get all of our images uploaded to Cloudinary. The fastest way to do this is using the Cloudinary console.

For this tutorial, we’ll use four images:

With these photos uploaded, we can create a photo gallery in React!

Create a function to generate Cloudinary URLs

To display images, we’ll need to generate Cloudinary URLs for both full-size and thumbnail images. Since this will be essentially the same except for the transformations we apply, let’s write a utility function to avoid duplicating our code.

1function getImageUrl({ cloudName, publicId, transformations }) {
2 return `https://res.cloudinary.com/${cloudName}/image/upload/${transformations}/${publicId}.jpg`;
3}

This function accepts a config object with three properties: cloudName, publicId, and transformations.

The cloudName should contain our Cloudinary cloud name, which is displayed at the top-right of the console.

The publicId will contain the public ID of the image to display. For example, if we wanted to show one of our images listed above, we could pass in mediajams/tokyo.

Finally, the transformations will contain a string of image transformations that allow us to do things including resizing and cropping the image. This is what makes automatic thumbnail creation possible!

Create a React component to display full-size images

Using the getImageUrl() utility, we can define a React component to display our full-size images.

1function Image({ cloudName, publicId, alt }) {
2 const imageSource = getImageUrl({
3 cloudName,
4 publicId,
5 transformations: "q_auto,f_auto,c_fill,g_face,w_400,ar_1"
6 });
7
8 return <img src={imageSource} alt={alt} />;
9}

This applies the following transformations:

The result will be an optimized, square image, 400px wide, with the subject’s face centered in the cropped image.

Create a React component to display a thumbnail image

To display thumbnails, we can use almost exactly the same setup as the Image component, but we make a couple small adjustments to the transformations:

1function Thumb({ cloudName, publicId, alt }) {
2 const imageSource = getImageUrl({
3 cloudName,
4 publicId,
5 transformations: "q_auto,f_auto,c_thumb,g_face,w_50,ar_1"
6 });
7
8 // add the full URL to a standard HTML5 video element
9 return <img src={imageSource} alt={alt} />;
10}

We resize to 50px and switch over to thumb cropping, which will zoom in on the face found in the photo for a more interesting thumbnail.

Bring it all together to create a React-powered photo gallery

Now that we can generate both images and thumbnails, we can combine them to create a photo gallery!

First, we set up an array with our image data:

1const photoArray = [
2 { publicId: "mediajams/tokyo", alt: "Jason on a train platform in Tokyo" },
3 {
4 publicId: "mediajams/react-india",
5 alt: "Jason talking to someone at React India"
6 },
7 { publicId: "mediajams/puppies", alt: "Jason holding two puppies" },
8 {
9 publicId: "mediajams/barcelona",
10 alt: "Jason walking along an alley in Barcelona"
11 }
12];

Then, we can create a component to display them!

1function App() {
2 const [selected, setSelected] = React.useState(photoArray[0]);
3
4 return (
5 <main>
6 <h1>Photo Gallery With Automatic Thumbnails Using React & Cloudinary</h1>
7 <div className="gallery">
8 <Image
9 cloudName="jlengstorf"
10 publicId={selected.publicId}
11 alt={selected.alt}
12 />
13 <nav className="thumbnails">
14 {photoArray.map((photo) => (
15 <button
16 onClick={() => setSelected(photo)}
17 className={selected.publicId === photo.publicId ? "selected" : ""}
18 >
19 <Thumb
20 cloudName="jlengstorf"
21 publicId={photo.publicId}
22 alt={photo.alt}
23 />
24 </button>
25 ))}
26 </nav>
27 </div>
28 </main>
29 );
30}

With React state, we can keep track of which image is selected, and use that to set the full-size image.

For each image, we want to create a thumbnail wrapped in a button so we can change which image is displayed full size. On click, we call the setSelected function to update the currently selected image.

Once this is rendered on the page, we can see a fully functional image gallery with auto-generated, interesting thumbnails!

Jason Lengstorf

VP of Developer Experience at Netlify

Jason Lengstorf the VP of Developer Experience at Netlify, where he works to improve the experience of building and deploying to the modern web. He also hosts Learn With Jason, a live-streamed video show where he pair programs to learn something new in 90 minutes. He spends a lot of time telling people that the formula for success and happiness is to lift each other up and share what we learn. He is trying his very best to follow his own advice. He lives in Portland, Oregon.