Assets: A more complete content collections example #2829
Conversation
✅ Deploy Preview for astro-docs-2 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
|
||
| This is a blog post | ||
| ``` | ||
| A blog index page might render the cover photo and title of each blog post. This example destructures the image metadata as props to `<Image/>`: |
There was a problem hiding this comment.
| A blog index page might render the cover photo and title of each blog post. This example destructures the image metadata as props to `<Image/>`: | |
| Image metadata can then be passed to the `<Image />` component. Use spread notation to pass all properties from the `data` object. |
There was a problem hiding this comment.
It isn't named a data object, it's an object on the data object.
| A blog index page might render the cover photo and title of each blog post. This example destructures the image metadata as props to `<Image/>`: | |
| Image metadata can then be passed to the `<Image />` component. Use spread notation to pass all properties from the image metadata object. |
|
|
||
| The image metadata will be transformed to match the signature of imported images, and therefore can be passed directly to the `<Image />` component or the `getImage()` function. | ||
| A new `image` helper for content collections lets you validate the image metadata using Zod. |
There was a problem hiding this comment.
I'm tempted to put this phrase, and the example of the schema, below the example for basic usage that's described above.
Right now this feels like:
- paragraph explaining how to use it with frontmatter
- note explaining the schema helper
- example in a schema
- example of basic usage
So maybe instead??
- paragraph explaining how to use it with frontmatter
- example of basic usage
- note explaining the schema helper
- example in a schema
| import { image, defineCollection, z } from "astro:content"; | ||
| ```ts title="src/content/config.ts" | ||
| import { defineCollection, z, image } from "astro:content"; | ||
| import type { ImageMetadata } from "astro/dist/assets/types"; |
There was a problem hiding this comment.
Err, this type being importable from there is great, but not reliable. I wouldn't necessarily suggest people to import it at the moment. I'll update the exports to export something better on Monday
There was a problem hiding this comment.
Will wait on this, as without it the code yells at you!
| { | ||
| allBlogPosts.map((post) => ( | ||
| <div> | ||
| <Image {...post.data.cover} alt={post.data.coverAlt} /> |
There was a problem hiding this comment.
This doesn't work, you need to do src={post.data.cover}
There was a problem hiding this comment.
It does work, this is a copy-paste from my working setup!
|
Thanks, Dan! This one's fine when you are happy with it, and have the updated info from Erika! 🙌 |
sarah11918
added
the
improve or update documentation
What kind of changes does this PR include?
Description
ImageAssettoImageMetadata, which is the importable nameImageMetadatain the content collections example so you don't get a red squiggly when refiningimgsrc/assetsfoldercoverAltfrontmatter property because you can't use<Image/>without alt text