How to upload and get URLs for multiple images in Sanity, and add captions to individual images.
10 replies
Last updated: Dec 18, 2020
G
Hello guys , i am new to sanity and i have a 2 little problems .. first one is i did this schema to upload multiple images but i can't figure out how to get their url.. this is the schema for multi images upload
my second problem is how to enable multi-select for image upload because i keep uploading image by image
please help me i will appreciate it so much
{ name: 'ProjectImages',
title: 'Project Images',
type: 'array',
of: [{ type: 'image' }] },and this is how i tried to get the url in my react frontend
ProjectImages{ asset->{ _id,
url
}
}
my second problem is how to enable multi-select for image upload because i keep uploading image by image
please help me i will appreciate it so much
Dec 13, 2020, 1:27 PM
K
Add
You can also use the
[]to traverse the array:
ProjectImages[]{
asset->{
_id,
url
}
}@sanity/image-urlpackage to generate URLs from the
_id/
_ref, that is without having to join in the asset document. https://www.sanity.io/docs/image-url
Dec 13, 2020, 2:58 PM
K
If you have an array of images, you can drag and drop multiple files onto it. We should probably improve the UX so that you can also get a file selector that allows multiple files though.
Dec 13, 2020, 2:59 PM
A
Thank you so much !!
Dec 13, 2020, 3:34 PM
R
user Y
Is there a way to add a caption field to individual images in this sort of set up?If I add a stringtype object to my array containing the images nothing shows up in the studio.Thank you!
Dec 17, 2020, 4:56 PM
H
user H
Send the schema where you have added the string.Dec 17, 2020, 5:54 PM
R
user C
{ name: 'imageButtons',
type: 'object',
title: 'Image Buttons',
fields: [
{ name: 'title',
type: 'string',
title: 'Title'
},
{ type: 'array',
name: 'image',
title: 'Gallery Image',
of: [
{ type: 'image', options: { hotspot: true } },{ name: 'caption',
type: 'string',
title: 'Caption',
options: { isHighlighted: true _// <-- make this field easily accessible_
}
}
],
options: { layout: 'grid'
}
}
]
}
Dec 17, 2020, 5:55 PM
H
You have to add the caption for the image in the fields array.
You can find an example here
https://www.sanity.io/docs/image-type
You can find an example here
https://www.sanity.io/docs/image-type
Dec 17, 2020, 5:59 PM
R
user C
Thank you Harshal. I initially tried that but then I only get a single caption field for the entire array of multiple images.What I'm trying to do is attach a unique caption to each image within my array - do you know if this is doable?Thanks again!
Dec 17, 2020, 6:21 PM
H
{ 'name': 'imageButtons',
'type': 'object',
'title': 'Image Buttons',
'fields': [
{ name: 'title',
type: 'string',
title: 'Title'
},
{ type: 'array',
name: 'image',
title: 'Gallery Image',
of: [
{ type: 'image', options: { hotspot: true },fields: [{ name: 'caption',
type: 'string',
title: 'Caption',
options: { isHighlighted: true // <-- make this field easily accessible
}
}]},
],
options: { layout: 'grid'
}
}
]
}
Dec 18, 2020, 10:21 AM
R
works perfect, thank you!!
Dec 18, 2020, 1:00 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.