How to Embed a Photo Gallery on Framer?
Here's the easiest way to embed an image gallery in Framer using our component. Upload your images into a Picflow gallery, copy our Framer component into your project, and link it with the gallery id. In this article, you'll learn how to embed a gallery in a few easy steps.
Example & Intro
Framer is an amazing tool for building a website, but it is not designed for handling online galleries. Picflow, on the other hand, is the best tool for creating and designing galleries and collaborating on creative assets. We've created a Framer component that you can paste into your projects. Picflow's Gallery Designer includes layout options that allow you to make any design you can imagine. Choose between different grid options, image sizes, and spacings. The best thing is that the gallery is responsive and adapts to any container.
Here's an example gallery on Framer: embed-gallery.framer.website
1. Get the Framer Component
Open our Embed Gallery Demo Project and copy the Framer component. Paste the component into your Framer site. For the component to work, you need the Gallery ID from a Picflow Gallery.
2. Connect a Picflow Gallery
Next, go to Picflow, create a new gallery, and upload your assets. You can also choose an existing gallery. Now, we need to get the ID of the gallery to connect it with the Framer component. Inside a Picflow gallery, copy the ID from the URL or copy the full embed code in the share dialog. Both works.
3. Adjust Settings and Publish
Back in Framer, paste the ID. The gallery should already show up now. Ensure the component has the styles you want, and publish the page.
That's it, Done!
You just embedded a gallery in Framer with just a few simple steps. The best thing is that you can continue to update or rearrange assets in your Picflow gallery and all changes will automatically be reflected on your Framer site. Try it out yourself!