I have two collections:
Courses
and
Media
.
I have a field called "image" in
Courses
that relates to
Media
. How do I show the thumbnail while I select?
// Courses Collection
import { CollectionConfig } from "payload/types";
const Courses: CollectionConfig = {
slug: "courses",
admin: {
useAsTitle: "name",
},
access: {
read: () => true,
},
fields: [
{
name: "name",
type: "text",
},
{
name: "image",
type: "relationship",
relationTo: "media",
},
],
timestamps: false,
};
export default Courses;
// Media Collection
import path from "path";
import type { CollectionConfig } from "payload/types";
const Media: CollectionConfig = {
slug: "media",
upload: {
staticDir: path.resolve(__dirname, "../../media"),
// Specify the size name that you'd like to use as admin thumbnail
adminThumbnail: "thumbnail",
imageSizes: [
{
height: 400,
width: 400,
crop: "center",
name: "thumbnail",
},
{
width: 900,
height: 450,
crop: "center",
name: "sixteenByNineMedium",
},
],
},
fields: [
{
name: "alt",
type: "text",
},
],
};
export default Media;
You'll probably want to use the Upload field (
https://payloadcms.com/docs/fields/upload) instead of the Relationship one in this case.
Thanks for this! @tinouti !
Star
Discord
online
Get dedicated engineering support directly from the Payload team..