Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Get help on Slack

Discussion of a bug with nested fields in the Image schema type in Sanity.io

19 replies
Last updated: Oct 17, 2022
Hi everyone!
We have noticed
another problem with the 
Image
schema type in Sanity. We have created an image with nested fields (with fields like “alternative text” and “image credits”). After re-uploading the image multiple times, the edit button which opens the modal with the nested fields is hidden (no error in the console). After refreshing the page button is back in its place. Have anyone experienced similar problems? Have you solved this issue?
Any help would be appreciated


Sanity version:
"@sanity/base": "^2.30.1",
Jul 20, 2022, 7:14 PM
Side notes: we use 
"sanity-plugin-media"
in our project, and also it’s worth to mention that this bug occurs in different document types/fields.
Jul 20, 2022, 7:18 PM
Hello 🥕! (🙃)Could you share the 
image
schema and one where you have nested the image into? 
Sanity-plugin-media
only helps you display your assets in your studio, it does not have any influence on the inline functions.
Jul 20, 2022, 9:09 PM
Hi,
thanks for the quick response. Here is the image schema (I wanted to keep it short so it’s the lighten version where bug occurs):
```
Jul 21, 2022, 5:05 AM
Hi,
thanks for the quick response. Here is the image schema (I wanted to keep it short so it’s the lightest version where the bug occurs):

{
  title: "Image test",
  name: "imagetest",
  type: "image",
  fields: [
    {
      title: "Alternative text",
      name: "alternativeText",
      type: "string",
      description: `Alt text for the image`,
    },
    {
      title: "Image Credit",
      name: "credit",
      type: "string",
    }
  ],
},
When I was recreating the bug, it was hard for me to find it in localhost, I had to deploy the version for my hosted studio. Maybe that could be a hint.
🙂
Jul 21, 2022, 5:08 AM
Lightest document schema:
export const Testtest = {
  name: "testtest",
  type: "document",
  title: "Test test",
  fields: [
    {
      title: "Image test",
      name: "imagetest",
      type: "image",
      fields: [
        {
          title: "Alternative text",
          name: "alternativeText",
          type: "string",
          description: `Alt text for the image`,
        },
        {
          title: "Image Credit",
          name: "credit",
          type: "string",
        }
      ],
    },
  ]
}
Jul 21, 2022, 5:18 AM
export const imageTest = {
  name: "imageTest",
  type: "object",
  title: "Test Image",
  fields: [
    {
      title: "Image Title",
      name: "imageTitle",
      type: "image",
      fields: [
        {
          title: "Alternative text",
          name: "altText",
          type: "string",
          description: `Alt text for the image`,
        },
        {
          title: "Image Credit",
          name: "credit",
          type: "string",
        }
      ],
    },
  ]
}
  fields: [
    {
      name: 'caption',
      type: 'string',
      title: 'Caption',
      options: {
        isHighlighted: true // <-- make this field easily accessible
      }
    },
    {
      // Editing this field will be hidden behind an "Edit"-button
      name: 'attribution',
      type: 'string',
      title: 'Attribution',
    }
  ]
export const Testtest = {
  name: "testtest",
  type: "document",
  title: "Test test",
  fields: [
    {
      title: "Image test",
      name: "imagetest",
      type: "image",
      fields: [
        {
          title: "Alternative text",
          name: "alternativeText",
          type: "string",
          description: `Alt text for the image`,
        },
        {
          title: "Image Credit",
          name: "credit",
          type: "string",
        }
      ],
    },
  ]
}

Jul 21, 2022, 7:19 AM
So you need to change / understand 2 things:• schemas are objects, not functions, so you need to use the right way to write and export them
🙂 See how I export the schemas? That’s the right way 😉 • Image options, which are these fields are not editable within the upload workflow (which is your browser doing the work) but with the button
✏️ which will also show you the hotspot options etc. Ylou can also make extra fields more accessible by adding a 
isHighlighted: true
and make your editors always fill them in by setting validations. Another Tipp: try to refractor your schemas for readability, especially if you want to reuse your schemas (this makes your code more scalable).


// imageTest.js 
export default {
    name: "imageTest",
    type: "image",
    title: "Test Image",
    fields: [
        {
            title: "Alternative text",
            name: "altText",
            type: "string",
            description: `Alt text for the image`,
            // try setting this 👇 to false and see what happens in your studio 😉
            options: {
                isHighlighted: true // <-- make this field easily accessible
            }
        },
        {
            title: "Image Credit",
            name: "credit",
            type: "string",
            // try setting this 👇 to false and see what happens in your studio 😉
            options: {
                isHighlighted: true // <-- make this field easily accessible
            }
        }
    ],
}


// testDoc.js
export default {
    name: "testDoc",
    type: "document",
    title: "Test Doc",
    fields: [
        {
            title: "Image test",
            name: "imageTest",
            type: "imageTest",
            options: {
                hotspot: true // <-- Defaults to false
            }
        },
    ]
}
Hope that helps!
(pics: one with highlighted and one without highlighted fields -&gt; without makes them editable from a modal….)
Jul 21, 2022, 7:43 AM
Thanks for the response, I think that your recommendations are not answering my problem. Now I realised that I have prepared test schema for you without the
options: {
   isHighlighted: true
}
but of course my production image has it on the fields (as seen on the attached video).
• According to the 1 dot: Is there any difference between 
export default { ... }
from 
export const Testtest = {}
apart from the way how it is imported in other files? I don’t quite get why my approach is bad here.• According to the 2 dot: 
options are not editable within the upload workflow (which is your browser doing the work) but with the button
. I know that image fields marked as highlighted can be modified in modal after clicking the pencil button. My problem described in this thread is that this button is not visible after multiple re-uploads of the image (same as the three dots button)
Jul 21, 2022, 8:01 AM
Thanks for the response, I think that your recommendations are not answering my problem. I have prepared test schema for you without the
options: {
   isHighlighted: true
}
because I would like to have these fields a bit more hidden (as seen on the attached video).
• According to the 1 dot: Is there any difference between 
export default { ... }
from 
export const Testtest = { ... }
apart from the way how it is imported in other files? I don’t quite get why my approach is bad here.• According to the 2 dot: 
options are not editable within the upload workflow (which is your browser doing the work) but with the button
. I know that image nested fields (not highlighted) can be modified in modal after clicking the pencil button. My problem described in this thread is that this button is not visible after multiple re-uploads of the image (same as the three dots button)
Jul 21, 2022, 8:08 AM
Ah now I understand your issue and I can reproduce. I will investigate.(a small tipp: a 1 sentence summary at the top of your 1. message and posting your code in the thread, helps us understand the questions better
🙂 )
When it comes to writing code i would stick to a certain convention, although the other way might work …
Jul 21, 2022, 8:32 AM
I have reported the bug, but no idea, when this will be fixed… until now, you can also try uploading assets in bulk through the media plugin, our HTTP API for assets or with the cli
PS: I will now mark it as resolved, because we do not track issues in the help channel
🙂
Jul 21, 2022, 12:55 PM
Thanks for your help :)
Jul 21, 2022, 1:14 PM
Hi
user J
, is there any progress with the fix for this bug? 🙂 If not, can I get a Github issue/ticket for it to track it?
Aug 29, 2022, 9:41 AM
Friendly reminder
user J
Sep 5, 2022, 9:36 AM
I will have a look now I am back 😊
Sep 8, 2022, 7:11 AM
Hi
user J
, do you know have someone looked into this problem? 🙂
Sep 22, 2022, 8:30 AM
We have! Can you please upgrade your studio to v2.34.2 🙂
Oct 17, 2022, 12:39 PM
(Sorry for the late reply, I was OOO)
Oct 17, 2022, 12:39 PM
Thanks for the response! I will let you know after the update 🙂
Oct 17, 2022, 12:53 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?