Creating a gallery from your blog posts using Webflow

Every now and then you will be challenged by Webflow to get something in specific done. With all the tutorials, and libraries of code you are almost able to do it all in Webflow.

A few weeks ago, I was working on a Webflow website for a fashion blogger, and her stuff was really high-end. In this project, she wanted all those photos she has been posted on her blog, to be displayed as a gallery, as so many people want to see her photos in full screen.

So here is what I did to make this happen:

1. You have to create a CMS collection
2. Create a new page, entitle it ‘Gallery’ or whatever you want
3. Add your nav, footer and anything else you need to make it look like the rest of the website
4. Add a new section – let’s call it Section (please always name your sections and divs properly)
5. In this section we are going to add a container (div class=Mycontain) or you can use Webflow’s default container
6. Now we want to create a wrapper for this gallery – So go ahead and do this as another div block
7. Head over to add element and drop a collection list inside the wrapper. You can make this flex-box, so they can show side-by-side
8. Choose all your settings from where the collection list will be pulling content from.
9. Now, Inside of the collection list, let’s drop another div block where we will place this code as a HTML embed
10. Once you have pasted this code, where you see image, choose the collection item you want to display. And then Group, is so you can group them all together for the lightbox display.

—-if you have multiple images —

1. Duplicate step 9, and change the code where you have, let’s say image-1 to image 2

You can do this if you have more images as well. Now, you need to edit your CSS so it shows as 3 or 4 columns in desktop, 3 columns on tablet, 2 on a smaller device and most likely 1 column for mobile. Use percentages for this.

Now, I thought that was it, but the lightbox would not display. So I learned that this was because I did not have it any where else on the website. So what I did was to create a new page and add my lightbox element there.

<a class="w-inline-block w-lightbox" href="#">
  <img src="image" />
  <script class="w-json" type="application/json">
    {
      "group": "(your-group-name)", "items": [{
        "_id": "57e0683ebfc7a6d0523235b2",
        "cdnUrl": "(image-field)",
       "type": "image",
       "url": "(image-field)"
      }]
    }
  </script>
</a>