Join GitHub today
GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
GitHub svg media library preview support #954
Conversation
Jinksi
added some commits
Dec 21, 2017
|
Deploy preview ready! Built with commit 70c3090 |
|
Deploy preview ready! Built with commit 70c3090 |
|
Info on |
|
This is awesome, thanks @Jinksi! |
erquhart
added
area: media-library
status: 4-merge
labels
Dec 30, 2017
|
@erquhart Can you double-check this in Safari? According to MDN, EDIT: CanIUse does show Safari support? https://caniuse.com/#feat=urlsearchparams |
| - return { id: sha, name, size, url: download_url, path }; | ||
| + const url = new URL(download_url); | ||
| + if (url.pathname.match(/.svg$/)) { | ||
| + url.searchParams.append('sanitize', true); |
tech4him1
Jan 1, 2018
•
Edited 1 time
-
tech4him1
Jan 1, 2018
Collaborator
-
Jan 1, 2018
MS Edge does not support searchParams, and it seems to break the entire media library if a single SVG is added.
- Upload other images -- media library works normally.
- Reload CMS page -- works normally.
- Upload SVG -- preview does not load, other image work.
- Reload CMS page -- all images missing.
tech4him1
Jan 1, 2018
Collaborator
It looks like Edge will support this in v17: https://caniuse.com/#feat=urlsearchparams. We normally support two versions, though, so it's not practical to just wait until it is released.
tech4him1
Jan 1, 2018
•
Collaborator
These should be equivalent, and the second supported in all our browsers:
url.searchParams.append('sanitize', true);url.search += (url.search.slice(1) === '' ? '?' : '&') + 'sanitize=true';
|
@tech4him1 this was updated, can you merge if you approve? |
tech4him1
merged commit b8c411c
into
netlify:master
Jan 4, 2018
|
Works great! There is a rendering issue in Microsoft Edge, so I've opened a separate issue for that: #983. |
Jinksi commentedDec 21, 2017
- Summary
In the media library, SVG media loaded from https://raw.githubusercontent.com was unable to be displayed due to github's response content-type set to text/plain rather than image/svg+xml.
Appending a
sanitize=truequery to the url allows github to return the correct content-type.- Test plan
Example working SVG preview:
- Description for the changelog
Enable SVG preview in media library.
- A picture of a cute animal (not mandatory but encouraged)