Streaming live at 10am (PST)

New tutorial: CMS Galleries made easy


#1

Hey folks, I’ve uploaded a new video tutorial on how to use CMS to create multiple customer editable galleries using CMS and Webflow’s own lightbox control. I used some information shared by Travis Orams @oramsdesign (thank-you Travis!) and added some other stuff which I hope you find helpful.

Here’s the webflow project
https://preview.webflow.com/preview/gallery-cms-example?preview=df77f308ea47e81acb90ee2c7ac1eaa6

and the site:
http://gallery-cms-example.webflow.io/


Gallery Page Issue
#2

Dear Chippwalters,

Thanks for the video, really like it and it is very clear. The only problem I still have is how do I add 150-200 images to my collection? I already contacted Webflow about this and can’t believe that creating simple gallery is that hard!

I don’t wanna add each image manually and set a fantasy name for it (as field “Name” is required) and uploading them first somewhere, get each picture’s url, paste in a CSV and import via CSV seems also pretty strange and especially time consuming.

Do you have any solution found for that issue?

Best,
Stefan


#3

You need to separate your galleries into different collections. Each collection can have a maximum of 100 items. HTH.


#4

Dear Chippwalters,

Thanks, but that is not what I mean. :slight_smile: - No issue with the 100 items max. of each collection. My issue is how to get these 100 items in there? Don’t wanna do it manually. Importing CSV file with 100 different urls is technically doable, but still not very convenient.

So my question was: Could you figure out an easier and faster way than I described to bulk-add 100 images?

Thanks,
Stefan

P.S.: Little trick for you - after you uploaded an image to Assets (in your case that transparent 800x800 pixel PNG), you can click the gear icon when hovering that image and next to the file name you have a url icon. Click that and the image opens in a new tab and you can copy the url. Saving you few sec this way by not having to add+remove it anywhere in the designer. :sunglasses:


#5

OK, after a long day yesterday I finished my galleries (really ridiculous Webflow makes us wasting time like this!) and added 267 images via following approach to ONE collection (there is no max. of 100):

  1. Exported <1 MB images with Lightroom with running numbers. (Use 01, 02, etc. otherwise sorting is screwed up).
  2. Put ALL files in one folder and uploaded them to my web space
  3. Created this Google Sheet file: https://docs.google.com/spreadsheets/d/1FmZIEdaomhI_L9gfO1AeKECKn7qYmbZ6CdZmJdb_rpA/edit?usp=sharing
  4. Exported the Google Sheet to CSV and imported to Webflow CMS by matching fields

So far so good, only one issue that is left with this hack and also another hack is the following: On my iPad the big image is not full size. It’s like 40% width of what it could be and therefore not much bigger than the thumbnail.

I have this issue on SOME iOS/iPad devices with Google Chrome AND Safari. I Recorded a video here: https://youtu.be/jQb3xAktJ5s

Page showing in the video: http://idext.webflow.io/gallery-dont-delete
Read only link: https://preview.webflow.com/preview/idext?preview=52b09780276c8273d0b6b78678ec33bb


#6

I meant to say you can only display 100 at a time. Of course you can have more than 100 in a collection, but if you try and display them all at once–it will limit you to 100. I hope they can have lazy load sometime in the future.


#7

In what particular situation? I’m under the impression that the max amount of items for a CMS hosting is 2000 and they can be in one single collection.

vlf96

(btw great tutorial, thanks!)


#8

Each Collection LIST can only display 100 items.


#9

I shouldn’t post BEFORE coffee.