Get preview with image in the Relation Widget Select Dropdown

Netlify CMS
1

Hi Folks,

I’m the process of building a website for a photographer, which includes a simple shop.
I have a product collection, which is basically, a title, a image, description and a price:

- name: "product"
    label: "Product"
    folder: "content/product"
    media_folder: "/assets/images/product"
    public_folder: "/images/product"
    create: true
    fields:
      - { label: "ID", hint: "This is the internal ID used with Snipcart", name: "id", widget: "uuid" }
      - { label: "Layout", name: "layout", widget: "hidden", default: "product" }
      - { label: "Title", name: "title", required: true, widget: "string" }
      - { label: "Description", name: "description", required: false, widget: "text" }
      - { label: "Price", hint: "Don't use more than 2 digits after the comma", name: "price", required: true, widget: "number", value_type: "float", min: 0.0 }
      - { label: "Image", name: "image_url", required: true, widget: "image", allow_multiple: false }
      - { label: "Category", name: "category", required: true, widget: "relation", collection: "category", search_fields: ["title"], value_field: "category/{{filename}}.{{extension}}", display_fields: ["title"] }

I also have a “featured” section, where I showcase 4 of these products. For this I use the relation widget.

- name: "featured"
        label: "Favourites"
        file: "data/featured.yaml"
        media_folder: "/assets/images/product"
        public_folder: "/images/product"
        fields:
          - { label: "Title", name: "text", widget: "string", required: true }
          - { label: "Products", name: "items", required: true, widget: "relation", multiple: true, collection: "product", search_fields: ["title"], value_field: "product/{{filename}}.{{extension}}", display_fields: ["{{title}}"] }

My problem is now, in the dropdown of the relation widget I can only see text, which in this case is not really helpful, since the enduser would have a difficult time knowing the product just from the title or the image file name. I would prefer to be able to show an image for the element, along with the text:

image
image1061×432 18.8 KB

Is this perhaps possible ? Or do I have to create a custom widget for this ?
At first I thought a custom preview template could be used for this, but it seems I misunderstood that.

2

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!