Docs: Add "how to add images" to the Astro starter

[jasikpark]

https://github.com/Thinkmill/keystatic/blob/main/docs/src/content/pages/installation-astro.mdoc

^ It'd be great to include "how to add images and ensure they're resolved" to the astro docs, since there seems to be some awkwardness with how the paths are generated:

with src/content/posts/first-post.mdoc in the starter, uploading an image from the ui adds src/content/posts/first-post/content/image.jpeg and links ![](image.jpeg) in src/content/posts/first-post.mdoc, which Astro ends up not resolving.

Maybe worth changing the config / reccomending changing the config for a blog w/ images or improving the path generation code?

Changing keystatic.config.ts to path: "src/content/posts/*/" doesn't seem to help, since then the image is still referenced as ![](image.jpeg) when it's in the ./content/ directory

[jasikpark]

May be that https://github.com/Thinkmill/keystatic/blob/main/packages/keystatic/src/form/fields/document/DocumentEditor/image.tsx needs to generate the relative slug differently? Does Next.JS glob for the images?

[simonswiss]

Hey! Good catch — we need to support the proper Astro way to handle images with Astro assets.

I've opened a PR that will update the template to do just that — if you want to keep working on your existing project, you can copy the config chages from that PR 👍

keystatic/templates/astro/keystatic.config.ts

Lines 20 to 23 in 094f890

	images: {
	directory: 'src/assets/images/posts',
	publicPath: '../../assets/images/posts/',
	},

[jasikpark]

😓 I've somehow run into an issue where that resolves for me in the editor, but not when astro renders the markdoc... I'll have to investigate into it more...

[tordans]

@simonswiss I created a new setup following your video yesterday but it looks like the changes you made in #621 are not released, yet?

On a side note, I tried to wrap my head around how to figure out what is released, but given the different changelogs and packages and the way the changelog-UI works (eg without dates in the changelog) that is not quite easy. I found that in

keystatic/templates/astro/CHANGELOG.md

Line 14 in 7d67aa3

- f47feaa7: Add support for Astro assets with image directory and publicPath in

your change was added, so that should be released, right?

---

Q: How to setup a posts/images folder structure that stores the images next to the post?

In #621 you stored the images away from the posts. However, this will be messy once I delete a post and cannot find the corresponding images. I suggest to create the default config in a way to store the posts and images next to eachother…

(Btw, Astro has no recommendations on this in their docs, eg not in https://docs.astro.build/en/core-concepts/project-structure/ nor in the images section.)

/posts/slug1/index.astro
/posts/slug1/foobar.png
/posts/slug2/index.astro
/posts/slug3/index.astro
/posts/slug3/foo.jpg
/posts/slug3/bar.gif

[rabelais88]

😓 I've somehow run into an issue where that resolves for me in the editor, but not when astro renders the markdoc... I'll have to investigate into it more...

this also prevented me from resolving the editor image in Next.js. should I open another github issue?