New Multi-Image Field and Lightbox

Hi there,

I was hoping to take advantage of the two recent updates, the multi-image field and lightbox support in collection lists. I realize now that I can’t connect a CMS multi-image field with a lightbox. Is there a solution to this that I’m oblivious to?

no-fiels-to-connect

I did find that it’s possible to connect a multi-image field on page templates, but I’m at a complete loss on how to connect my CMS lightbox galleries on my page template to galleries on my actual page.

My ultimate goal is to create separate “before and after” lightbox galleries (using filters). One gallery for the client’s “before” and a separate gallery will display their “afters”. So each client will have two lightbox galleries each. I’m doing all my testing on the page named Epoxy Flooring.

Share Link:
https://preview.webflow.com/preview/millennium-construction?utm_medium=preview_link&utm_source=designer&utm_content=millennium-construction&preview=907ceca4a2bac07100ceccff9a88c04a&pageId=5d2e6890dd9e6a16ef594438&mode=preview

Thanks in advance! Your expertise is very much appreciated :slight_smile:

1 Like

Hi @danpon, Welcome to the forum.

Right now, you can only display a multi-image fields child images on a template page for the parent collection.

So how could you have before and after galleries on a collection template? Two multi-image fields in your collection instead of one would work. One for before, one for after. Then in your template, bind to the appropriate Collection field.

Let me know if that approach works for you.

1 Like

Thank you for the suggestion. I will give this a try tonight.

Hi webdev,

I created two multi-image fields in the Epoxy Flooring collection, one for before and the other for after. I like this approach - thank you!

I’m still confused as to how I can display these multi-image fields on my static page and then filter them by the “Client” field (Option Field). As we established, displaying multi-image fields directly from the CMS collections is not possible on a regular page, only on page templates. How do I connect my static page to my page template so I can make use of the multi-image field on my site?

I can’t help but think I’m missing a fundamental step here.

There lies the problem. Multi-image fields can only be displayed on a collection template page; within a child collection list. You can’t use them anywhere else at the moment.

Hi @webdev,

Thanks for the response. If I understand correctly the multi-image field is not something that can be used on a live site at this point, and I should continue to use single image fields. Can you confirm? I’m confused by this, but I’m ready to cut my losses and move on unless there is some other method that you can suggest.

My client has hundreds of images, so I’m looking for any possible solution to take advantage of multi-image fields.

Dan, you can see on your “Epoxy Floorings Template” that you can use multi-image fields, since you are. You just can’t use them on regular “Pages”, just your CMS template pages.

Currently the only other options you have would be to use Custom Code (AJAX) to pull a gallery into another page from a collection page.

Or you may want to look at Cloudinary.com. With that CDN / Digital Asset Manager, you could tag images you upload, then display them with a simple Custom Code embed referencing your “tag”, anywhere on your site. This would be responsive as well. I am available for implementations.

1 Like

@webdev I’m glad to hear there is hope. I’ll review both these options tonight, and I’ll be sure to reach out if I get stuck. Thank you!

Dan

Hi,
I am struggling with this too. I am on the CMS template page but can’t seem to pull the images from the “Multi-Image” field into the Lightbox. It merely gives me the option to pull a single-image that I am using as a thumbnail for the homepage:

Clearly I am missing something here :confused: any help is greatly appreciated!! Thanks.

https://preview.webflow.com/preview/werden-be24ed?utm_medium=preview_link&utm_source=designer&utm_content=werden-be24ed&preview=d97b134af34455ebc4bc49ad41b6912b&pageId=5e8b0b04eaa7852ca1d76218&itemId=5e8b0b7291d32c00beffff3f&mode=preview

A multi-image fields contents are accessible in a child collection on the collection template page. See video below.

1 Like

Hi Jeff,
Do you know why multi-images can’t be loaded on regular pages? It seems something simple.

I have a collection of projects, each project has the Main image, name, and multi-image.
My plan was simply to present a list of projects and then click on it should present the other images. There is no reason, in this case, to use the template page so do you think there is a way to make this work?

Is important that my client only use the CMS to upload the content.

Thank you very much in advance!

Please check at Projects page in my read-only link

Because that feature is only available on the CMS template and not regular pages. It’s a current limitation. You can display the images of a Multi-image Field on its Collection page by adding a Collection List on that page and connecting it to the Multi-image Field.

I had to build a workaround before and ended up using hosted images from another provider. Was not an issue since I maintained the content. Don’t have an easy solution for you. I will double check my project collection to see if there is one I forgot about.

1 Like

Thanks Jeff!

If I just place the images on the Template Page (in a Slider maybe), there is a way to pull to a Modal with Ajax, or something like this?

Conceptually yes. I just gave up using Webflow for image galleries so I did not investigate it further. The big issue was no dynamic generation of thumbnails used for lightbox images and no ability for captions from Multi-image fields. There are also touch / mobile issues with Webflow’s lightbox implementation.

I still display galleries on Webflow sites but the content is not using any Webflow components nor the CDN which I completely replace choosing to use image hosting providers like Cloudinary or Imgix where I can dynamically generate the images. I normally use Fancybox3 for the lightbox.

2 Likes

Understood…
I will post here if I discover something good.

Thank you very much.