How to display image filename in Sanity.io with fields and preview
10 replies
Last updated: Sep 5, 2022
M
When using
imagewith
fieldsthe filename gets removed and says "Untitled". Without the
fieldsthe filename is shown. How can I bring it back when using
fields?
Sep 3, 2022, 5:58 PM
It sounds like you’ll want to set up a preview to tell the Studio what should be your title.
Sep 3, 2022, 6:00 PM
M
I see! But I would need to first declare something like a title field for this, right? Or is there a way to use the OG filename (standard behaviour)? Without any additional fields it does work.
Sep 3, 2022, 8:49 PM
You won't need to set a
titlefield, but you need to select the field you want as a title in your
preview. Something like this should be sufficient (setting the right-side to the field you want):
preview: {
select: {
title: ‘asset.url’
}
}Sep 3, 2022, 9:58 PM
M
That only works if I have a field to set it to! I want it to revert to the default behaviour and use the image filename
Sep 4, 2022, 10:15 AM
I’m curious if you tried this, as the properties on
assetare read-only and automatically set (i.e., you don’t need to do anything). That said, I was looking for
asset.originalFilenamerather than
asset.url.
Sep 4, 2022, 3:33 PM
With no fields, I get `A`:
Setting an
Adding a preview, I get `C`:
I can see that the image is no longer previewed in the list, so I suspect you’ll need to specify a prepare function in your preview and add a
For context, the original suggestion (using
).
{
name: 'myArray',
title: 'My Array',
type: 'array',
of: [
{
name: 'myImage',
type: 'image',
},
],
}altfield, I get `B`:
{
name: 'myArray',
title: 'My Array',
type: 'array',
of: [
{
name: 'myImage',
type: 'image',
fields: [
{
name: 'alt',
title: 'Alt Text',
type: 'string',
}
],
},
],
}{
name: 'myArray',
title: 'My Array',
type: 'array',
of: [
{
name: 'myImage',
type: 'image',
fields: [
{
name: 'alt',
title: 'Alt Text',
type: 'string',
}
],
preview: {
select: {
title: 'asset.originalFilename'
},
}
},
],
}mediaproperty. That’ll be a valid need, but is additional to the original question.
For context, the original suggestion (using
asset.url) returns the url to the image (e.g.,
<https://cdn.sanity.io/images/PROJECT_ID/DATASET/fileNameHash>…
Sep 4, 2022, 3:43 PM
M
Hey
This is how my image field is structured:
user A
, thank you for the continuous support and this long answer!This is how my image field is structured:
{ name: "assetFiles",
type: "array",
title: "Files",
of: [
{ type: "image",
options: { isHighlighted: true,
},
fields: [
{ name: "caption",
type: "string",
title: "Bildunterschrift",
options: { isHighlighted: true,
},
},
{ name: "fullscreen",
type: "boolean",
title: "Vollformat",
initialValue: false,
options: { layout: "checkbox",
isHighlighted: true,
},
},
],
},
],
fieldset: "assets",
preview: { select: { title: "asset.originalFilename",
},
},
},
Sep 5, 2022, 12:25 PM
M
Hey
This is how my image field is structured:
As you can see, I implemented your code from
I then uploaded a fresh image, which automatically results in
I’m super sorry if there is some mistake in my code or my understanding of your reply!
user A
, thank you for the continuous support and this long answer!This is how my image field is structured:
{ name: "assetFiles",
type: "array",
title: "Files",
of: [
{ type: "image",
fields: [
{ name: "caption",
type: "string",
title: "Bildunterschrift",
options: { isHighlighted: true,
},
},
{ name: "fullscreen",
type: "boolean",
title: "Vollformat",
initialValue: false,
options: { layout: "checkbox",
isHighlighted: true,
},
},
],
},
],
fieldset: "assets",
preview: { select: { title: "asset.originalFilename",
},
},
},
As you can see, I implemented your code from
C.
I then uploaded a fresh image, which automatically results in
Untitled(and, as you said, no image preview). If I put some text in the caption field, the captions is shown as Image title, but never the image filename.
I’m super sorry if there is some mistake in my code or my understanding of your reply!
Sep 5, 2022, 12:31 PM
No problem, Max! It looks like your preview is on the array. Could you please try putting it on the image (i.e., right after the fields array you set on your image)?
Sep 5, 2022, 2:16 PM
M
user A
Ahhhh! Yes, this works!! TYSM ❤️Sep 5, 2022, 3:19 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.