New tutorial: CMS Galleries made easy

Community resources Webflow Tips
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/

12 Likes
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: Import CSV to Webflow - Google Sheets
  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: - YouTube

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

2 Likes
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.

2 Likes
9

I shouldn’t post BEFORE coffee.

3 Likes
10

Yuhu, i have a problem :partying_face:

The scrollbar is jumping to the middle when i click on a image :cold_face:
What can i do??

and another question. Is there a way to give the pictures ALT-texts?

Here is a video of my problem -----> click me

READ ONLY LINK
https://preview.webflow.com/preview/smart-stone-de?utm_source=smart-stone-de&preview=c272d85e901232ba37478c27e3f8bd6f

11

Hi Guys,
So I have just finished designing this amazing work around on my site but I am slightly confused.
I am sure it is a very easy solution.
If I am using this CMS gallery but want the photos to match the page, (as of course, every page is going to have to hold different photos) how can this be done? Collections are limited to 20 (40 business plan) so does that mean i have to limit my project like webflow limits our designers?

12

Great tip!! I am curious when you are doing a blog style cms how can you allow the customer to upload several images with ease? Can it be done with this method?

I will creating a collection for events and those events have several images that need to uploaded and displayed in event.

13

Hey Chip, saw your vid yesterday and didn‘t know alot about wrapping cms children in such a cool and simple way :+1: - thank you for this good content - most of cms content on youtube sucks :joy:

I would appreciate more of this tricky cms videos :+1:

Greets from Graz, Austria
Wolfgang

1 Like
14

Thanks Wolfgang, glad you liked it. :slight_smile:

1 Like
15

I’m at a loss in relation to the issue brought up here. Why isn’t there an easier way to create a CMS gallery (ie. for like a “gallery” webpage) that can show 100+ images without it needing a collection where each image is its own item. I feel like the multi image feature should apply to this scenario, but it wouldn’t work in this case and the 25 image limit would also make this a hassle. Trying to determine in cases where clients want to continually upload new images to a website gallery page with lightbox, what the best solution is. Pretty simple feature…

1 Like