Enhancement: Inserting an image need to have a better UX

[lorezyra]

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:

1. Open post from FM panel (under the post section).
2. Click on the Post image in the panel.
3. FM panel switches to the blank view with text instructing to use media dashboard. Media Dashboard opens.
4. Navigate to the folder and select image.
5. Image does not insert upon clicking it. Instead, a larger preview is shown.

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):

• OS: MacOS 12.5.1
• Browser Chrome 104 and Safari 15.6.1
• FM Version: 8.1.1

Additional context
Config file .frontmatter.json:

{
  "$schema": "https://frontmatter.codes/frontmatter.schema.json",
  "frontMatter.taxonomy.contentTypes": [
    {
      "name": "default",
      "pageBundle": false,
      "previewPath": null,
      "fields": [
        {
          "title": "Title",
          "name": "title",
          "type": "string"
        },
        {
          "title": "Description",
          "name": "description",
          "type": "string"
        },
        {
          "title": "Publishing date",
          "name": "date",
          "type": "datetime",
          "default": "{{now}}",
          "isPublishDate": true
        },
        {
          "title": "Content preview",
          "name": "preview",
          "type": "image"
        },
        {
          "title": "Is in draft",
          "name": "draft",
          "type": "draft"
        },
        {
          "title": "Tags",
          "name": "tags",
          "type": "tags"
        },
        {
          "title": "Categories",
          "name": "categories",
          "type": "categories"
        }
      ]
    },
    {
      "name": "HEXO/post",
      "pageBundle": false,
      "previewPath": null,
      "fields": [
        {
          "title": "Title",
          "name": "title",
          "type": "string",
          "editable": true,
          "required": true
        },
        {
          "title": "Description",
          "name": "excerpt",
          "type": "string",
          "editable": true
        },
        {
          "title": "Post Image (PNG / JPG / SVG)",
          "name": "img",
          "editable": true,
          "type": "image",
          "description": "This is the main photo displayed on the website. SVG is recommended, but sometimes not possible if too complex.",
          "isPreviewImage": true
        },
        {
          "title": "OpenGraph image (JPG / PNG)",
          "name": "openGraph_img",
          "type": "image",
          "description": "This is the image used by FB, Twitter, or any social media site. SVG _not_ supported.",
          "default": false,
          "editable": true
        },
        {
          "title": "Publish date",
          "name": "date",
          "type": "datetime",
          "default": "{{now}}",
          "isPublishDate": true,
          "editable": false,
          "required": true
        },
        {
          "title": "Updated time",
          "name": "updated",
          "type": "datetime",
          "default": "{{now}}",
          "editable": false,
          "single": true,
          "isModifiedDate": true
        },
        {
          "title": "Tags",
          "name": "tags",
          "type": "tags",
          "description": "Tags should be limited to a absolute max of 7; \n Ideally 3...",
          "taxonomyLimit": 10,
          "editable": true
        },
        {
          "title": "Categories",
          "name": "categories",
          "type": "categories",
          "description": "this is replaced by the HEXO plug-in [hexo-auto-category](https://github.com/xu-song/hexo-auto-category)",
          "editable": true
        },
        {
          "title": "Pin this post at top?",
          "name": "sticky",
          "description": "Select a priority between 1 and 98 (1 = very top) for this post to be displayed.",
          "type": "number",
          "default": 999,
          "editable": true,
          "single": true
        },
        {
          "title": "Enable comments?",
          "name": "comments",
          "type": "boolean",
          "description": "Enable DISQUS tool for comments?",
          "default": true,
          "editable": true,
          "single": true
        },
        {
          "title": "Enable ToC?",
          "name": "toc",
          "type": "boolean",
          "description": "Display the Table of Contents?",
          "default": true,
          "editable": true,
          "single": true
        },
        {
          "title": "Default ToC open?",
          "name": "tocOpen",
          "type": "boolean",
          "description": "Should the Table of Contents be open already?",
          "default": true,
          "editable": true,
          "single": true
        },
        {
          "title": "Allow indexing and search for this post's contents?",
          "name": "indexing",
          "type": "boolean",
          "default": true,
          "editable": true,
          "single": true
        },
        {
          "title": "Display tags on Home?",
          "name": "display_tag_onHome",
          "type": "boolean",
          "description": "Show the tags for this post in the feed pages?",
          "default": true,
          "editable": true,
          "single": true
        },
        {
          "title": "Show in top recommended section on home page?",
          "name": "recommendedSection",
          "type": "boolean",
          "description": "Display this post in the recommended section below the top 'HERO' banner?",
          "default": false,
          "editable": true,
          "single": true
        },
        {
          "title": "Show donate button?",
          "name": "donate",
          "type": "boolean",
          "description": "This is great for crowd funding your work. However, don't enable this for copy/paste news reports.",
          "default": false,
          "editable": true,
          "single": true
        },
        {
          "title": "Enable MathJax",
          "name": "mathjax",
          "type": "boolean",
          "description": "If using math formulas, good to enable this.",
          "default": false,
          "editable": true,
          "single": true
        },
        {
          "title": "Show share icons?",
          "name": "share",
          "type": "boolean",
          "description": "Display the SNS icons or bot to share this post.",
          "default": true,
          "editable": true,
          "single": true
        },
        {
          "title": "Display copyright notice on post?",
          "name": "copyright",
          "type": "boolean",
          "description": "Should enable this if copied from other _copyrighted_ source... Or, if you have copyrighted it, then enable.",
          "default": true,
          "editable": true,
          "single": true
        },
        {
          "title": "source Url",
          "name": "sourceUrl",
          "description": "Original post where this was copy/pasted.",
          "editable": true,
          "single": true
        },
        {
          "title": "source Author",
          "name": "sourceAuthor",
          "description": "{First_name} {LAST_NAME} -or- '@username'",
          "editable": true
        },
        {
          "title": "source Author Image",
          "name": "sourceAuthorImg",
          "default": false,
          "editable": true
        },
        {
          "title": "source Publisher Date",
          "name": "sourcePublishDate",
          "default": false,
          "editable": true,
          "single": true
        },
        {
          "title": "copyLicense",
          "name": "copyLicense",
          "type": "string",
          "description": "What type of license is this documented under? MIT/CC/Apache/etc.",
          "default": false,
          "editable": true,
          "single": true
        },
        {
          "title": "copyLicense URL",
          "name": "copyLicenseURL",
          "type": "string",
          "description": "URL where the license is fully explained.",
          "default": false,
          "editable": true,
          "single": true
        },
        {
          "title": "copyLicense Description",
          "name": "copyLicenseDesc",
          "type": "string",
          "default": false,
          "editable": true
        },
        {
          "title": "Location on Earth",
          "name": "geolocation",
          "type": "string",
          "description": "Provide either a coordinate or text string that Google Maps can display. Where did you write this post?",
          "default": "'Chiba, Japan'",
          "editable": true,
          "single": true
        },
        {
          "title": "Read Time (autogenerated)",
          "name": "readTime",
          "type": "number",
          "editable": false,
          "default": false,
          "single": true,
          "hidden": true
        },
        {
          "title": "Word Count (autogenerated)",
          "name": "wordCount",
          "type": "number",
          "default": false,
          "editable": false,
          "single": true,
          "hidden": true
        },
        {
          "title": "Post Language",
          "name": "lang",
          "type": "string",
          "description": "{ [ISO 639-1 Code](https://en.wikipedia.org/wiki/ISO_639-1) }",
          "default": "en",
          "editable": true,
          "single": true,
          "required": true
        },
        {
          "title": "Unpublished DRAFT",
          "name": "draft",
          "type": "draft",
          "default": false,
          "editable": true
        },
        {
          "title": "type",
          "name": "type",
          "type": "string",
          "default": "HEXO/post",
          "hidden": true
        }
      ]
    },
    {
      "name": "HEXO/page",
      "pageBundle": true,
      "fields": [
        {
          "title": "Title",
          "name": "title",
          "type": "string",
          "editable": true,
          "required": true
        },
        {
          "title": "Description",
          "name": "description",
          "type": "string",
          "editable": true
        },
        {
          "title": "Page Image",
          "name": "img",
          "editable": true,
          "type": "string",
          "isPreviewImage": true
        },
        {
          "title": "Publish date",
          "name": "date",
          "type": "datetime",
          "default": "{{now}}",
          "isPublishDate": true,
          "editable": false,
          "required": true
        },
        {
          "title": "layout",
          "name": "layout",
          "type": "string",
          "default": "page"
        },
        {
          "title": "Allow indexing and search for this post's contents?",
          "name": "indexing",
          "type": "boolean",
          "default": true,
          "editable": true,
          "single": true
        }
      ]
    }
  ],
  "frontMatter.taxonomy.tags": [/* ... */],
  "frontMatter.taxonomy.categories": [/* ... */],
  "frontMatter.content.defaultFileType": "md",
  "frontMatter.content.fmHighlight": true,
  "frontMatter.content.hideFm": false,
  "frontMatter.content.pageFolders": [
    {
      "title": "Scaffolds",
      "path": "[[workspace]]/scaffolds",
      "excludeSubdir": true
    },
    {
      "title": "Pages",
      "path": "[[workspace]]/source",
      "excludeSubdir": true
    },
    {
      "title": "Posts",
      "path": "[[workspace]]/source/_posts"
    },
    {
      "title": "Drafts",
      "path": "[[workspace]]/source/_drafts"
    }
  ],
  "frontMatter.content.publicFolder": "[[workspace]]/public",
  "frontMatter.data.folders": [
    {
      "id": "HEXO/data",
      "title": "Custom data",
      "file": "[[workspace]]/source/data/*.json",
      "fileType": "json"
    },
    {
      "id": "sponsors",
      "title": "Sponsors",
      "file": "[[workspace]]/source/data/sponsors.json",
      "fileType": "json",
      "labelField": "name",
      "schema": {
        "title": "Sponsors",
        "type": "object",
        "required": [
          "name",
          "url"
        ],
        "properties": {
          "name": {
            "type": "string",
            "title": "Name"
          },
          "url": {
            "type": "string",
            "title": "URL"
          },
          "description": {
            "type": "string",
            "title": "Description"
          }
        }
      }
    }
  ],
  "frontMatter.file.preserveCasing": true,
  "frontMatter.framework.id": "HEXO",
  "frontMatter.framework.startCommand": "hexo clean && hexo server",
  "frontMatter.preview.host": "http://127.0.0.0:4000/",
  "frontMatter.preview.pathName": "{{year}}/{{month}}{{day}}/{{slug}}.html",
  "frontMatter.taxonomy.dateFormat": "YYYY/MM/dd",
  "frontMatter.taxonomy.frontMatterType": "YAML",
  "frontMatter.taxonomy.seoContentLength": 2400, 
  "frontMatter.taxonomy.indentArrays":true,
  "frontMatter.templates.enabled": true,
  "frontMatter.templates.folder": ".frontmatter/templates",
  "frontMatter.templates.prefix": "",
  "frontMatter.content.draftField": {
    "name": "draft",
    "type": "choice",
    "choices": ["draft", "in progress", "published"]
  },
  "frontMatter.dashboard.content.pagination": true
}

[estruyf]

To add an image, you can click or hover over the image menu and click on the + icon or insert image to markdown (which would need a better description).

[lorezyra]

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:

img: /2022/0926/Life_生活/20-powerful-visuals-about-psychology-life/AdobeStock_267678616_Maslows-needs-pyramid.svg

Got:

img: /source/_posts/Life_生活/20-powerful-visuals-about-psychology-life/AdobeStock_267678616_Maslows-needs-pyramid.svg

[lorezyra]

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.

[estruyf]

@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?

[estruyf]

Probably this will be better:

What do you think?

[lorezyra]

That, or have a big "button" on the preview when user inevitably clicks on the image/video.

[lorezyra]

@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?

I'm not using page bundles exactly... However, the folder structure of my site is more like this:

├── package-lock.json
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── fb.md
│   ├── page.md
│   ├── post.md
│   └── temp.md
├── _config.yml
├── source
│   ├── _data
│   │   ├── calendar.json
│   │   ├── facebook.yml
│   │   ├── github.yml
│   │   ├── instagram.yml
│   │   ├── linkedin.yml
│   │   ├── pinterest.yml
│   │   ├── quora.yml
│   │   ├── reddit.yml
│   │   ├── social.yml
│   │   └── twitter.yml
│   ├── _drafts
│   │   ├── Adobe contract cancellation surprise - fucker
│   │   │   ├── Screen Shot 2022-09-25 at 0.43.28.png
│   │   │   └── Screen Shot 2022-09-25 at 0.44.15.png
│   │   └── Adobe contract cancellation surprise - fucker.md
│   ├── _posts
│   │   ├── Fun_楽しい物
│   │   │   ├── 300-meter-water-slide-is-set-to-unfold-in-Japan
│   │   │   │   └── screen-shot-2015-02-05-at-5-14-30-pm.png.webp
│   │   │   ├── 300-meter-water-slide-is-set-to-unfold-in-Japan.md
│   │   │   ├── 3D-printer-company-asks-clients-not-to-clone-printers
│   │   │   │   └── 10438611_979595022061509_7106094427834826322_n.jpg
│   │   │   ├── 3D-printer-company-asks-clients-not-to-clone-printers.md
│   │   │   ├── Aliens-have-already-landed
│   │   │   │   └── 983630_626170507468821_4744341381714397990_n_626170507468821.jpg
│   │   │   ├── Aliens-have-already-landed.md
│   │   │   ├── American-Twintail
│   │   │   │   └── 10925507_10153052390324320_1894536358567800005_o.jpg
│   │   │   ├── American-Twintail.md

Basically, the page and the article's assets (images, files, video, etc.) are kept with the same name. For example:

• webpage: /2015/0205/Fun_楽しい物/300-meter-water-slide-is-set-to-unfold-in-Japan/
• asset: /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).

[estruyf]

That is an interesting structure. Typically a SSG uses page bundles where a folder includes the markdown file and related images.

For example:

├── source
│   ├── _posts
│   │   ├── Fun_楽しい物
│   │   │   ├── American-Twintail
│   │   │   │   └── 10925507_10153052390324320_1894536358567800005_o.jpg
│   │   │   │   └── index.md

Is this something specific to Hexo or your setup?

In FM, it can:

1. reference images from a page bundle (if defined in the content type), that way it will use the relative path to the article. In the case of this example, it will be: image: 10925507_10153052390324320_1894536358567800005_o.jpg.
2. or from the public/static asset folder

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 _posts folder.

[lorezyra]

This is a HEXO feature. https://hexo.io/docs/asset-folders defines it better. I have the _config.yml parameter post_asset_folder: true set.

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true