Knut Melvær
Knut is a principal developer marketing manager 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 is a principal developer marketing manager at Sanity.io
This can be used for blogs or articles where you want to possibly display next and previous article buttons
Go to Get current post, previous post, and next postHow to automatically generate linked headings with a custom serializer
Go to Anchored Headings for Portable TextMigration script to convert plain text to block content across your content lake
Go to Migrate plain text field to Portable TextSimple content type for a question and answer pattern
Go to Frequently asked questions