keystatic

keystatic copied to clipboard

If I want to add images inside a post, the path to the image = file name. However, all new images added to the post are in the path post slug folder/content, so I get the "Could not resolve image" error

Hey! This is something you can improve with the directory and publicPath options on the image fields:

https://keystatic.com/docs/fields/image#storage-options

Example:

avatar: fields.image({
  label: 'Avatar',
  description: 'The avatar for this user',
  // This will output the images in the "public" directory
  directory: 'public/images/avatars',
  publicPath: '/images/avatars/'
})

With the code above, the file path output in your posts would be /images/avatars/{post_slug}/avatar.jpeg

Hope it helps!

Hey! This is something you can improve with the directory and publicPath options on the image fields:

https://keystatic.com/docs/fields/image#storage-options

Example:

avatar: fields.image({
  label: 'Avatar',
  description: 'The avatar for this user',
  // This will output the images in the "public" directory
  directory: 'public/images/avatars',
  publicPath: '/images/avatars/'
})

With the code above, the file path output in your posts would be /images/avatars/{post_slug}/avatar.jpeg

Hope it helps!

No, I mean if you attach additional images in the content field

It can also be customized like so:

    document: fields.document({
      label: 'Document',
      images: {
        directory: "...",
        publicPath: "...",
      },
    }),

@florian-lefebvre Thanks, it works. This need to be set as default when creating new project via cli.

Contributor

Document is deprecated and "markdoc" field is recommended. But markdoc doesn't support setting image upload directory, so it's not really usable at the moment.

@ikx94 the markdoc/mdx field does allow setting image options:

content: fields.mdx({
  label: "Content",
  options: {
    image: {
      publicPath: "/assets/",
      directory: "public/assets/",
    },
  },
});

@ikx94 the markdoc/mdx field does allow setting image options:

content: fields.mdx({
  label: "Content",
  options: {
    image: {
      publicPath: "/assets/",
      directory: "public/assets/",
    },
  },
});

Cool, good to know. Thank you.

One question, is there any way to adjust image sizing when added through editor?

is there any way to adjust image sizing when added through editor?

i don't think this is possible currently. you could open a new issue with a feature request?