Filter images in your gallery without adding code or external plugins

Community resources Webflow Tips
1

Well, I hope I will be able to explain correct :wink:

Biggest “pain in ass” is creating classes of pics for filtering. It has to be NOT NESTED classes. Because nested classes do not appear in the interactions. So I created few images with all classes that I need. (It is not necessary to upload pics on this step). For example:

1- img-gallery ( later will be used for all images),
2 - plum,
3 - cherry,
4 - apple,
5 - rose,
6 - tulips,
7 -fruits,
8 - flowers

Then we are adding to our gallery, images, which there has to be and which we will filtering. All images inside the div’s and has display settings “Inline-Block”. ALL images will have to class “img-gallery”, then depends on picture’s type we are adding more classes to every of them. In this case will have images:

  • “img-gallery”, “plum”, “fruits”
  • “img-gallery”, “cherry”, “fruits”
  • “img-gallery”, “apple”, “fruits”
  • “img-gallery”, “rose”, “flowers”
  • "img-gallery, “tulips”, “flowers”

Next step is creating buttons (links) for filtering gallery. So in this case we will have:

  1. All images
  2. Plum
  3. Cherry
  4. Apple
  5. Rose
  6. Tulips
  7. Fruits
  8. Flowers

For every button (link) we have to create interaction on CLICK trigger, affecting different elements.

Show All imgs:

247×511 27.7 KB
Will be 2 steps:
244×705 44.2 KB

  1 step: Scale to minimum (there is 0,01x) and 
             make it transparant:

243×769 44.1 KB

  2 step: Scale to original and make it visible:

245×768 44.5 KB

For filtering other classes we will have to make 2 triggers on click, few steps every trigger.
Examle for plum:
1st trigger is hiding all img-gallery
1st trigger, 1step: img-gallery —> scale 0.01x, opacity 0%
1st trigger, 2step: img-gallery —> display none

244×698 42.9 KB

2nd trigger is showing only class that we need
2nd trigger 1step: plum —> scale 0.01x, opacity 0%
2nd trigger 2step: plum —> scale to original, opacity 100% ##!!! UPD : in 2nd step add Diplay Inline-block. Other way image will not appear if it was hide by other filter interaction ##

243×694 43.4 KB

Same interactions we make for every other class-filter (button or link)

It can look complicated, but it is really not. It is pretty much similar steps. And no code, no connected plugins. For me it is much easier. :smile:

HERE IS DEMO —> http://webflow-filtergallery.webflow.io

Here is a link for demo in Webflow >>>Webflow - Filtering Gallery Tutorial
or you can clone demo from my profile>>> https://webflow.com/website/webflow-filtergallery

11 Likes
2

Oh I am liking this a lot :slight_smile: Thanks so much for the share :slight_smile:

3

:slight_smile: always welcome :wink: glad to be useful

4

hi i am following you on all of this, and got it to work, except when I have multiple classes attached to one item. For example (per your example) I can get the individual items to filter correctly (i.e. cherries, tulips), but adding another class to them (fruits or flowers) stops working for me. I am using your example to filter a different set of images on my site and running into problems when I have more than one class that I am filtering. I added an extra layer of complication because I have the images inside an image slider. So I have to attach the classes to each slide, to make them disappear.

5

Hi Jill.

Like I noticed at the start, most important to create individual classes for filtering before you put all gallery together. In my site everything works.

Here is a link for demo in Webflow >>> Webflow - Filtering Gallery Tutorial

or you can clone demo from my profile>>> https://webflow.com/website/webflow-filtergallery

2 Likes
7

Thank u, Sabanna. Now everything works.

1 Like
8

Thank you very much for this topic, but it does not work for me.
I have given the same class to all my images, a class called “allimages” and I’ve also added a new class for example for the flower images, a class called “flowers” (in addition to “allimages”).
Everything works concerning the “All images” link. When I click on it it shows all the images and when I click on another link, for example “Flowers” link, it displays all the images, but doesnt show the flower images.
I have follow all of the above instructions, but the thing is I CAN’T select the second class of my image in the trigger interaction panel. Let me show you :

1250×578 54 KB
1236×421 91 KB
1272×586 155 KB

Please answer as soon as possible.
This is very important for me.
Thank you for your time & patience.
xxx

9

Hi. Firstly thanks so much for this - it’s really helping me.

I was testing it out and realised that when you clicked “fruits” only the fruit pictures display but they show in their original position with empty gaps where the flower pictures are. Is there a way that when you click “fruits”, only the fruit pictures show and they show next to each other in a row?

Thanks in advance.
Clinton

1 Like
10

Exactly the same question for me !

11

You can also achieve something similar using the CMS, dynamic list object and the ‘Tabs’ widget.

Here’s my example: http://nomoredesign-2015.webflow.io/works

If you create a collection of categories (in this case just ‘paper’ or ‘pixels’) you can reference either or both of them with each of the entries. Then you add the dynamic list to each of the tabs, filtering the results of each of the lists.

Hope this makes sense!

12

Hello Nomoredesign :slight_smile:
Indeed you can do it with the CMS using dynamic list object but we will have the same issue, items will not display next to each other, they will keep their position in the row and it’s not user friendly.
I want to do this without using the tab tool.

Cheers

13

Hi Blaise,

I’m not sure I follow – with each of the lists, you can have a different sort order based on the data in the CMS (A-Z, Z-A, etc.).

Sorry if I’ve misunderstood, but can you explain a bit further?

A

14

Yes but the thing is when I click on one of the links to show the images which concern this link, the images display but they keep their original position in the row, so you have to scroll to see the images (if they are originally in the bottom of your page because at the end of the all images list)

You think it’s much easier to do with the CMS ? If I use dynamic lists, will it display items next to each other even if they are at the end of the list, when I click on a filter link ?

I hope you understand my issue.

By the way, I just love the design of your website. Congratulations.

Cheers.

Blaise

15

Thanks for your kind words about the site! :blush:

You can style each of the elements however you want – I’ve made the container div have a maximum width of 940px, but if that were set to 100%, the list would spread across the screen. Also, in the presets for a dynamic list, there are preset options of having up to 6 columns. You could set it to single column and give each of the entries a fixed width.

Personally, I think it’s easier to use the CMS as you can edit properties without having to find styles inside a Webflow page.

16

Sorry, I’m not sure I understand what you recommend me to do if I want my items to appear next to each other when I filter. You recommend me to set items in a single column ? Or set the max width of my items container to 940px ?
Please enlighten me :slight_smile:
Thank you a lot for your help. I’m quiet lost right now :S

17

It took me a lot of time to do this without using dynamic lists and to be honest i dont want to do it again using CMS tool :s

18

When you say ‘next to each other’ I’m presuming you want them to appear in a single row.

If so, the container div width needs to be set at 100% (the entire width of the screen).

Then I think you can set the dynamic list to single-column. If you give each of the entries a fixed width (say 150px) and float: left.

Let me know how you get on!

19

By setting the dynamic list to single-column, what do you mean ?
I can’t change my columns to single column and column are already floating left.
Shall I set my images (the dynamic items) to a fixed width and float left as well ?

20

Hi Blaise,

I’m not sure I can explain better but these videos might be more clear:

http://help.webflow.com/lesson/designing-with-content-on-your-website
http://help.webflow.com/lesson/filtering-and-sorting-dynamic-content-on-your-site

They’re only a few minutes each and can probably explain much better than me!

21

Thank you NomoreDesign.
So we can’t do this without using CMS collections ?..