Filter by category

[HomeGridMx]

Hi, I love your work, I start using it as a test for a website of mine where I collect property photos taken by my girlfriend... any way, I think a possibility to filter items by category or value, would be a good feature, what do you think? -your plugin looks awesome: www.homegrid.mx

[DerYeger]

Thank you very much for the feedback!

I guess filter options are always a good idea!

[BenjaminOddou]

Hello @HomeGridMx ,

I managed to create a filter system with this plugin, so maybe my code (with annotations) can help you or others 🙂

But creating another plugin or find a way to implement that feature without adding weight if not used is a great idea ! I was thinking to isotope layout which uses masonry (from Desandro) under the hood.

For my use case I used ref, v-show and <Transition>

<script setup lang="ts">
import gsap from 'gsap'
const filter = ref('*') // this is the default filter
const { data: images } = useFetch<ImageKit[]>('/api/imgkit') // API call (nuxt 3 useFetch)

const reFilter = (newFilter: string, event: MouseEvent) => { // This function is called when a filter is clicked
  // removing of the class is-filtered for all the buttons
  document
    .querySelectorAll<HTMLButtonElement>('#filters-group-container > button')
    .forEach((button) => {
      button.classList.remove('is-filtered')
    })
  // Adding the is-filtered class to the clicked button
  const target = event.currentTarget as HTMLButtonElement
  target.classList.add('is-filtered')
  // Change the value of filter
  filter.value = newFilter
  return filter.value
}

const onLeave = (el: HTMLImageElement, done: any) => {
 // Leave animation comes first in mode out-in, see in <Transition>
  gsap.fromTo(
    el,
    { y: 0, autoAlpha: 1 },
    { y: 20, autoAlpha: 0, duration: 0.6, ease: 'power4.out', onComplete: done }
  )
}

const onEnter = (el: HTMLImageElement, done: any) => {
  gsap.fromTo(
    el,
    { y: 20, autoAlpha: 0 },
    { y: 0, autoAlpha: 1, duration: 0.8, ease: 'power4.in', onComplete: done }
  )
}
</script>

<template>
       <!-- When clicking on a filter it will change the filter value -->
       <button :class="`is-filtered pr-1`" @click="reFilter('*', $event)">
         <span>All</span>
       </button>
       <button class="pr-1" @click="reFilter('landscape', $event)">
         <span>Landscape</span>
       </button>

      <MasonryWall
        id="masonry-gallery"
        :items="images"
        :column-width="340"
        :gap="0"
      >
        <template #default="{ item }: { item: ImageKit }">
          <Transition mode="out-in" @leave="onLeave" @enter="onEnter"> <!-- See JS hooks for transition -->
            <!-- specific to nuxt but can be change by img tag -->
            <nuxt-img
              v-show="item.tags && item.tags.find((tag) => tag === filter)"
              :src="item.filePath"
              :width="680"
              class="pl-6 pr-6 pb-6 sm:pl-0"
            /> <!-- v-show is testing if tag is not null and if tag is equal to filter -->
          </Transition>
        </template>
      </MasonryWall>
</template>

my API is returning an array of objects with properties :

[
   {
      "filePath" : "/gallery/landscape1.webp",
      "height" : 750,
      "mime" : "image/webp",
      "name" : "landscape1.webp",
      "tags" : ["*", "landscape"],
      "width" : 1200
   },
   {
      "filePath" : "/gallery/portrait1.webp",
      "height" : 750,
      "mime" : "image/webp",
      "name" : "portrait1.webp",
      "tags" : ["*", "portrait"],
      "width" : 1200
   },
   {
      "filePath" : "/navbar/n-5.webp",
      "height" : 750,
      "mime" : "image/webp",
      "name" : "n-5.webp",
      "tags" : null,
      "width" : 1200
   },
]

Useful links :

• $events
• ref
• JS Hooks for Transition
• v-show