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

For static site generators, it allows for local development and preview environments to show the exact content and media as in production.

This can also reduce dependencies, usage of external APIs.

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

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 multiple branches or Editorial Workflow, 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: November 12, 2024