Display Filtered Photo Gallery by Category

Ask the Community Customization
1

Please help a total Newbie working for a nonprofit animal rescue!

I am in the process of creating a “Faithful Fighters” Photo Gallery (these are pups and cats needing immediate help)
I set categories based on their name.
For example, category=“Rover”, “Wilson”, “Artic”
Goal:
Filter the gallery to show only one category
Hide the category filter from users

Faithful Fighters – Always and Furever Midwest Animal Sanctuary

1 Like
2

Hi @JoJo ,
why do you create categories if you only want to display one?
You can also label the individual images with “Rover”, “Wilson”, “Artic”

Turn off filter

grafik
grafik366×150 1.57 KB

then it will not be displayed
grafik

1 Like
3

Sina, thank you for reaching out! i am struggling! I see your point on turning off filters, i had just been trying everything to get the categories to work the way i want them to.
I have disabled the Filters. (the slideshow still plays)
That leaves me with… how do i display only one category?

I am creating categories so that i do not have to create individual widgets for each pup and cat. at this moment we have 9 dogs and 3 cats that have needed emergency care. I am using the Elfsight Timeline to create updates on each pet, and that works brilliantly!
But the Timeline only allows you to upload 1 photo. i want to be able to share updated photos (pic when they arrived at shelter, pics of their injuries, pics at the emergency clinic, pics pot-op, etc)

The long description accepts code, just not easy insertion of photos, much less a slideshow!
i have successfully inserted the Elfsight Photo Gallery into the Elfsight Gallery’s long description

via this code:

photo gallery insertion
photo gallery insertion930×468 37.6 KB

I just feel like I am missing something easy :frowning:

2 Likes
4

Hi @JoJo

i understood.
Is this the original installation code for the Photo Gallery?
I’ve never seen it like this before. It won’t work like this?

To display a specific category, a trigger is needed, which, for example, occurs when a link is clicked.
This requires custom JS code, which @Max can probably create for you for the photo gallery.
I’ve done something similar with the Portfolio app.
Here, you can add some text along with enough images.

For your project, the idea of ​​categories is recommended.
I wouldn’t use the timeline for that.
Each category is the story of an animal, right?

But the filter shouldn’t be displayed now, but only when a specific link is clicked, right?

This is the function in the example with the Portfolio app.
https://community.elfsight.com/t/portfolio-how-to-get-a-link-to-a-certain-category/110925?u=sina

You can also do this with the Photo Gallery.

This also allows you to hide the bar with the categories.

.eapp-photo-gallery-category-list-component{
  display:none;
}
1 Like
5

That was not the original installation code. :wink: I see what you did with the Portfolio app. when i structured the photo gallery similarly, the link, despite being category-specific, displayed all my photos.
I am abandoning my quest and creating individual slideshows for each animal. I appreciate your help.

2 Likes
6

Hi there, @JoJo :wave:

Oh, that’s a pity that you’ve decided to abandon this idea. Just in case, if you decide to get back to it in the future, here is the script that should be added to the Custom JS field on the Style tab of your widget’s settings:

const LISTEN_TYPES = {
  one: {
    select: (selector, root) => root.querySelector(selector),
    validate: (node) => !!node
  },
  all: {
    select: (selector, root) => root.querySelectorAll(selector),
    validate: (node) => node?.length > 0
  }
};

function listenStep(args) {
  args.node = args.select(args.selector, args.root);

  if (!args.validate(args.node)) {
    args.step++;
    if (args.step < args.limit)
      setTimeout(() => {
        listenStep(args);
      }, args.delay);
    else
      args.reject();
  }
  else {
    args.resolve(args.node);
  }
}

async function asyncListenFor(selector, type = 'one', customArgs = {}) {
  const args = {
    root: document,
    node: undefined,
    selector,
    delay: 100,
    limit: 50,
    step: 0,
    select: LISTEN_TYPES[type].select,
    validate: LISTEN_TYPES[type].validate,
    ...customArgs
  };

  if (type === 'one' || type === 'all') {
    return new Promise((resolve, reject) => {
      listenStep({ ...args, resolve, reject });
    });
  }
}

const categoryButtonSelector = '.eapp-photo-gallery-category-list-item[role="button"]';

const urlParams = new URLSearchParams(location.search);
const filter = urlParams.get('filter')?.toLowerCase();

if (filter) {
  asyncListenFor(categoryButtonSelector, 'all').then((categoryButtons) => {
    categoryButtons.forEach(categoryButton => {
      if (categoryButton.innerText?.toLowerCase() === filter) {
        categoryButton?.click();
      }
    });
  }).catch(() => {});
}

This script assigns the specific ID to each category tab. The ID for each tab is its name where the space is replaced by “+” with the ?filter= before the tab id.

So, here is the link to that category Etta James - https://www.alwaysandfurever.org/faithful-fighters/?filter=etta+james

If any further questions come up, we’ll be delighted to help!

2 Likes