Home
Blog
Showcase
Community
Introduction
Overview
Introduction To TinaCMS
Getting Started
Using the Tina Editor
FAQ
Core Concepts
Content Modeling
Data Fetching
Visual Editing
Querying Content
Overview
Writing custom queries
Editing
Overview
Markdown & MDX
Block-based editing
Single Document Collections
Customizing Tina
Overview
Validation
Custom Field Components
Custom List Rendering
Format and Parse Input
Filename Customization
Before Submit function
Going To Production
Overview
Tina Cloud
Self-Hosted
Drafts
Overview
Draft Fields
Editorial Workflow
Guides
Overview
Framework Guides
Separate Content Repo
Querying Tina Content at Runtime
Internationalization
Migrating From Forestry
Further Reference
Overview
Config
Schema
The "tina" folder
The TinaCMS CLI
Media
Overview
Repo-based Media
External Media Providers
Search
Content API
Tina's edit state
The "tinaField" helper
Self-Hosted Components

Repo-based Media (default)


Repo-based media storage is the default media storage solution for TinaCMS.

Configuration

To configure repo-based media in your project, add the following to your schema definition in tina/config.{ts,js}

//tina/config.{ts,js}
export default defineConfig({
// ...
media: {
tina: {
publicFolder: 'public',
mediaRoot: 'uploads',
static: false, //default is false
},
},
})

publicFolder

The path to your site's "public" folder. This path is relative to your project's root.

E.g, For any NextJS site, (such as our tina-cloud-starter), this value would be "public"

mediaRoot

The path to your media folder, relative to the publicFolder value.

E.g, in our tina-cloud-starter, this value would be "uploads"

Note, anything in this directory will be synced with TinaCloud's media server, and the images will be publicly accessible.

mediaRoot can be set to "", if you want your media to be uploaded to the root of your publicFolder.

static (Boolean)

This property determines whether media files can be uploaded, edited, or deleted directly through the editor.

  • static: true Editors cannot upload/delete media (static assets)
  • static: false (default): Editors can upload/delete media (dynamic assets).

Overriding the default accepted media types

The following file types are supported by default

FormatMIME TypeExamples
Adobe InDesignapplication/x-indesign.indd
Apple HTTP Live Streamingapplication/vnd.apple.mpegurl.m3u8
Binary Fileapplication/octet-stream.bin
Filmboxmodel/fbx.fbx
GL Transmission Format (JSON)model/gltf+json.gltf
Imagesimage/*.jpg, .png, .gif, etc.
JSONapplication/json.json
JSON-LDapplication/ld+json.jsonld
Material Exchange Formatapplication/mxf.mxf
Microsoft Excel (Legacy)application/vnd.ms-excel.xls
Microsoft Excel (OpenXML)application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.xlsx
Microsoft Word (Legacy)application/msword.doc
Microsoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document.docx
MPEG-DASHapplication/dash+xml.mpd
PDFapplication/pdf.pdf
Polygon File Formatmodel/ply.ply
PostScriptapplication/postscript.ps, .eps, etc.
Text Filestext/*.txt, .md, etc.
U3D Meshmodel/u3d+mesh.u3d
USDZ Zipmodel/vnd.usdz+zip.usdz
Videosvideo/*.mp4, .avi, .mkv, etc.

If you would like to specify your own allowed file types, add the following to the media property

//tina/config.{ts,js}
export default defineConfig({
// ...
media: {
tina: {
//..
},
accept: ['image/jpeg', 'video/mp4'],
},
})

accept (List<String>)

This property determines the filetypes that can be uploaded.

next/image

If you are using Next images, you will need to add the following to your next.config.js file to allow access to external images hosted on the Tina media hostname:

module.exports = {
images: {
domains: ['assets.tina.io'],
},
}

See the next/image docs for more information.

Usage

Once media has been configured, you can use image fields in your collections.

In your schema add a new image field to a collection, e.g:

// ...
{
name: 'hero',
type: 'image',
label: 'Hero Image',
}

When your editors add an image to a document, the value that is saved will be a relative path:

"/<mediaRoot>/<imgName>"

Not seeing your media? To see your media in the media manager, you will need to press the "Sync Media" button in the media manager. This will pull all of your media from GitHub and add it to TinaCMS.

Branching Caveats

Repo-based media is designed to be used around a single-branch workflow. If your project is using the experimental branching plugin, there's some known caveats to be aware of.

  • Images cannot be altered, once uploaded any subsequent changes to an asset will not be reflected.
  • If you only have a single branch with media enabled, the media store will source/upload images to/from that branch.
  • If you have multiple branches with media enabled, then all media will be sourced/uploaded to/from the repository's default branch.

If you are configuring Tina on a non-default branch (and the Tina config has not yet been merged to your default branch), you may see this message in the TinaCloud media settings:

To workaround this, you may need to enable media after merging Tina to your default branch.

Last Edited: June 29, 2022

Product

Showcase
TinaCloud
Introduction
How Tina Works
Roadmap

Resources

Blog
Examples
Support
Media

Whats New
TinaCMS
TinaCloud
Use Cases
Agencies
Documentation
Teams
Jamstack CMS
Benefits
MDX
Markdown
Git
Editorial Workflow
Customization
SEO
Comparisons
TinaCMS vs Storyblok
TinaCMS vs Sanity
TinaCMS vs DecapCMS
TinaCMS vs Contentful
TinaCMS vs Builder.io
TinaCMS vs Strapi
Integrations
Astro
Hugo
NextJS
Jekyll