Photo Gallery With Automatic Thumbnails Using React & Cloudinary

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:

Automatic quality and format optimizations to reduce image sizes for performance
Fill cropping to make sure all the images are the same size
Centering the cropped image on the subject using face detection in the gravity transformation
Resizing the width to 400px
Setting the aspect ratio to square (1:1)

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!