liquidnft / lnft

Liquid NFT Platform
GNU Affero General Public License v3.0
56 stars 23 forks source link

SVG Artwork uploads, but SVG image shows as image broken in card.. this is front page only #23

Open Eskyee opened 3 years ago

Eskyee commented 3 years ago

a SVG uploads ok, and showed on page ok product page, but the image shows image link broken in card.. front page only!!

also Adam is it possible get a list of compatible formats. for upload on Raretoshi as I can't seem to find.. also is zip file possible ?? And is there a max mint limited on artists accounts ?? also upload size limit ??

also when im doing multi editions minted, 1/50 can we group them on front page under a artist ??, as to make market page look cleaner.. with Artists drops.. I dig the code and see if I can understand more!!

just testing out some formats MP4, bitrates, etc

but does wave or MP3 listed as a format, or just MP4 lossless, AAC ?? etc etc

cheers @asoltys

asoltys commented 3 years ago

I've only tested with JPG, GIF, PNG, MP4. There's some code that runs on upload that attempts to process the file and produce a thumbnail version for use on the markets page. It runs the images through sharp and mp4s through ffmpeg. It could probably be expanded to handle more formats.

Eskyee commented 3 years ago

Cheers Adam I do some more testing today ☕️ ✅

Eskyee commented 3 years ago

I discovered why SVG file not showing in front page,

api/public path seems ok with my other assets, but not SVG ?? api/ipfs path seems to shows ok and because of a "filetype" .svg+xml is getting added to the end of asset filename. and breaks the path of ipfs file location..... I'm just guessing here! Also this does not seem happen to my other assets types. just SVG I so far discovered.

still working on a fix, only once I understand more about svelte. I`m sure you may understand why this happens @asoltys

or did it miss copying my ipfs file to location api/public ?? jus Thinking out loud for now. as you mentioned above "There's some code that runs on upload that attempts to process the file and produce a thumbnail version for use on the markets page. It runs the images through sharp" https://sharp.pixelplumbing.com This module supports reading JPEG, PNG, WebP, AVIF, TIFF, GIF and SVG images. looks good @asoltys https://www.ffmpeg.org nice!

try { if (ext === "gif") throw new Error("Can't process gifs");
if (ext === "mp4") { await createFragmentPreview(s2, s3, path); } else { let ws = fs.createWriteStream(path); let t = sharp().rotate().resize(1000).webp(); s2.pipe(t).pipe(ws); }

broken path:

Screenshot 2021-08-19 at 04 42 12

my test sample svg asset, the correct path:

Screenshot 2021-08-19 at 04 52 52
Eskyee commented 3 years ago

So now I discovered why, svg+xml get shown as a broken image..

I get on the header file.. when i look.

Request No request headers

Response No response headers

& the Correct response should be

Response

MIME Type image/svg+xml

Resource Type: lmage

So This is the broken MIME TYPE: shown below we are given for a SVG file.

application/octet-stream Resource Type Image Location Full URL https://any name.coinos.io/api/public/

Back to study and see how I fix it now 😂🍻

Quick up date...☕️

To change the Content-Type header that a web server sends for a specific file, you should be looking in your web server's configuration manual.

Got my 🔦 🕳

https://www.nginx.com/resources/wiki/start/topics/examples/full/