TinaCMS has a built-in Repository (git) based media storage option. Alternatively you can connect your CMS to an external media storage provider.

Repo-based media keeps your assets alongside your content, meaning you can track changes and roll back versions for both code and media.

This has other benefits such reducing dependencies, usage of external APIs, syncronization between local development and preview environments.

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.

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
    },
  },
});

Asset Storage Path

Set publicFolder to the path to your site's "public" folder. This path is relative to your project's root.

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

Media Storage Path

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

Set this to "", if you want your media to be uploaded to the root of your publicFolder.

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

Media Permissions

The static 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).

Supported 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'],
  },
});

NextJS Images

If you are using NextJS images, you will need to add some like the following to your next.config.js file to allow access to external images.

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.tina.io',
        port: '',
      },
    ],
  },
};

Learn more about remote patterns here.

Maximum file size

When uploading files to TinaCloud, the maximum allowed file size is 100 MiB.

How does this work with Branching?

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.