Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

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

default discord avatar
blankeoslast year
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;
Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team..