Components

Image

An in-article image hosted on the SEO for SaaS CDN, with alt text and an optional caption.

View Markdown Ask ChatGPT Ask Cursor

An in-article image hosted on the SEO for SaaS CDN, with alt text and an optional caption.

Image block

A team building a rocket together, a metaphor for launching a page — Every page starts at step one: being found.

The block

As the API returns it, from the example article:

json

{  "type": "image",  "url": "https://media.seoforsaas.dev/fixtures/kitchen-sink-section.jpg",  "alt": "A team building a rocket together, a metaphor for launching a page",  "caption": "Every page starts at step one: being found.",  "id": "image-5"}

Replace it

Pass your own component for the type. It receives the block, typed, and every other type keeps its default. The default stays available, so you can wrap it instead of starting over:

tsx

import { Article, defaultComponents } from "@/components/seoforsaas/article";import type { ImageBlock } from "@/lib/seoforsaas/types";const DefaultImage = defaultComponents.image;function MyImage({ block }: { block: ImageBlock }) {  return (    <div className="my-image">      <DefaultImage block={block} />    </div>  );}<Article blocks={article.blocks} components={{ image: MyImage }} />

Notes

alt is always present.
Next.js: swap in next/image through components.image and allow media.seoforsaas.dev in images.remotePatterns.