We use cookies to improve your experience. By continuing, you agree to our use of cookies. Learn More

Tina Docs
Introduction
Core Concepts
Querying Content
Editing
Customizing Tina
Going To Production
Media
Drafts
Guides
Further Reference

image Type

type ImageField = {
label: string
name: string
type: 'image'
list?: boolean
// See https://tina.io/docs/extending-tina/overview/ for customizing the UI
ui?: {
label?: string
description?: string
component?: FC<any> | string | null
parse?: (value: string, name: string, field: F) => any
format?: (value: string, name: string, field: F) => any
validate?(
value: string,
allValues: any,
meta: any,
field: UIField<F, Shape>
): string | undefined | void
}
}

Example

export default defineConfig({
//...
schema: {
collections: [
{
name: 'posts',
label: 'Blog Posts',
path: 'content/posts',
format: 'mdx',
fields: [
{
type: 'image',
label: 'Hero image',
name: 'imgSrc',
},
// ... other fields
],
},
],
},
})
// ...

Please see the media docs for how to set up media in your site.

Customizing an image formatting

If you need to customize how an image is formatted in a field, you can use the format & parse options.

//tina/config.ts
// fields
// ...
{
type: "image",
name: "heroImg",
label: "Hero Image",
ui: {
format(value) {
//add leading slash to value if it doesnt exist
return value.startsWith("/") ? value : `/${value}`;
},
parse(value) {
//remove leading slash if it exists
return value.startsWith("/") ? value.slice(1) : value;
},
}
}

You can read more about format & parse here.

Last Edited: September 12, 2024