Where to host images so that share link has a valid image extension? CSV Product Import

I am in the process of importing my products with the upload template CSV. I have all of my images hosted within our company Google drive, and have added the public share links to my CSV under "Hosted Image URLs."

After importing, though, only a blank square with a grey diagonal slash is visible where an imported photo should be. My guess is this is because my URLs don't end in .jpeg, .png, etc. 

Is there a way to get a link to my images hosted in Drive so that I won't encounter this problem? Is there a different hosting service I should be using that will automatically generate a link with an image extension?

Can you post a URL for one of these images?

https://drive.google.com/file/d/1JUg5lvcdLhuKhxhOKjvqtSGzB0JKRj8T

Use the following URL structure.

https://drive.google.com/uc?export=view&id=1JUg5lvcdLhuKhxhOKjvqtSGzB0JKRj8T

Using search and replace change...

file/d/

...to...

uc?export=view&id=

Let us know how it goes.

Amazing answer !

Would you have any advice for me? I have 100 JPG files and would like to get them automatically added to the CSV file for 100 distinct products, but don't know how do to that efficiently.

Shall I copy them all to Google Drive? How would I then get their 100 distinct random URLs to shove them into the CSV?

@DanielVanDenSchnurtz

Please see the following. The main point is that unless your images are already hosted somewhere then it would probably be faster to do them manually.

9 hours ago, creedon said:

@DanielVanDenSchnurtz

Please see the following. The main point is that unless your images are already hosted somewhere then it would probably be faster to do them manually.

 

Thank you for your prompt answer ! There are hundreds of images, and manual import is not an option 🙂

@DanielVanDenSchnurtz

Upload the files to Google Drive in a folder.

There are probably limits to how much GD can handle at a time so you may want to upload in batches.

Then go into the folder and select the files. Right click and click Share.

In the Share dialog click Change .

Set all the links to share with anyone, click Copy links, and Done.

The links should now be on the clipboard.

From there paste into a text editor to start manipulating the links. They will come over as a comma separated list.

I don't know how many files you can do at once like this in GD. So you may want to work in batches at this step as well. Start of with something like 25 files.

@creedon I can't seem to get this to work for GLB files (need url for model-viewer).

I saw another thread where you referred to this one, but does this only work for images, and do I need another approach for GLB files?

@babrsome

I was able to upload a glb file. I did update the instructions with more detail.

This is exactly what I did, but the model-viewer on the website doesn't seem to be able to read the file.

it works with the link from shopify files (https://model3d.shopifycdn.com/models/........)

But the 

https://drive.google.com/uc?export=view&id=XXXXXXX

doesn't work.

@babrsome

It looks like it might be a CORS issue. I just tested trying to load a glb from Google Drive and got the following.

Digging a little deeper it appears that Google is redirecting some or all drive url requests to another server. Apparently CORS is not robust enough to deal with the redirect down the line. It's interesting as the first server indeed is not set up to allow all comers as far as CORS is concerned. The second server is set up to handle all comers per CORS.

I don't have a solid handle on all the ins and outs of this mess so take everything with a grain of salt.

You'll need to find another server/service that doesn't have an issue. Dropbox perhaps? I did test Amazon S3 and was able to get a test file to work there after setting a CORS policy. But that is not on most people's list of go to file server, services. S3 is for the very technically inclined but it works great when configured properly! 🙂

On 6/16/2021 at 3:44 AM, creedon said:

@babrsome

It looks like it might be a CORS issue. I just tested trying to load a glb from Google Drive and got the following.

Digging a little deeper it appears that Google is redirecting some or all drive url requests to another server. Apparently CORS is not robust enough to deal with the redirect down the line. It's interesting as the first server indeed is not set up to allow all comers as far as CORS is concerned. The second server is set up to handle all comers per CORS.

I don't have a solid handle on all the ins and outs of this mess so take everything with a grain of salt.

You'll need to find another server/service that doesn't have an issue. Dropbox perhaps? I did test Amazon S3 and was able to get a test file to work there after setting a CORS policy. But that is not on most people's list of go to file server, services. S3 is for the very technically inclined but it works great when configured properly! 🙂

Thanks for the diagnostics !! Will leave Google Drive then :-). A nice loss to experience.

@creedon Sorry for making you revisit this topic, but I am having the same issue with uploading my glb url using both Dropbox and Google Drive. Obviously, I have run into the same CORS policy error. I was wondering if you could shed some light into how you did the amazon s3 workaround? 

Site URL: https://chiton-emu-rrb3.squarespace.com/

Hello, 

I am trying to use the open source <model-viewer> code to upload an interactive 3D model to my website. I have successfully integrated the model viewer with an example model that is hosted on their server that doesn't run into any CORS policy errors. However, when I try to change the "src=" to my own url for my own glb model using both Dropbox and Google Drive, I run into the dreaded CORS policy error. I am not entirely sure how to get around this error without using js and setting up my own proxy server (which I have no idea how to do anyways).

I saw elsewhere that someone successfully circumvented the CORS policy by using Amazon S3? I was hoping someone could shed some light on that workaround so I may use it myself. Thank you so much!

@creedon Never mind! I have figured it out and my model runs perfectly! This is such an amazing workaround, thank you so much for the idea!!

Greetings,

New to the forum.

@creedon

Is there a reason why we can't host our glb and usd files directly on our squarespace site?

3 hours ago, caiphus said:

Is there a reason why we can't host our glb and usd files directly on our squarespace site?

I don't work for SS so I can only give you my opinion. The reason is simply that glb files are a very niche file type so it is simply not on SS's radar to support them.

Just following on alfredyay's post. 

I've also been looking at how to get a valid URL to host a .glb using squarespace and its seems that amazon s3 is the best way to do it. 

Does anyone know the set up in s3 required to make the .glb run. I.e. the permissions required on both the bucket setup, permissions on the actual .glb file and any cors permissions (or other factors)

I'm pretty sure the code set up I have is fine on the squarespace site as I can get the default dev model astronaut to appear. I've also managed to set up a poster images via an s3 url and that loads ok - it's just the .glb that I can't get to load. 

The .glb works on the model editor tester too. 

Any advice most appreciated. 

Actually managed to get this to work using this very good video

https://drive.google.com/uc?export=view&id=14FnDbQ1o2YNMo8J5lqOJH7JeU2pQVIvH

I have made changes to the url as suggested above and my images still will not appear after completing a csv product import.  Is there something else that I need to do to my import to update the images that we are hosting on google drive.  Thank you Nadine