Knut Melvær
Knut runs developer relations at Sanity.io
Knut is located at Oslo, Norway
Add lists of image assets based on information in the asset document using the Structure Builder API
import React from 'react'
import S from '@sanity/desk-tool/structure-builder'
const AssetPreview = ({ document }) => {
const { displayed } = document
return (
displayed.url && (
<div style={{ padding: '1em' }}>
<img src={`${displayed.url}?w=600`} style={{ maxWidth: '100%' }} />
</div>
)
)
}
const AssetDoc = assetId =>
S.document()
.documentId(assetId)
.views([
S.view.component(AssetPreview).title('Image preview'),
S.view.form().title('Meta-information')
])
const assetsStructure = S.listItem()
.title('Assets')
.child(
S.list()
.title('Assets')
.items([
S.listItem()
.title('All images')
.child(S.documentTypeList('sanity.imageAsset').child(AssetDoc)),
// List images with width over 1000px
S.listItem()
.title('Large images (1000px+)')
.child(
S.documentList()
.title('Large images')
.filter(
'_type == "sanity.imageAsset" && metadata.dimensions.width > 1000'
)
.child(AssetDoc)
),
// List images with the file extension of “gif”
S.listItem()
.title('GIFs')
.child(
S.documentList()
.title('GIFs')
.filter('_type == "sanity.imageAsset" && extension == "gif"')
.child(AssetDoc)
),
// List images that has been uploaded with the unsplash asset selector
S.listItem()
.title('From Unsplash')
.child(
S.documentList()
.title('From Unsplash')
.filter(
'_type == "sanity.imageAsset" && source.name == "unsplash"'
)
.child(AssetDoc)
)
])
)
export default assetsStructure
import S from '@sanity/desk-tool/structure-builder'
import assetsStructure from './assetsStructure'
export default () => S.list()
.title('Content')
.items([
...S.documentTypeListItems(),
assetsStructure
])
Example of how to list images in the studio desk tool based on different filters on the information in the asset documents using the Structure Builder API.
Knut runs developer relations at Sanity.io
How to add different types of “breaks” for Portable Text that can be translated to horizontal rules, “read more”, sections, chapters, and so on.
Go to Breaks for Portable TextMigration script for renaming a field based on a GROQ query
Go to Rename a field across documentsThis migration scripts lets you migrate documents to a new type.
Go to Migration script for document typesUse data for the current logged in user as initial values in a new document
Go to Initial value template with current user