Forem: Alfonso Andrés López Molina

Angular + Sanity CMS: Mastering Images with the Sanity Image Directive

Alfonso Andrés López Molina — Mon, 12 Aug 2024 13:00:00 +0000

Hey there, Angular enthusiasts! Welcome back to our Angular + Sanity CMS adventure. In our previous posts, we dove into rendering Portable Text and setting up a Sanity project. Now, it's time to tackle something equally exciting: handling images like a pro!

Today, we're going to explore the Sanity Image Directive and Sanity Image Loader from our trusty @limitless-angular/sanity library. These tools are about to become your new best friends when it comes to working with images in your Angular + Sanity projects. Ready to level up your image game? Let's dive in!

What's so important about using Sanity Images?

Before we start coding, let's talk about why Sanity's approach to images is so cool. Sanity stores image assets separately from your content, allowing you to transform and optimize images on the fly. This means you can have one source image and display it in various sizes, crops, and formats across your site. Pretty neat, right?

The Dynamic Duo: Sanity Image Directive and Loader

Our @limitless-angular/sanity library provides two key players for handling Sanity images:

Sanity Image Directive: This is an Angular directive that makes it super easy to display Sanity images in your templates.
Sanity Image Loader: This is the behind-the-scenes hero that handles the actual loading and transformation of images.

Together, they make working with Sanity images in Angular a breeze!

Step 1: Update Your Sanity Schema

First things first, let's make sure our Sanity schema can handle images. Open up your schemaTypes/post.ts file and update the content field like this:

defineField({
  name: 'content',
  title: 'Content',
  type: 'array',
  of: [{type: 'block'}, {type: 'image'}],
}),

This change allows you to add images directly into your content array, right alongside your text blocks.

Step 2: Create Your Image Component

Now, let's create a new component to handle our images. Create a new file called image.component.ts in the same directory as your portable-text-display.component.ts file. This is typically in your src/app folder or a subdirectory thereof. Paste in this code:

import { ChangeDetectionStrategy, Component } from '@angular/core';
import {
  provideSanityLoader,
  SanityImage,
} from '@limitless-angular/sanity/image-loader';
import { PortableTextTypeComponent } from '@limitless-angular/sanity/portabletext';

@Component({
  selector: 'app-image',
  standalone: true,
  imports: [SanityImage],
  template: `
    <img
      class="mx-auto"
      alt="Sanity Image"
      [width]="400"
      [height]="400"
      [sanityImage]="value()"
    />
  `,
  styles: `
    :host {
      @apply block;
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    provideSanityLoader({ projectId: 'your-project-id', dataset: 'production' }),
  ],
})
export class ImageComponent extends PortableTextTypeComponent {}

Let's break this down:

We're using the SanityImage directive on our img tag. This is the magic that connects our image to Sanity.
The [sanityImage]="value()" attribute is where we pass our Sanity image object.
We're setting a fixed width and height here, but you could make these dynamic based on your needs.
The provideSanityLoader in the providers array sets up our image loader with your Sanity project details.
Importantly, the SanityImage directive inherits from NgOptimizedImage. This means we're automatically getting all the optimizations that NgOptimizedImage provides, without needing to set the ngSrc property separately.

Don't forget to replace 'your-project-id' with your actual Sanity project ID!

Step 3: Update Your Portable Text Component

Now that we have our new ImageComponent, let's use it in our Portable Text setup. Update your portable-text-display.component.ts file:

import { Component, inject } from '@angular/core';
import { PortableTextComponent, PortableTextComponents } from '@limitless-angular/sanity/portabletext';
import { ContentService } from '../content.service';
import { toSignal } from '@angular/core/rxjs-interop';
import { LinkComponent } from './link.component';
import { ImageComponent } from './image.component';

@Component({
  selector: 'app-portable-text-display',
  standalone: true,
  imports: [PortableTextComponent],
  template: `
    @if (portableTextContent(); as content) {
      <div portable-text [value]="content" [components]="customComponents"></div>
    } @else {
      <p>Hold on, content's loading...</p>
    }
  `,
})
export class PortableTextDisplayComponent {
  private contentService = inject(ContentService);

  portableTextContent = toSignal(
    this.contentService.getPortableTextContent('my-first-blog-post')
  );

  customComponents: PortableTextComponents = {
    types: {
      image: ImageComponent,
    },
    marks: {
      link: LinkComponent,
    },
  };
}

The key change here is adding ImageComponent to our customComponents object under the types key. This tells our Portable Text renderer to use our custom ImageComponent whenever it encounters an image in the content.

Step 4: Marvel at Your Handiwork

That's it! Now, when you run your Angular app and load some content from Sanity that includes images, they should render beautifully using your new ImageComponent.

Here's what's happening behind the scenes:

The Portable Text renderer encounters an image in your content.
It uses your ImageComponent to render that image.
The SanityImage directive in your ImageComponent works with the Sanity Image Loader to fetch and optimize the image.
Because SanityImage inherits from NgOptimizedImage, you're automatically getting all the built-in Angular image optimizations.
The result? A beautifully rendered, fully optimized image in your Angular app!

Bonus Tips and Tricks

Want to take your Sanity image game to the next level? Here are a few extra tips:

Responsive Images: The SanityImage directive already provides responsive image handling through its inheritance from NgOptimizedImage. You can further customize this by adjusting the sizes attribute if needed.
Image Transformations: Sanity's image API allows for on-the-fly transformations. You can adjust things like width, height, crop, and even apply filters directly in your image URL.
Lazy Loading: Good news! The SanityImage directive automatically includes lazy loading functionality from NgOptimizedImage, so your images will lazy load by default.

Wrapping Up

And there you have it! You've just leveled up your Angular + Sanity CMS skills by mastering image handling. With the Sanity Image Directive and Loader, you now have the power to effortlessly display and optimize images in your Angular applications.

Remember, great images can make a big difference in a user's experience, so use these tools wisely. Keep experimenting, keep learning, and most importantly, keep enjoying your work with Angular and Sanity!

If you want to dive deeper, check out these resources:

Happy coding, and may your images always be crisp, your load times swift, and your users delighted!

Angular + Sanity CMS: Setting Up Your Sanity CMS Project with TypeScript

Alfonso Andrés López Molina — Tue, 30 Jul 2024 12:00:00 +0000

Part 2: Setting Up Your Sanity CMS Project with TypeScript

Hey there, Angular devs! Welcome back to our Angular + Sanity CMS adventure. In Part 1, we introduced Sanity CMS, Portable Text, and the @limitless-angular/sanity library I released. We set up our Angular app to render Portable Text content like a pro. Now, it's time to dive into the Sanity side of things!

In this second part, we're going to create and configure a Sanity project that'll be the backend for our Angular app. We'll cover:

Setting up a new Sanity project
Defining our content schema using TypeScript
Creating and managing content in Sanity Studio
Getting our Sanity project to play nice with our Angular app

By the end of this tutorial, you'll have a fully functional content management system powering your Angular application. Let's dive in! 🏊‍♂️

What to Expect from Sanity

Before we get our hands dirty, let's break down what Sanity brings to the table:

Sanity Studio: This is your content management dashboard. We'll run it locally during development, but it can be easily deployed for production use.
Schema as Code: You'll be defining your content models (schemas) with TypeScript. These definitions automatically generate the input fields in Sanity Studio.
API-first Approach: Sanity provides APIs to fetch your content, which we'll use with our Angular app.

Alright, let's get coding!

Step 1: Create a New Sanity Project

Let's create a new Sanity project using the following command:



npm create sanity@latest

Now, follow the prompts to set up your project:

"Create new project" and give it a cool name (I when with my-awesome-sanity-project because thy not?).
Use the default dataset configuration.
Select the project output path (hitting Enter works just fine).
For the project template, go for "Blog (schema)" - it's perfect for our needs.
When it asks about TypeScript, give it a resounding "Yes!"
Pick your favorite package manager (npm, yarn, or pnpm).

The CLI will then set up your project with the chosen configuration. Once complete, you'll see instructions on how to start your Sanity Studio, and we'll modify the basic blog schema in the subsequent steps.

Step 2: Navigate to Your Project Directory

Once the project is created, navigate to its directory:



cd my-awesome-sanity-project

Step 3: Define Your Schema

Now for the fun part - let's modify the blog post schema. Open the file schemaTypes/post.ts and update it with this TypeScript code:



import { defineField, defineType } from 'sanity';

export default defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
    }),
    defineField({
      name: 'content',
      title: 'Content',
      type: 'array',
      of: [{ type: 'block' }],
    }),
  ],
});

This schema defines a simple but powerful blog post document type with a title, slug, and content field that uses Portable Text.

Step 4: Start Sanity Studio

Time to see the fruits of our labor. Run this command:



npm run dev

Navigate to http://localhost:3333 in your browser to see the Sanity Studio interface. Go ahead, create a new "Post" document and let your creativity flow in the Portable Text editor.

Pretty good, right? This is where the magic happens. You can see how easy it is to create structured content with Sanity's editor.

Step 5: Configure CORS for Your Angular App

Before we can connect our Angular app to Sanity, we need to configure CORS (Cross-Origin Resource Sharing) to allow requests from our Angular app's URL. Here's how to do it:

Go to https://www.sanity.io/manage and sign in to your account.
Find your project in the list (hopefully you remember what you named it 😉).
Look for "API" in the sidebar, then click on "CORS origins".
Click the "Add CORS origin" button.
For the "Origin" field, enter the URL where your Angular app will be hosted. During development, this is typically http://localhost:4200.
There's a checkbox for "Allow credentials" - leave it alone for now, we're keeping things simple.
Click "Save" to add the new CORS origin.

This step ensures that your Angular app can make requests to your Sanity project's API.

Step 6: Get Your Project Details

To connect your Angular app to your Sanity project, you'll need your project ID and dataset name. You can find these in the sanity.config.ts file in your project root:



import { defineConfig } from 'sanity'

export default defineConfig({
  name: 'default',
  title: 'Your Awesome Project Name',

  projectId: 'your-project-id',
  dataset: 'production',

  // ... other configuration
});

This is your project's unique identifier and the name of your dataset. You'll need these for the next step, so keep them handy!

Step 7: Update Your Angular App

Now that your Sanity project is all set up and looking good, let's update the sanity-client.ts file in your Angular project with your actual project details:



import { createClient } from '@sanity/client'

export const client = createClient({
  projectId: 'your-actual-project-id',
  dataset: 'production',
  useCdn: true,
  apiVersion: '2023-05-03', // Use today's date in YYYY-MM-DD format
});

Don't forget to replace 'my-first-blog-post' with an actual slug from your Sanity project.



portableTextContent = toSignal(

  this.contentService.getPortableTextContent('my-first-blog-post')

);

Wrapping Up: Bringing Angular and Sanity Together

Congratulations! You've just completed an exciting journey through Angular and Sanity CMS. Let's take a moment to reflect on what we've accomplished and where you can go from here:

An Angular frontend that leverages the latest features, such as standalone components, signals, and the new control flow syntax.
A flexible Sanity CMS backend, complete with a custom schema and improved Studio experience.

Key Takeaways

Sanity's Improvements: Sanity brings a streamlined setup process and an enhanced Studio experience.
TypeScript All the Way: From Angular to Sanity, we've used TypeScript throughout, ensuring type safety and improving developer experience.
Seamless Integration: The @limitless-angular/sanity library makes it surprisingly easy to bridge the gap between Angular and Sanity.

Final Thoughts

The combination of Angular and Sanity CMS gives you a solid foundation for building content-rich, dynamically updated web applications. Whether you're creating a blog, a portfolio, or a complex web app, you now have the tools to manage your content effortlessly and display it beautifully.

Happy coding, and may your content always be structured and your components forever standalone! 🚀✨

Angular + Sanity CMS: Rendering Portable Text with @limitless-angular/sanity Library

Alfonso Andrés López Molina — Mon, 22 Jul 2024 13:00:00 +0000

Hey there, Angular devs!

Let's talk about content management in modern web development. Sanity CMS has become a powerful solution for handling structured content, and one of its most interesting features is Portable Text, a flexible JSON-based format for rich text.

Now, getting Portable Text to play nice with Angular can be a bit tricky. But don't worry, we've got a secret weapon: the @limitless-angular/sanity library. This package is designed to make your life easier when working with Sanity and Angular.

What's so great about @limitless-angular/sanity? Well, it gives you two main benefits:

A full Portable Text implementation for Angular
An image loader designed specifically for use with Sanity.

In this guide, we'll walk you through setting up an Angular app that can render Portable Text content from Sanity CMS using this library. By the end, you'll have a functioning Angular component that can elegantly display your Sanity content.

Ready to dive in? Let's go!

Before We Start

Make sure you've got:

Some basic Angular and TypeScript knowledge
Node.js and npm installed on your machine
A Sanity CMS project with some Portable Text content to play with

Step 1: Set Up Your Angular Project

First, let's create a new Angular project:

ng new sanity-portable-text-demo
cd sanity-portable-text-demo

Step 2: Install Required Dependencies

Install our library and the Sanity client:

npm install @limitless-angular/sanity @sanity/client

Step 3: Set Up Your Sanity Connection

Create a new file src/app/sanity-client.ts:

import { createClient } from '@sanity/client';

export const client = createClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset',
  useCdn: true, // set to `false` to bypass the edge cache
  apiVersion: '2023-05-03', // use current date (YYYY-MM-DD) to target the latest API 
});

Don't forget to replace 'your-project-id' and 'your-dataset' with your actual Sanity details!

Step 4: Create a Content-Fetching Service

Let's create a service to handle our Sanity queries. Create a new file src/app/content.service.ts:

import { Injectable } from '@angular/core';
import { client } from './sanity-client';
import { Observable, from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ContentService {
  getPortableTextContent(slug: string): Observable<any> {
    return from(client.fetch(`*[_type == "post" && slug.current == $slug][0].content`, { slug }));
  }
}

This service will fetch your Portable Text content from a specific Sanity document using its slug.

Note: This example assumes that your Sanity document schema includes:

A post document type
A slug field of type slug within the post document
A content field that contains the Portable Text blocks for rendering

Don't worry about it, you'll see how to config this in part 2.

Step 5: Build Your Content Display Component

Now, let's create a component that'll display your Portable Text content:

ng generate component portable-text-display

Update src/app/portable-text-display/portable-text-display.component.ts:

import { Component, inject } from '@angular/core';
import { PortableTextComponent, PortableTextComponents } from '@limitless-angular/sanity';
import { ContentService } from '../content.service';
import { toSignal } from '@angular/core/rxjs-interop';
import { LinkComponent } from './link.component';

@Component({
  selector: 'app-portable-text-display',
  standalone: true,
  imports: [PortableTextComponent],
  template: `
    @if (portableTextContent(); as content) {
      <div portable-text [value]="content" [components]="customComponents"></div>
    } @else {
      <p>Hold on, content's loading...</p>
    }
  `,
})
export class PortableTextDisplayComponent {
  private contentService = inject(ContentService);

  portableTextContent = toSignal(
    this.contentService.getPortableTextContent('my-first-blog-post')
  );

  customComponents: PortableTextComponents = {
    marks: {
      link: LinkComponent,
    },
  };
}

Remember to replace 'my-first-blog-post' with an actual ID from your Sanity project.

Step 6: Create a Custom Link Component

Create a new file src/app/portable-text-display/link.component.ts:

import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
import { PortableTextMarkComponent } from '@limitless-angular/sanity';

interface LinkMark {
  _type: 'link';
  href: string;
}

@Component({
  selector: 'a',
  standalone: true,
  template: `<ng-container #children />`,
  host: {
    '[href]': 'value()?.href',
    '[target]': 'target()',
    '[rel]': 'rel()',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LinkComponent extends PortableTextMarkComponent<LinkMark> {
  target = computed(() =>
    (this.value()?.href ?? '').startsWith('http') ? '_blank' : undefined,
  );

  rel = computed(() =>
    this.target() === '_blank' ? 'noindex nofollow' : undefined,
  );
}

This little component extends the PortableTextMarkComponent and adds some additional functionality for external links.

Step 7: Showcase in Your Main App

Finally, let's use our new component. Update src/app/app.component.ts:

import { Component } from '@angular/core';
import { PortableTextDisplayComponent } from './portable-text-display/portable-text-display.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PortableTextDisplayComponent],
  template: `
    <h1>Check Out This Sanity Portable Text Magic!</h1>
    <app-portable-text-display />
  `,
})
export class AppComponent {}

Step 8: Run Your Application!

You're all set! Let's see your application in action:

ng serve

Navigate to http://localhost:4200 in your browser. If all goes well, you should see your Sanity content rendered on the page!

Wrapping Up

And there you have it! You've just built an Angular app that can handle Sanity's Portable Text content from Sanity CMS. We've used some pretty cool Angular features along the way:

Standalone components
The new built-in control flow syntax
Dependency injection with the inject function
Signals with toSignal from '@angular/core/rxjs-interop'
A custom link component with computed properties

Remember, this is just the beginning. You can customize how different blocks render, add styling, or even get more complex with your Sanity queries. The @limitless-angular/sanity library provides much flexibility for handling various types of Portable Text content.

If you want to dive deeper, check out these resources:

Now go forth and create some awesome content-driven Angular apps! Happy coding!