Importing multiple images to CMS via CSV file

Hi,

I need to upload 100’s of images to a Collection where each record is an image name and the image itself. Is there a way of doing this via a CSV and if so, what do I put in the ‘image’ field? I’ve tried referencing a URL of the image location but when it comes to mapping the field during upload, I can’t map to an image type field as the CSV field contains a URL.

What am I doing wrong?

thanks


Here is my public share link: https://preview.webflow.com/preview/fermoy23?preview=7b4be4c3569caecf811d2dac303d21e8

Could you provide screenshots/video recording of what you are trying to do, as well as post a link to the CSV file you are trying to import?

Hi,

I want to use a CSV file to import a lot of images into a CMS Collection that has 2 fields: Image Name (Text field), Image Link (URL).

On the Webflow University page (Import/export CMS content | Webflow University) you say
“Image field - images should be added as direct URLs (links that end in an image file extension) in your CSV. Only images with any of the supported image file types will be imported into your Collection.”

However, when uploading, I’ve tried uploading the CSV and mapping the Image URL field to the CMS Link field, but that doesn’t pull the image into the CMS.

I’ve attached a view of the CMS record after import and also the CSV.

Any help would be great - thanks!

That isn’t an image field in your collection. I think it needs to be an actual image field.

Hi Sam,

That’s exactly the point I made in my first email. If I make the CMS field an image field, then it won’t map to a URL in the CSV file (See attached screen clip).

So can you please tell me how I create a CSV file with URLs of the images that will then map to an image field in the CMS? It doesn’t seem possible to me…

I have 100’s of images to upload so creating each record individually isn’t really an option.

thanks.

Capture

1 Like

Hi @starfish,

The image url in the CSV has to point to an image file that is already hosted on the internet, and not from your local computer.

This is because Webflow will access the URL and download the image. They cannot use that link to reach your computer, as that is a local link only valid on your computer.

2 Likes

A post was merged into an existing topic: Importing images to CMS collections items using ZAPIER

Will dropbox share links work? Is webflow going to take that image and host it into itself so if my dropbox share links are disabled, the image won’t be broken on the website?

You can host your images in Google Drive and use an Add On called Drive Explorer (free for one sheet, don’t waste it) to generate hard links to the images. It works.

4 Likes

Hey @samliew, do you know if it’s possible to automate multi images from form submission to CMS collection item through Zapier? I can’t make it work. I have 6 different file upload fields, but I’m not sure how should I format it on Zapier so it recognizes all those images as a multi image field. If in Zapier I link 1 of them, it works, but as soon as I add more than 1 than there’s no data going to webflow.

Thank you!!!

Does Webflow then import those images into a project’s Assets library?
Could one also theoretically import images into Webflow and then get the URL from Webflow’s server? What’ll happen then, will it re-import another copy of the images?

3 Likes

HOT TIP! Make sure your image or folder is shared first! I I was experiencing a behavior where the image would “flash” in when trying to import and then I would get a message the link style was broken. I just changed the folder to “anyone with link can view” and it worked!

@shawncarrie

Nope. It straight loads them to the asset CDN.

Yep, a manual process. Never tested myself as that would be too much work.

Now you would have two.

Having this same issue, where the images will flash up when mapping to existing fields, and then say the link is broken.
The folders and files are all set to “anyone with link”.

Does this Drive add on still work for obtaining hard links to images and importing via csv?

1 Like

Hey @J_Rud I’m not sure (haven’t done this in a while). From what I remember I had to find the “right” link using Drive Explorer extension. They give you a few… thumbnail, direct download, etc. Trial and error hope that helps.

It would be cool if Webflow had a way to copy the already-hosted-elsewhere images to your local Webflow CDN, same as if you uploaded them manaully when entering the Collection item from scratch.

EDIT: After actually doing an import, all imported images that need third party links to where they are hosted at the time of import, do get uploaded and hosted from Webflow’s CDN. So on your Webflow website, the URL’s to any imported images will be to Webflow’s CDN. Which is very cool.

After you imported and uploaded the assets to Webflow’s CDN, were the links automatically updated in your content to point to Webflow’s new CDN URL for each asset? My assets are currently hosted in WordPress. Once the migration to Webflow is complete, I plan to retire the WordPress server along with all the assets it currently hosts. Thanks!

Yes, so in your CSV, if you have an image field, two things happen:

  1. The image itself gets uploaded to Webflow’s CDN (same as if you manually updated it)
  2. The URL to that image gets updated from the original third-party URL to the new Webflow CDN URL.

I just uploaded 150 images to Webflow CMS, every image is a separate record (collection item).
Steps:

  1. Create a base in Airtable with two fields: Name (Text), Photo (Attachment)
  2. In Airtable in Gallery View darg your Photos to add to the gallery and choose: Create {X} {Records}, Each project will have one attachment

  3. In Airtable go to table view and Download CSV
  4. Create a new Google Sheet and import CSV from Airtable
  5. Add one column left from the URL and apply this formula =REGEXEXTRACT(A1, “((https?://[^)]+))”) to extract URL from () brackets
  6. In Google Sheets go to File/Download/.csv
  7. Go to Webflow CMS and start CMS import. Map the second column with the URL to the Webflow image field and hit import!
  8. Enjoy!