Embeds and Images

Text posts are great, but you can do better. This guide will walk you through embedding posts, images, and links in your posts.

Embedding posts

Or, more generally, embedding a link to a record in your post. This can be a quote post or an embedded link to a feed generator or list.

You can use the quoted property when creating a post to pass in a reference to the record you would like to quote. This can be an class instance, or any object with a uri and cid.

const const post: Postpost = await const bot: Botbot.Bot.getPost(uri: string, options?: BotGetPostOptions): Promise<Post>Fetch a post by its AT URI.
@paramuri The post's AT URI.@paramoptions Optional configuration.getPost(
  "at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.feed.post/3jvz2442yt32g"
);

await const bot: Botbot.Bot.post(payload: PostPayload, options?: BotPostOptions): Promise<PostReference>Create a post.
@parampayload The post payload.@paramoptions Optional configuration.@returnsA reference to the created post.post({
  PostPayload.text: string | RichtextBuilderThe post text. Can be a string or a RichText instance containing facets.text: "Check out this post!",
  PostPayload.quoted?: StrongRef | undefinedA link to a post, list, or feed generator to be embedded within the post.quoted: const post: Postpost,
});

A quote post by @skyware.js.org reading "Check out this post!". The quoted post is a post by @pfrazee.com with text and an image.

Embedding images

You can embed up to 4 images in a post using the images property.

await const bot: Botbot.Bot.post(payload: PostPayload, options?: BotPostOptions): Promise<PostReference>Create a post.
@parampayload The post payload.@paramoptions Optional configuration.@returnsA reference to the created post.post({
	PostPayload.text: string | RichtextBuilderThe post text. Can be a string or a RichText instance containing facets.text: "Check out this image!",
	PostPayload.images?: [(ImagePayload | undefined)?, (ImagePayload | undefined)?, (ImagePayload | undefined)?, (ImagePayload | undefined)?] | undefined1-4 images to attach to the post.images: [
		{
			ImagePayload.data: string | BlobThe image's data, or a URL leading to an image.data: "https://http.cat/images/418.jpg",
			ImagePayload.alt?: string | undefinedAlt text for the image.alt: "A cat in a teapot, with the caption '418 I'm a teapot'",
		},
	],
});

A post by @skyware.js.org reading "Check out this image!". The post contains an image of a cat in a teapot, with the caption "418 I'm a teapot".

Embedding external links

Moving on to embedding external links in your posts. The external property allows you to specify a link or object to embed in your post.

await const bot: Botbot.Bot.post(payload: PostPayload, options?: BotPostOptions): Promise<PostReference>Create a post.
@parampayload The post payload.@paramoptions Optional configuration.@returnsA reference to the created post.post({
    PostPayload.text: string | RichtextBuilderThe post text. Can be a string or a RichText instance containing facets.text: "Check out this link!",
    PostPayload.external?: string | ExternalEmbedPayload | undefinedAn external embed to attach to the post.
Can either be a link to resolve the embed preview from, or an object for more fine-grained control.external: "https://skyware.js.org"
});

A post by @skyware.js.org reading "Check out this link!". The post contains an embedded link with a title, description, and preview image.

That’s it! You can also combine the quoted and images property to embed both a post and images in your post, but an external link will override any other embeds. Go on and spice up your posts!