Wix CMS collection photo from url not working

Ask the community
,
1

I’m having trouble with
I am trying to have the photo values in my collection reference a file on my google drive using the url so I don’t have to manually go and upload the photo from my drive. the collection is growing rapidly with each google form submission and it’s getting out of hand trying to keep track of all the submission files.

here is an example of the image i want to be used
”https://drive.usercontent.google.com/download?id=13OTMmZUugM90DszuFhqjibiRGUqnXS1D

how can I get my cms collection to properly reference the links so I can stop manually uploading the files one by one and the site can just automatically load in the image without uploading it to the wix media files?

2

ok, so what field type are you saving this link in ?

you may need to save it in a text field and then set the image src with code.

or maybe there is a way to automate it straight from google forms with some backend code.

3

image
image246×211 6.96 KB

I was using an photo field. and it offers to use a url. but it’s just not working.

4

I believe that URL needs to be from the Wix Media Folder.

5

ah. so would I need to code something in order to grab that photo from the google drive folder and apply it to the image renderer? probably doesn’t make it any better that this is for a dynamic page.

6

yes. will need to be coded. shouldnt be an issue if its a dynamic page as the code will be updating a CMS text field, so it can be applied to a repeater.

Also need to make sure the google drive file is public and use the /uc? file links.

7

There’s no need to use a text field for this, nor does the image specifically have to be a Wix Media image. Any external image can be linked to your image field using it’s URL, and it should work just fine and show up on your dynamic pages as expected.

But Google Drive doesn’t directly provide a properly linked URL to a file stored on it, so you need to edit the shared URL yourself in order for the file to display outside of Google Drive.

All you need to do is simply use this URL format:

https://lh3.googleusercontent.com/d/FILE_ID

The file ID of the example image that you provided is: 13OTMmZUugM90DszuFhqjibiRGUqnXS1D

So before adding it to the CMS, simply change your URL to: https://lh3.googleusercontent.com/d/13OTMmZUugM90DszuFhqjibiRGUqnXS1D

Apparently you can use lh4 to lh6 as well

And that’s it. Your image will now show up in the CMS and on your site’s dynamic pages.

Remember - the file is still hosted on your Google Drive, so make sure that the image file you want is shared as “Anyone with the link” or “Public on the web” and then grab the file ID from the sharing link that is located between /d/ and /view

Using this method, if you want to generate thumbnail images or fetch the image in a sepcifc size, you can do so by simply adding the desired width and height at the end of the URL, for example =w100-h100

e.g:
https://lh3.googleusercontent.com/d/13OTMmZUugM90DszuFhqjibiRGUqnXS1D=w100-h100

which will return a 100x100 image. You can just use “w” or “h” on their own, aspect ratio should be maintained.

For this, you can write code inside a data hook that triggers whenever a new item is added to the CMS, and have the code automatically convert the sharing URL to the display URL, thus saving you time.

1 Like