mirror of
https://github.com/estruyf/vscode-front-matter.git
synced 2026-11-03 17:12:21 +01:00
Enhancement: Inserting an image need to have a better UX #346
Assignees
adam (Adam Wojcieszonek)
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: adam/vscode-front-matter#346
Reference in new issue
Block a user
Describe the bug
Can't add photo from Media to post. Media opens and I'm able to navigate to the image, but after clicking the image, the FM panel says: Continue in the media dashboard to select the image you want to insert...
I don't see an insert button. Nor does selecting the image do anything other than display a larger version of the image.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Image should have been inserted to the post's frontmatter
Screenshots
From post, add image:
Attempt to select image to insert:
Insert fails. Only see larger preview:
Desktop (please complete the following information):
Additional context
Config file
.frontmatter.json:To add an image, you can click or hover over the image menu and click on the
+icon orinsert image to markdown(which would need a better description).Okay... Now that I see that I must click the "ellipsis" button, I see that it does insert the
img:parameter. However, now it doesn't use the same pathway.Expected:
Got:
I might suggest a better UI to make that more obvious. Not everyone is going to take the time to read the docs thoroughly. The UI should make the UX as "simple" as possible.
@lorezyra I agree, think that there are other places where our UX can be enhanced. Hopefully we'll get someone on board that can pick up this task and comes with new approaches.
About your image and it's path. Are you using page bundles? A folder per blog post? If not, how do you structure your content?
Probably this will be better:
What do you think?
That, or have a big "button" on the preview when user inevitably clicks on the image/video.
I'm not using page bundles exactly... However, the folder structure of my site is more like this:
Basically, the page and the article's assets (images, files, video, etc.) are kept with the same name. For example:
/2015/0205/Fun_楽しい物/300-meter-water-slide-is-set-to-unfold-in-Japan//2015/0205/Fun_楽しい物/300-meter-water-slide-is-set-to-unfold-in-Japan/{image.png | video.mp4)NOTE: I'm thinking to change the URI scheme to drop the implied date. So, this will likely change the URL pattern, but the folder structure will remain the same (on my MacBookPro).
That is an interesting structure. Typically a SSG uses page bundles where a folder includes the markdown file and related images.
For example:
Is this something specific to Hexo or your setup?
In FM, it can:
image: 10925507_10153052390324320_1894536358567800005_o.jpg.If it is not 1 or 2, it will take the relative path from the project, which happened in your case.
If this is specific to Hexo, we'll have to bring better support for it. One thing I can think about is making the images relative to the
_postsfolder.This is a HEXO feature. https://hexo.io/docs/asset-folders defines it better. I have the
_config.ymlparameterpost_asset_folder: trueset.Ok, so for HEXO, once defined as a framework for FM, we'll check the
_config.ymlfile, and see if thepost_asset_foldertotrue.Thanks! I think with this information we can make it happen. I'll create a separate issue for this.
I almost wished that FM could read my
_config.ymlfile and adjust FM's config.😎🤖That would be the ultimate goal but would require a lot of work to align with all SSGs. Hopefully at some point we can have this.