Streaming live at 10am (PST)

Filter images in your gallery without adding code or external plugins

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!

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 ?

Hi Blaise,

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




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

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

I’m afraid that’s the only way I can think of doing it…

But they’re very cool! Populating the site I shared using the CMS was much quicker and more robust than doing everything manually.

And even smaller when you click on “Wordle maker” link

Ok then i will rework the complete structure of my website using collections.
I hope it will work this way.
Thank you very much for your help.

Hello @Clinton_Stringer, I don’t know why you see “fruits” pictures on the same place. Because they are not. Here is a screen cast:

@Blaise_Posmyouck, reason why such problem can appear is when you use the rows and columns, since they will not move. If you will check my example, you will notice, that I used divs with display: inline-block. Such structure let other elements moves when certain elements got display:none setting.

Regards,
Anna

1 Like

Hi there,

Just came across this and plan to use this effect for Filtering a Gallery of Products my client wants on their website.

Is there a way to link to a category from another page? So say on the home page there was a link for Plum and you wanted it to load this page with the gallery with that one pre-loaded?

Hi @GotoTaylor,
I am sorry, not sure I understand you correct. If you want to show different categories on different pages, then there is no sense in filtering at all. Just add links to different pages, where will be content only from particular category.

If I got you wrong, explain me with more details, please.

Hi there,

Basically I will have a list of product brands on the Home Page to promote them but when they click one i want it to take me to a page that has all the products they offer but filtered like in your example to what they had clicked on the previous page.

My reasoning for having this is I want them to be able to view all products on this page as well if they wish.

1 Like

If your content (products) is dynamic, it is possible to do. But with static content it is not possible. Filtering implemented by interactions with hiding (display:none) one classes and showing other. And it is impossible to activate that interaction from another page.

Hi there,

Thanks for this great tutorial! Implementing something similar currently and wanted to know are there any alternatives to the animations you would recommend instead of shrinking them and display:none, as when I use this it jumps up the page as there is nothing else beneath it currently. I don’t think I’m keen on it jumping up and down based on the elements size, are there alternative animations you can think of that would look good?

Hi @GotoTaylor,
I am apologizing for late reply.

Try to add min height to div-gallery, 50vh for example. I will keep whole page from jumping.

About alternative animation: you can add any interaction you want (fade in from the top, fade in from the bottom, etc) as long as you will use it with display:none >>> display:inline-block option.

Regards, Anna

2 Likes

@sabanna Any ideas how we could use this approach for multi-filtering? Like http://isotope.metafizzy.co/filtering.html#combination-filters?

Hi, @pixelsock

With this particular method, it is not possible to make multilayered filtering like isotope. I’m sorry

Best,
Anna

I’ve implementing your solution here… mwf.webflow.io/past-events. I’m
using your filter to filter the artist filters and then media boxes to show
the gallery. However, I’m running into an issue where webflow is only
allowing 100 photos to show at one time. Any ideas where I went wrong?

https://preview.webflow.com/preview/mwf?preview=cc2375212ef033fa8d6c2cc38b28061b

Yeah, it is limitation for now: in one dynamic list you can show only 100 items in a time.

There is workaround for that

With your gallery layout it might be not the best option, but I think it worth trying

Thank you! This has been such a headache. I didn’t realize that was a limit. I don’t think the work around will suite me at this time because I need to be able to filter the entire collection. Thanks for your help. I may experiment with a few different ideas and I’ll let you know what I come up with.

1 Like