sveltia / sveltia-cms

Alternative to Netlify/Decap CMS. Fast, lightweight, Git-based headless CMS. Modern UX, first-class i18n support, open source & free. Made with Svelte.
MIT License
862 stars 43 forks source link

Unable to preview image in editor #116

Closed samtrion closed 6 months ago

samtrion commented 6 months ago

In my migration to Sveltia CMS, I have encountered the issue that not all of my hero images for my blog posts are displayed correctly in the editor as well as in the collection listing.

image

The first three blog articles are sourced from a centrally available folder that contains various subfolders. (media_folder = assets/ & public_folder = /). On the other hand, the fourth blog article uses an image from its own article directory.

Editorview with not working Image preview: image

Editorview with working Image preview: image

Configuration:

- label: Hero Image
  name: hero
  widget: image
  i18n: true
  preview: false
- label: Hero Anchor
  name: heroAnchor
  widget: select
  i18n: true
  preview: false
  options: ["TopLeft", "TopCenter", "TopRight", "Left", "Center", "Right", "BottomLeft", "BottomCenter", "BottomRight", "Smart"]
  default: ["Smart"]
kyoshino commented 6 months ago

How the media_folder and public_folder for the posts collection look like? As the Decap doc says, you need these properties for the collection:

    path: '{{slug}}/index'
    media_folder: ''
    public_folder: ''

I’m testing now — one entry contains an image from the global asset folder, and another contains an image from an entry-relative path, and both displays fine:

image


image


image

But I’ve realized that, currently when I select a new image from the image selector, the preview becomes empty. (Once saved, it will be displayed.) It’s a different bug; I’ll fix it.

image
kyoshino commented 6 months ago

The problem here is the saved path is actually relative, e.g. heroes/package-manager.jpg. It should start with / if the image is coming from the global media folder.

kyoshino commented 6 months ago

One more note: Sveltia CMS currently doesn’t support field-specific media_folder and public_folder that are mentioned as the image widget’s beta feature in the Decap CMS doc. So I think there is no way to use /heros/ only for the specific hero image field while other image fields use /assets/.

kyoshino commented 6 months ago

But I’ve realized that, currently when I select a new image from the image selector, the preview becomes empty. (Once saved, it will be displayed.) It’s a different bug; I’ll fix it.

This bug is now fixed. I’m closing the issue as it seems like a configuration problem.

samtrion commented 6 months ago

Hi @kyoshino, I'm afraid it's indeed a bug. I've taken a detailed look at the issue and managed to achieve partial success. My global settings is media_folder: /assets/ and public_folder: /. Collection settings remain unchanged with media_folder: '' and public_folder: ''.

Under the directory /assets/, there are two subfolders /assets/images/ and /assets/heros/.

With these settings, neither images nor heroes are displayed.

kyoshino commented 6 months ago

I think that behaviour is expected.

Collection settings remain unchanged with media_folder: '' and public_folder: ''.

Then images are expected to be in the relative paths.

  • If I update the global setting to media_folder: /assets/images/ and public_folder: /images/, images are displayed, but heroes are not.

Then images under /assets/heros/ are not scanned.

  • If I update the global setting to media_folder: /assets/heros/ and public_folder: /heros/, heroes are displayed, but images are not.

Then images under /assets/images/ are not scanned.

samtrion commented 6 months ago

But when I set my global settings to

media_folder: /assets/
public_folder: /

Both subfolders should be scanned or not?

samtrion commented 6 months ago

But when I set my global settings to

media_folder: /assets/
public_folder: /

Both subfolders should be scanned or not?

As side note, with the fix https://github.com/sveltia/sveltia-cms/issues/115#issuecomment-1995527443, both path prefixes /images/ and /heros/ are working well in markdown fields and the preview.

kyoshino commented 6 months ago

Just tested locally.

  1. It seems images are scanned so these appear in the Asset Library.
  2. But, when looking for a specific image, the CMS fails to find it under a subdirectory.

I think images under a subdirectory that is not configured in any media_folder (in your case, both /assets/images/ and /assets/heroes/) should be ignored because there is no way to upload images there through the CMS UI. So, not 2 (what you see) but 1 is a bug. I’ll fix it.

kyoshino commented 6 months ago

Basically, these subfolders cannot be used until I fix this known issue mentioned in README:

Sveltia CMS currently doesn’t support field-specific media_folder and public_folder that are mentioned as the image widget’s beta feature in the Decap CMS doc.

kyoshino commented 6 months ago

Basically, these subfolders cannot be used until I fix this known issue mentioned in README

I cannot provide an ETA for this, unfortunately.

samtrion commented 6 months ago

Please do not put yourself under any time pressure. I can certainly manage without the preview, at least for a certain amount of time. Since I've managed without UI for several years now. 🤣

samtrion commented 6 months ago

Reopen for further tracking?

kyoshino commented 6 months ago

1 has been solved in https://github.com/sveltia/sveltia-cms/commit/d24fd767d7a95e99167fe497b06e13afaf2db423 and 2 is currently an expected behaviour, so I don’t see further work here. Field-specific media_folder and public_folder are already on my to-do list.