Raster Plugin for Sanity CMS

Sanity Plugin - Raster

A Sanity Studio plugin that integrates Raster - a modern Digital Asset Management (DAM) platform that helps teams organize, optimize, and deliver their media assets with powerful AI features and an intuitive interface.

Features

• 🖼️ Seamless integration with Raster DAM in Sanity Studio
• 🔄 Direct asset selection from your Raster libraries
• 🎯 Custom image field type (raster.image) for better type safety
• 🎨 Modern UI that matches Sanity's design system
• 📱 Responsive image preview and selection

Installation

npm install @raster-app/sanity-plugin-raster
# or
yarn add @raster-app/sanity-plugin-raster
# or
pnpm add @raster-app/sanity-plugin-raster

Configuration

1. Get Your Raster Credentials

1. Sign up for a Raster account at raster.app
2. Get your API key from your Raster dashboard
3. Note your organization ID

2. Add the Plugin to Your Sanity Config

// sanity.config.ts
import { defineConfig } from "sanity";
import { rasterPlugin } from "@raster-app/sanity-plugin-raster";

export default defineConfig({
  // ...other config
  plugins: [
    // ...other plugins
    rasterPlugin({
      apiKey: "your-raster-api-key",
      orgId: "your-organization-id",
    }),
  ],
});

Usage

Basic Schema Example

// schemas/blogPost.ts
import { defineType } from "sanity";

export default defineType({
  name: "blogPost",
  title: "Blog Post",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
      validation: (Rule) => Rule.required(),
    },
    {
      name: "description",
      title: "Description",
      type: "text",
      rows: 3,
    },
    {
      name: "featuredImage",
      title: "Featured Image",
      type: "image",
      description: "Select an image from Raster",
    },
  ],
});

Using the Image in Your Frontend

The image field will store the URL and alt text. Here's how the data structure looks:

interface RasterImage {
  _type: "image";
  asset: {
    url: string;
  };
  alt?: string;
}

Example usage in Next.js:

import Image from "next/image";

function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      {post.featuredImage && (
        <Image
          src={post.featuredImage.asset.url}
          alt={post.featuredImage.alt || ""}
          width={1200}
          height={630}
        />
      )}
      <p>{post.description}</p>
    </article>
  );
}

Development

1. Clone this repository

2. Install dependencies with pnpm install

3. Run pnpm build to build the plugin

4. Link the plugin to your Sanity studio for testing:

   # In the plugin directory
   pnpm link-watch
   
   # In your Sanity studio directory
   pnpm yalc add @raster-app/sanity-plugin-raster
   pnpm install

Contributing

Contributions are welcome! Please read our contributing guidelines to get started.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Monogram Inc.

About Raster

Raster is a modern Digital Asset Management (DAM) platform that helps teams organize, optimize, and deliver their media assets. With features like AI-powered search, automatic tagging, and advanced image optimization, Raster makes it easy to manage your digital assets at scale.

Key features:

• AI-powered asset organization
• Advanced image optimization
• Intuitive asset management
• Powerful API and integrations
• Team collaboration tools

Support

• 📝 Documentation
• 📧 Email Support