Adding cms images to showcase artwork

Design help CMS
1

Im working on a comic con site that will have guests with bios and a few pics of their work. I want to set this up with the cms. I’m seeing that you cannot have Cms-driven lightboxes or slideshows.

What would be the best way to add the guests’ images to the collection and have them show up on their respective pages? I don’t want to just slap the images on the page without having a way to cycle through them or at least zoom in on them. Is this possible?

2

Its not possible to use the current light box for CMS. It is however possible to install a third party lightbox to get your desired effect.

Hope it helps,
Ben

3

Thank you for pointing me towards SimpleLightbox, it looks like that would work. I’m still a bit list on how it would work with the CMS? Would you know how to tie SL into the CMS so that it would pull the 3-5 images per guest from the CMS? Or would I need to add a Rich Text field to each guest and repeat the html for each guest?

4

Hey @JustJoe, sorry for the late reply was at the Google Summit yesterday and didn’t have much time for anything else.

Lets dive in.
Working preview: CMS Gallery “Note: the images may not match up as it is dummy content generated by webflow”

What I did was install the needed code:
HEAD

https://cdn.rawgit.com/dbrekalo/simpleLightbox/3eecd244/dist/simpleLightbox.min.css

BODY

https://cdn.rawgit.com/dbrekalo/simpleLightbox/3eecd244/dist/simpleLightbox.min.js

SCRIPT

$('#INSERT-ID a').simpleLightbox();

Obviously where it says INSERT-ID that will be whatever you decide to call your gallery.

I created a gallery collection but you can just add images to your current collection and should work the same.

I would recommend creating a dedicated gallery collection and then using reference filters on the collection within the template page to sort which images to show on each guest page.

You will need 2 fields, one being an image field and the other a file field. Upload the same image for both fields.

On the desired page you want the gallery, drag the CMS collection element onto the page. Link it to you gallery.

Go to your navigator and select the “Collection List” give it an ID. Whatever ID you give is the same that should be put in INSERT-ID in the jQuery.

Once you have that then add a link block to a collection item and point it to the file (The paper clip icon). Then drag an image element into the link block and get image from collection.

Then save and you should be good to go.

Hope this helps,
Ben

5

So…I got it for the most part. I was able to get the thumbs to come in from the gallery but when I click on the image it takes me to a new tab with the image. It works like a link instead of a lightbox, in other words. Also, I may be wrong here but I was setting this up on the Template page created by the Guests collection. i wanted to use a reference filter and do something like “current collection item” but I don’t think that’s going to work. Would you be able to look at the read-only link for this and see if I"m missing something else?

https://preview.webflow.com/preview/hccc?preview=3932c4d3e97bd71948247534a117f228

6

It isn’t working as you haven’t installed the code properly… I wasn’t able to add the html as it is in </> tags… What I will do is add it without the closing > and you will have to add that in.

This goes into the head section of custom code:

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/dbrekalo/simpleLightbox/3eecd244/dist/simpleLightbox.min.css" /

This goes into the body section of custom code:

<script type="text/javascript" src="https://cdn.rawgit.com/dbrekalo/simpleLightbox/3eecd244/dist/simpleLightbox.min.js" </script

Don’t forget to add “>” to the end of the href, script and the script src

That should get your gallery working properly. Not entirely sure what you mean with the current collection item but I would add a reference field in the gallery referencing the guests that way any photos you add to the gallery you can link to the guest. then on the guest template when dumping the CMS gallery you can filter it to reference “EDIT: You have already done this :yum:”.

I really hope that makes sense, my brain works like a spider web.

7

Also you will need to wrap the jQuery in < script > tags

8

Hey @JustJoe,

If you haven’t already, it’s best to search the forum for solutions first.

Here’s a good workaround Full CMS Lightbox! and Creating a Dynamic Slider in Webflow

Best,
Naweed

9

Thank you! I don’t know how I completely missed having to wrap the code in tags. I have it working now. As far as what I meant by filtering the guests, I’ve set up the working lightbox on the Collection Page for guests, and in the gallery collection I added an Option field to be able to assign each image to a specific guest. I’m wanting to use that option field to then filter the images that are pulled into the gallery to only show the current guest on that guest page. When I go into filter, I don’t see the option for “current collection item” which is what I thought I needed to do to pull the images from the gallery for the current guest. I don’t really know how to explain it but I can’t figure out another way to only pull the images that are assigned to the specific guest.

10

Ok I would remove option field from the Galleries Collection and use a reference field instead. Set the reference to Guests and you should be good to go. Then when it comes to filter, you can filter it to Guest reference Equals Current Guest.

This should give you the desired result. I also added a video showing what you how to do it.

Video Explaination

Hope it helps,
Ben

1 Like
11

Thank you so much! It worked perfectly!