decaporg / decaporg/decap-cms

Extra parameters being added to frontmatter urls

Open
#7,421 0 comments 0 reactions 0 assignees View on GitHub
area: media-library type: bug
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

Searched for similiar expanations and not found very much specific to this. Thought i'd try and report it as its baffling me to annoyance.
Hopefully this makes sense and not being an idiot and missing something i should have spotted weeks ago.

**Describe the bug**
When adding an image to a post, or loading an image from library, it displays fine in editor, but the preview panel adds HTML parameters which aren't visible in browser or terminal output, a example from editing the HTML element in Inspector:
``

From the terminal running Decap server:
```
error: Error handling {"branch":"master","action":"getMediaFile","params":{"branch":"master","path":"assets/images/25388715424_65480dbf18_k.jpg​​​​‌‍​‍​‍‌‍‌​‌‍‌‌‌‍​‌‍​‌‌​​​‍​‍​‍‍​‍​‍‌‍‍​‌‍‌‌‌​‍‌‍​‍​‍‌‌"}}: ENOENT: no suc
h file or directory, open '[snip]\assets\images\25388715424_65480dbf18_k.jpg​​​​‌‍​‍​‍‌‍‌​‌‍‌‌‌‍​‌‍​‌‌​​​‍​‍​‍‍​‍​‍‌‍‍​‌‍‌‌‌​‍‌‍​‍​‍‌‌'

```
Strange that the error reporting doesn't show the ZeroWidthSpace, but I guess its sanitizing its output like browsers do?

**To Reproduce**
1. Create a new post
2. Add a image
3. Look at preview window
4. Inspect the image, see console error.

**Expected behavior**
The image appears in the preview window and no errors present in console or terminal

**Screenshots**
[issue image](https://deajae.co.uk/assets/images/zerowidthwhitespace-oddity.PNG)
**Applicable Versions:**

- Decap CMS version: 3.0.0
- Git provider: Github, but local with Decapserver running.
- OS: Windows 10/11
- Browser version Chome/Firefox

- Node.JS version: 18.18.2

**CMS configuration**
```
# when using the default proxy server port
local_backend: true

backend:
name: github
repo: DeaJae/[repo-name] # Path to your GitHub repository
# optional, defaults to master
# branch: main
site_url: http://localhost:8080/
# publish_mode: editorial_workflow
media_folder: "/assets/images/"
public_folder: "/assets/images/"

collections: # A list of collections the CMS should be able to edit
- name: 'posts' # Used in routes, ie.: /admin/collections/:slug/edit
label: 'Posts' # Used in the UI
label_singular: 'Post' # Used in the UI, ie: "New Post"
description: >
The description is a great place for tone setting, high level information, and editing
guidelines that are specific to a collection.
folder: 'posts'
# slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
# slug: '{{slug}}'
summary: '{{title}} -- {{year}}/{{month}}/{{day}}'
create: true # Allow users to create new documents in this collection
# path: '{{slug}}'
editor:
visualEditing: true
view_filters:
- label: Posts With Index
field: title
pattern: 'This is post #'
- label: Posts Without Index
field: title
pattern: front matter post
- label: Drafts
field: draft
pattern: true
view_groups:
- label: Year
field: date
pattern: \d{4}
- label: Drafts
field: draft

fields: # The fields each document in this collection have
- { label: 'Title', name: 'title', widget: 'string', tagname: 'h1' }
- { label: 'Draft', name: 'draft', widget: 'boolean', default: false }
- {
label: 'Publish Date',
name: 'date',
widget: 'datetime',
format: 'YYYY-MM-DD',
default: '{{now}}',
}
- { label: "Permalink", name: "permalink", widget: "string", default: "{{slug}}" }
- label: 'Cover Image'
name: 'hero'
widget: 'image'
media_folder: '/assets/images'
public_folder: '/assets/images'
required: false
tagname: ''
- {label: "tags", name: "tags", widget: "list", default: ["posts"]}
- { label: 'Body', name: 'body', widget: 'markdown', hint: 'Main content goes here.' }

```

**Additional context**
I had lots of trouble following the config guide, but eventually got image library paths and fields working correctly.
Tested frontmatter fields being quoted, unquoted, changed paths, all resulted in the same issue.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.