Build a grid-based Instagram gallery

Use Zapier to connect your Instagram feed to a fully responsive, custom grid layout. 

In this lesson, you’ll learn:

1. How to create a Collection
2. How to create a Zap to connect Instagram to your Collection
3. How to design your Collection list
4. How style the gallery

Good to know: The grid will add new Instagram posts to your layout, but it won’t grab all existing photos.

How to create a Collection

First, you’ll need to create and name a Collection (e.g., “Instagram feed”). Then, you’ll add a custom field for your Instagram images:

1. Go to edit your Collection
2. Go to the Collection fields section
3. Click Add new field
4. Choose the Image field
5. Name the field (e.g., “Images”)
6. Click Save field
7. Click Create Collection

How to create a Zap to connect Instagram to your Collection

Zapier operates with a trigger event and result (i.e., when this happens, do that). When new images are posted to your Instagram account, this Zap (i.e., this whole process) will activate.

Note: Check Zapier’s documentation for the most up-to-date instructions for creating trigger events.

First, create a trigger event in your Zapier account

1. Select Instagram under Choose App & Event‍
2. Select New Media Posted in My Account from the dropdown for Choose Trigger Event‍
3. Click Continue and enter your Instagram account information 

Once you connect your account, you can Test and Continue. 

Then, you can set the result by connecting the trigger event to Webflow:

1. Select Webflow under Choose App & Event
2. Select Create Live Item from the dropdown under Choose Action Event
3. Click Continue
4. Choose your Webflow account under Choose Account
5. Click Continue
6. Choose Photostories for your Site under Customize Item
7. Choose Instagram feeds under Collection to link it to the database we created earlier
8. Choose Standard Resolution URL under Images to bring in new images posted to Instagram
9. Set the Name to grab the caption text
10. Set both Archived and Draft to No (for now)
11. Click Continue‍

Now, click Test and continue again and you’re ready to activate your Zap. In the top right, verify your Zap is switched ON.

How to design your Collection list

Before you start designing your Collection list, you may want to post a new image or two to your Instagram account. That’ll trigger Instagram to pass new photos to your site.

To design your Collection list in Webflow:

1. Go to Add panel > CMS section
2. Add a Collection list to the canvas
3. Double-click the Collection list
4. Choose “Instagram feeds” as the Source Collection

This populates your Collection list wrapper with an item for every new image you uploaded to Instagram at the beginning of this section.

Note: Images can take time to show up. Refresh your Webflow site if you don’t see updates right away.

Then, you’ll want to structure your Collection list to display your Instagram images inside. First, add an image element to your Collection list wrapper:

1. Go to Add panel > Media section
2. Drag an image element into any of the items in the Collection list
3. Select the image on the canvas
4. Click the settings “cog”
5. Check “Get Images from Instagram feed”
6. Choose the “Images” Collection field from the dropdown

Next, create a grid layout for your images:

1. Select the Collection list
2. Go to Style panel > Layout > Display
3. Choose grid

You can edit your grid as needed. Then, you can add a lightbox so when a site visitor clicks the image, it shows up in a lightbox:

1. Delete the previously added image (don’t worry, you’ll replace it later)
2. Go to Add panel > Advanced section
3. Drag a lightbox element into any of the items in the Collection list
4. Click the placeholder image inside the lightbox
5. Click the settings “cog”
6. Check “Get Images from Instagram feed”
7. Choose the “Images” Collection field from the dropdown
8. Select the Lightbox link
9. Go to Element settings panel > Lightbox settings
10. Check “Get Media from Instagram feed”
11. Choose the “Images” Collection field from the dropdown
12. Check Link with other lightboxes‍
13. Give the lightbox group a name (e.g., “Instagram”) 

How to style the gallery

Here’s where you can style your grid and give your pictures a “picture frame” look.

First, create the picture frame:

1. Go to Add panel > Basic section
2. Drag a div block inside the Lightbox link
3. Give the div block a class (e.g., “Frame”)
4. Drag the previously added image element into the div block

Then, style the frame:

1. Select the “Frame” div block
2. Go to Style panel > Borders
3. Choose solid in Style
4. Add a width (e.g., 10px)
5. Go to Style panel > Spacing
6. Add padding (e.g., 35 px) on all 4 sides
7. Go to Style panel > Layout
8. Set Display to flex
9. Set Align to center
10. Set Justify to center

Now, you can add realism to your frames with a first shadow:

1. Select the “Frame” div block
2. Go to Style panel > Effects
3. Click the “plus” icon next to Box shadows
4. Set a Distance value (e.g., 20px)
5. Set a Blur value (e.g., 50px)
6. Set a Size value (e.g., -9px)
7. Click the color swatch and change the opacity by setting the alpha channel (e.g., 40%)
8. Click out of the color picker
9. Set an Angle value (e.g., 180 degrees)

And then set a second shadow:

1. Select the “Frame” div block
2. Go to Style panel > Effects
3. Click the “plus” icon next to Box shadows
4. Set a Distance value (e.g., 13px)
5. Set a Blur value (e.g., 19px)
6. Set a Size value (e.g., -13px)
7. Set an Angle value (e.g., 180 degrees)

How to make your grid row height consistent

1. Select the Collection list
2. Go to grid edit mode
3. Select each row (including the automatic row) in the Style panel and set its size to 1FR
4. Exit grid edit mode by pressing ESC or clicking Done on the canvas
5. Select the Collection item
6. Go to Style panel > Size
7. Set Height to 100%
8. Select the Lightbox link
9. Go to Style panel > Size
10. Set Height to 100%
11. Select the “Frame” div block
12. Go to Style panel > Size
13. Set Height to 100%

Lastly, you can style your grid to best fit each breakpoint. New Instagram images will be added to your gallery automatically. 

And that’s building a grid-based Instagram gallery in the Webflow designer.

Learn more:

• Turn a Collection list into a responsive grid