# Gallery filtering

**URL:** <https://forum.pinegrow.com/t/gallery-filtering/4394>\
**Category:** Beginners\
**Created:** [July 31, 2020, 8:11pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394 "2020-07-31T20:11:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [July 31, 2020, 8:11pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/1 "2020-07-31T20:11:35Z")

</div>

I’m trying to figure out how to set up gallery image filtering. And whether to use foundation or bootstrap. Help please

---

<div class="post-metadata">

**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\
**Post date:** [July 31, 2020, 9:07pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/2 "2020-07-31T21:07:49Z")

</div>

if ur interested in doing it without javascript, and just using CSS… here’s an idea.

> **[How to Build a Filtering Component in Pure CSS](https://webdesign.tutsplus.com/tutorials/how-to-build-a-filtering-component-in-pure-css--cms-33111)**
>
> In today’s tutorial, we’ll learn how to build a CSS-only filtering component, something which you’d be forgiven for thinking needs JavaScript. We’ll be using some simple markup, some form controls,...

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 1, 2020, 11:49am UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/3 "2020-08-01T11:49:47Z")

</div>

Hey @kat,  
@droidgoo is correct about having to use JS for either Bootstrap or Foundation. It comes down to your choice between the two frameworks because the set-up is the same for both.

1. Put together your filtering buttons, each should have a data attribute like `data-filter` that corresponds to the particular images you want displayed, as well as a common class like `filter-button`.
2. Next, put together a flexbox grid of your pictures. Each should have two classes, one that is common to all to identify them as a gallery item, like `filter-item` and one for the filter term, like `animals`.
3. Then you need to add JavaScript, either to the page or with a separate file. The script should target each button through the `filter-button` class and add a click listener. The click listener function should read the `data-filter` attribute of the button and then adjust the visibility of the appropriate images - either hiding them or making them appear.  
Here is a [CodePen link.](https://codepen.io/BoDonkey/pen/YzwmYzL) It uses Foundation and jQuery.

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [August 1, 2020, 2:21pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/4 "2020-08-01T14:21:21Z")

</div>

This looks great. Thanks. Now lets see if I can do it ; ).

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [August 1, 2020, 7:55pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/5 "2020-08-01T19:55:56Z")

</div>

I got this far [mcgraphics.us/history](http://mcgraphics.us/history)  
css is in historystyle.css

> img-filter.js

Could you tell me what goes where?  
I don’t know javascript.

The bottom half has more images that I’d initially placed.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 2, 2020, 9:53am UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/6 "2020-08-02T09:53:06Z")

</div>

Everything looks good. The only change that you need to make is to load the jQuery before you load the img-filter.js. Also, you should only load one version of the foundation.js. You are loading in version 5 just after loading in jQuery and then the newer 6.6.3 after the foundation script initialization. If you want to use the newer version, move the CDN

`<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"></script>`

before the initialization script

`<script> $(document).foundation(); </script>`

and delete

`<script src="js/foundation.min.js"></script>`  
Then switch the order of the jQuery load

`<script src="js/vendor/jquery.js"></script>`

and your script

`<script type="text/javascript" src="js/img-filter.js"></script>`  
Let me know if it works or if you need more help.  
Bob

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [August 2, 2020, 7:30pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/7 "2020-08-02T19:30:28Z")

</div>

It’s working - hooray!

Where do I put your copyright?

I want to switch the buttons from the 3 col images to the 4 col images at the bottom of the page

Top All button isn’t working.

Onward.

Thanks so much for your help.

Kat

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 2, 2020, 8:33pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/8 "2020-08-02T20:33:51Z")

</div>

Change your data filter for the all button to “all”. Looks great!

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [August 2, 2020, 9:12pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/9 "2020-08-02T21:12:56Z")

</div>

All now works!

I want use bottom images with captions. Tried 2 musicians but doesn’t after adding “…filter-item music"

 ![]()
###### Weber

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 3, 2020, 9:49am UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/10 "2020-08-03T09:49:55Z")

</div>

Not sure if you are still having problems from your last post. Can you clarify?  
Also, your script loading should reverse the .foundation() and actually loading foundation from the CDN. In order to insure it will work properly you should have Foundation loaded before you invoke one of its functions.

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [August 3, 2020, 3:51pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/11 "2020-08-03T15:51:38Z")

</div>

Loading order below correct?

1. 
2. 
3. 
4.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 3, 2020, 4:27pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/12 "2020-08-03T16:27:31Z")

</div>

? Your content didn’t come through. But looking at your demo page it is now in the correct order

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [August 3, 2020, 4:45pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/13 "2020-08-03T16:45:27Z")

</div>

Images scattered on page instead of in tidy rows.

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [August 3, 2020, 4:53pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/14 "2020-08-03T16:53:41Z")

</div>

I relinked to new images with captions which come up scattered on page instead of neat rows when I click a category button.  
But clicking works : )

 ![]()
###### Bizet

Thanks so much for your help

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 3, 2020, 7:06pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/15 "2020-08-03T19:06:38Z")

</div>

It is because you are separating them into individual rows. You need to let flexbox take care of flowing them onto the next rows. Does this make sense?  
The JavaScript is hiding any that aren’t selected, but still keeping the row designation. Just put them all into a single row element.

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [August 3, 2020, 8:55pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/16 "2020-08-03T20:55:56Z")

</div>

Think I understand, just drag the image area boxes out of their rows in the Pinegrow tree.

Also is there a tutorial on how to respond in the forum?  
I got spammed when i put up a link to the page you’ve been helping me with.  
And I noticed my code disappeared when I put up a small section of html.

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [August 3, 2020, 9:14pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/17 "2020-08-03T21:14:26Z")

</div>

That was easy.

How many images should I have on a page? I have hundred of my portraits. Guess using all is too many.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 4, 2020, 9:31am UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/18 "2020-08-04T09:31:27Z")

</div>

Not sure why your post was hidden - nothing looked inappropriate to me.  
I have no idea of how many would be to many. At some point your page is going to slow way down. You need to either have some lazy loading or maybe a spinner while the images are loading in.

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [August 4, 2020, 5:26pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/19 "2020-08-04T17:26:45Z")

</div>

Can add a `data-src` attribute to the image link and then set up event listeners on the `scroll` , `resize` and `orientationChange?`

If so should I put the js in a separate file or just add to my image filtering img-filter.js?

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 5, 2020, 9:35am UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/20 "2020-08-05T09:35:46Z")

</div>

You could lazy-load that way. The thing that I’m not sure about is what will happen when you filter them. Depending on how many haven’t been loaded, it might create a slightly delayed load.  
You can either choose to put it with the img-filter.js, or in a separate file. It doesn’t matter.

[Next page](https://forum.pinegrow.com/t/gallery-filtering/4394.md?page=2)