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:
https://drive.google.com/file/d/0B-7cg8BSq1Z_bFdhVU1QV3RvMXM/view?usp=drivesdk
@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
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… 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