Relationship Select with Preview / Thumbnail

[carlcalderon]

In a large project with many collections and collection items it is difficult to find things in relationship fields that reference multiple large collections. The search in the select-element helps but for relations to collections with upload or relation to media, it would be great if you could define a field in the collections that you want to use as preview or thumbnail.

The only current option is to create your own custom Field component but that forces you to also implement all other features the built-in component already provides.

I suggest the following options to get the discussion started.

Option 1

// As single key-property for all related collection
fields: [
  {
    name: 'pets',
    type: 'relationship',
    hasMany: true,
    relationTo: ['dogs', 'cats', 'birds'],
    thumbnailField: 'picture'
  },
]

Option 2

// Individual key-value for each collection
fields: [
  {
    name: 'pets',
    type: 'relationship',
    hasMany: true,
    relationTo: [
      { collection: 'dogs', thumbnailField: 'picture' },
      { collection: 'cats', thumbnailField: 'picture' },
      { collection: 'birds', thumbnailField: 'picture' },
    ],
  },
]

Option 3

// Ability to define your own ReactSelect Option custom component
fields: [
  {
    name: 'pets',
    type: 'relationship',
    hasMany: true,
    relationTo: ['dogs', 'cats', 'birds'],
    admin: {
      components: {
        Option: '@/components/MyCustomSelectOption'
      }
    }
  },
]

Again, these suggestions are to get the discussion started. There are many things that would enhance this even further, such as the ability to define width and height of the thumbnail, and so on...