Overview

Use the Media Manager in TinaCMS to upload, browse, rename, and delete assets. It integrates with our image fields across Pages, Blog posts, Docs, and Landing sections.

Open Media Manager

Start the editor and open Media Manager from the sidebar under Site. You can drag and drop files or use the Add File button.

Where files are stored

By default, uploaded media is saved under the app public folder and referenced by absolute paths such as /images/hero.webp. Assets are versioned in Git with your content changes.

// tina/config.ts - adjust media root if you want a subfolder
export default defineConfig({
  // ...
  media: {
    tina: {
      publicFolder: 'public',
      mediaRoot: 'images', // files end up in /public/images
    },
  },
})

If you move or rename files, update any references in content fields to avoid broken images.

Allowed file types

Image fields validate against our allowed list in tina/options/imageMimeTypes.ts. Prefer WebP for photos and SVG for icons or logos.

External images

You can paste external URLs in image fields. If the page uses Next.js Image, allow the domain in next.config.js under images.remotePatterns.

// next.config.js - allow a CDN or external host
module.exports = {
  images: {
    remotePatterns: [{ protocol: 'https', hostname: 'cdn.example.com' }],
  },
}

Remote images

If you load images from outside your app, allow those hosts in next.config.js. Add assets.tina.io for Tina Media thumbnails and any other domains you use (e.g., Supabase storage, Google avatars).

const nextConfig = {
  images: {
    remotePatterns: [
      { hostname: 'assets.tina.io' },
      ...
    ],
  },
  ...
};

Using images in content

Image fields across sections come from our shared imageField schema. Always fill the alt text for accessibility and SEO. For docs, place assets in /public and reference the path directly.

Organization tips

  • Keep a simple structure like /images/landing, /images/blog, /images/docs.
  • Use lowercase hyphenated filenames.
  • Avoid spaces in names.
  • Do not delete files still referenced in content.

Performance and quality

  • Prefer WebP for photographs and SVG for vector graphics.
  • Compress large assets before uploading.
  • Reuse images across pages when possible.
  • Keep hero images under 200–300 KB where you can.

Switching storage

Tina supports custom media stores such as S3 or Cloudinary. See External Media Providers for examples and adapters. When switching, ensure your content fields still resolve to valid URLs.