Everton Pereira
Software Engineer
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.
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.
raster.image
) for better type safetynpm install @raster-app/sanity-plugin-raster
# or
yarn add @raster-app/sanity-plugin-raster
# or
pnpm add @raster-app/sanity-plugin-raster
// 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",
}),
],
});
// 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",
},
],
});
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>
);
}
Clone this repository
Install dependencies with pnpm install
Run pnpm build
to build the plugin
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
Contributions are welcome! Please read our contributing guidelines to get started.
git checkout -b feature/amazing-feature
)git commit -m 'Add some amazing feature'
)git push origin feature/amazing-feature
)MIT © Monogram Inc.
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:
npm i @raster-app/sanity-plugin-raster
Software Engineer