Create gallery through CMS

Hi! I’m new to this forum, and Webflow, so please excuse any “bad forum behaviour”.

I’m trying to create a CMS driven image gallery based website.

My first question is: Is this even possible with webflow?

To be more specific, Is it possible to load several (an unspecified number of) images through the CMS and have them display on a page, for instance in an image slider. Or at least load them on a page?

The only way I can think of now is to add several pictures in a rich text field and then load the rich text field on a page. But that doesn’t really do what I’m after. Another way would of course be to add several image fields to a collection, and just set conditional visibility to a ton of empty image containers on a page that load the images. But this seems like a really bad workaround.

Am I going about this the wrong way, or is it just something that shouldn’t be done with webflow?

Thanks!

What you are wanting to do is possible (not the slider but the rest). The CMS is exactly for this type of thing.

You should start with https://webflow.com/cms (information towards bottom of page) and http://help.webflow.com/courses/webflow-cms.

Hi @LM1 I am working on a Gallery at the moment for a client, the sites not finished yet but the Gallery section is pretty much there: http://ben-mcgarry.webflow.io/bens-photography-ben-mcgarrys-photography

Is this the type of thing you are wanting to do?

Aaron.

@jdesign thanks for the quick reply. I’ve actually gone through the tutorials, but they don’t really mention anything related to this if I’m not mistaken.

See the example below; how would I get the images into a collection and then load them onto the page. Every page has an unspecified number of images. I can’t wrap my head around that…

Hi @Aaron! Thanks, kind of, it depends on how it’s made. I would like to let the cms editor add new collections with several images in them. For every collection there would be a link on the main page leading to a page which displays all the images from the collection.

LM1 You can setup a site without having to bring it live and you can use the CMS backend features. I suggest you spend a good amount of time looking at and testing the features, CMS and layout options. That’s probably the best way to really determine if Webflow will work for your specific project. There are also some free CMS templates that you could load up and test from…that could save some time.

1 Like

Hey @LM1. This is something that doesn’t have a straightforward solution yet, but there are some workarounds that achieve what you’re looking for.

The best strategy I’ve seen for dealing with this involves creating a separate collection with your images and setting a reference on each of them to the corresponding item (blog post, product page, etc.). From here you can drop a dynamic list of the images on the item detail page and filter by the item reference you set up.

This isn’t ideal, but it’s a good interim solution until we build something out.

7 Likes

Thanks @nate, not really sure I follow though. Could you explain in more detail? Thanks!

Vote this a wish list item - a great idea and perfect for some of my photographers and videographers. Please build Webflow. :smile:

2 Likes

Looking forward for webflow team to create an CMS field that allows us to upload several images into a gallery. It would be great.

@nate The idea of creating a new collection with multiple image fields it’s good for a small amount of pictures, but when I have 50 or 100 images to upload it would take a lot of time from the editor/collaborator to do so. I think it would be a bit annoying, don’t you agree?

I hope you guys create this new feature as soon as possible, can’t wait to use it. :wink:

4 Likes

Agreed … would be a great new feature.

I’m especially interested in incorporating dynamic lists into sliders or lightboxes.

3 Likes

Yes, missing this badly. Any news when we might get this?

@thesergie @PixelGeek Is there any news on when a galleryCMS with multiple image upload (all at once) will be launched? The current workarounds aren’t really feasible for clients to use regularly - time consuming and confusing.

We have plans to add this feature but no ETA yet.

The current workarounds aren’t really feasible for clients to use regularly - time consuming and confusing.

I know it’s annoying to have to hack around this. Nate mentioned above that you can create a separate collection for images, but I actually prefer adding multiple image fields to the same collection since it’s directly part of that collection (up to 30 fields total for now).

1 Like

Hi Sergie,

Thanks for your reply.

I agree, the multiple image fields is probably a simpler solution for now. I’d really like to see the gallery feature in the future though - I feel like it’s the one feature which limits the use cases for Webflow - and since I use only Webflow - it thus limits the jobs I can take on!

Thanks again for your time

…and Webflow is the best - ye’re doing a great job!

1 Like

Hi Aaron, great job on the gallery. Any chance you could share how you did this. Loving the effects on the gallery, the navigation on the full picture (arrow rotating) and super smooth interactions. Top work my friend

Hey @RoseWebStudio, thanks for the love!

Part of it is using the materilize.js I have already put a tutorial together for that here: http://aarons-3d-testing-environment.webflow.io/button-animations

As for the other interactions I haven’t put anything together, if you like I can send you a copy of that page and you can dissect it, if that’ll help?

Aaron

Aaron, your “go back” link on each photograph takes you back to the top of the page. Anyway to make that go back to where you were on the page before you click on a specific photo? The regular “back” button on my phone does take me back to the right spot. Just thought you might want that input. Not my intention to change thread.

Hey,

Yeah, just had a tinker and got it to work! :slight_smile:

Take a look: http://ben-mcgarry.com/bens-photography-ben-mcgarrys-photography

Here’s how I did it.

First Step.
Create an “HTML Embed” with this snippet <div id=" use dynamic name here "</div> inside your Gallery Items. See image below.

Second Step
Go to your Photographs Template page.
Create another “HTML Embed” this will be your button, so place it where you would like it to sit.
Inside use this snippet
<a href="/bens-photography-ben-mcgarrys-photography# Place The Dynamic Field of Name Here " class="gobackbtn w-button waves-effect">Go Back</a>

See the image below:

Notice the class name is exactly the same as the previous button, that only took me to the top of the page, I kept the same name so I would not have to style it all again.

Now Publish it, and it should work!

Let me know if you run into trouble.

Aaron.

2 Likes