How can I show the thumbnail in a relationTo: "media" field?

default discord avatar
blankeos
10 months ago
2

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;
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.