Add an image field to a collection schema in Keystatic
In this lesson, you'll add an image field to our authors collection. You'll learn how you can customize where to store the image, and how to construct the publicPath to reference that image in your front end.
Instructor: [0:00] Authors Collection currently just has a name field. Let's add an image field to that as well. Here's our Authors Collection, and so in the schema, we're going to add an avatar, which is fields.image, and we'll give our image a label of avatar.
[0:17] That's technically all that's needed to have an image working, so let's take a look. In my Authors' entry form, I now have an avatar field, so let's pick an image, and we're going to select this little cool basketball player and hit save.
[0:31] Let's take a look at what happens to our file system. If I go to content and Authors, you can see that we have Jed and Simon. Simon is now pointing to an avatar.png file, and there's a directory matching this slug, Simon, and inside of there, the avatar.png file has been saved.
[0:50] That's the default behavior for an image file. If nothing is specified, it will name the file after the field name, and place it inside a directory that matches the slug of the entry.
[1:02] In this case, we want to make things a little bit simpler for us to display the image on the front end, and since we are in the Next.js project, that'll be nice to output the image in the public directory, so we can directly reference the path to this image in our templates.
[1:17] Alongside the label, we are also going to specify a directory property, and this directory property lets you output the image wherever you want, regardless of where the entry itself is stored based on the path. If I want the images to go in public, I can do this, public/images/avatars. Thanks, Copilot.
[1:41] This will break the ability for Keystatic to find this image here, and as a result, we don't have any file in the avatar selection here, but if I re-upload the same file, and hit save, it has created a public directory with inside images, avatar, and then Simon, and inside of there, put the avatar.png file.
[2:05] Instead of storing it collocated with the Authors' content, it's put in a different place. This makes it easier to use images in the Next.js front end, but when referencing files in the public directory Next.js, you do not mention the public segment, you basically start your path like that.
[2:24] The other thing we can do to make things better is use the public path property, which is, as its name suggests, how you would like to construct the public path for a file, regardless of where it's stored. Here, we want our path to be /images/avatars.
[2:43] If I check what we have in our Simon.json entry, we're still pointing to just avatar.png, but let's one more time upload the image with our new public path setting, and see what happens when we save.
[2:58] You can see that now the public path has been generated exactly like we've defined it in public path, and our image is still present here inside public images, avatar, slug, avatar.png.
[3:11] I'm going to delete this file that is no longer relevant, and thanks to the directory and public path options, we were able to make a setup that will make it much easier for us to display images in our Next.js application when we do so.