Complex filters in final site

support
1

Hi there! I’d like to ask some advice about using complex filters, not during hugo compilation, but in the final site.
I plan to build a little website to list all the cards in a card game (similar to Magic); each card has some plain attributes, like name, but others are meant to be filters like:

  • pantheon
  • era
  • strenght
  • etc

I’m looking for a way to implement a search with these filters (a OR a’ AND b or b’) with Hugo, but I’m failing to find a solution, maybe I’m asking the wrong questions.

Could you give me any hint? Do you have any example to check?

Thanks for your help!

2

Would you be possibly wanting to do something like this: https://www.w3schools.com/howto/howto_js_filter_elements.asp?

3

This is more of a front-end solution (see JavaScript) as previously suggested. There are several solutions, and what you want to do is output the cards in themselves (as article, or div or whatever) with specific classes or data- attributes that you can then select with JavaScript and apply styles to (such as opacity: 0.5; or display: none; etc.). One ready-made library can be found here: https://github.com/metafizzy/isotope

I have created a shortcode for my personal theme that takes a similar —vanilla JavaScript— approach: https://github.com/Arty2/onion/blob/master/layouts/shortcodes/articles-filter.html and a live example at siadora.com.

See the comments within for an example of the styles used to hide the filtered-out elements.

4

Hi there! thank you for your responses. I’ve checked differente approaches, but I don’t find them suitable, as I need to load all the cards (even if I dont render them) to use the filters. As I’m talking about a thousand cards, this could lead to a very poor performance.
My current approach doesn’t use Hugo but Django (completely different point of view), but I’m taking some ideas from Hugo to make the proyect open to content contributions.

Best regards

5

The only thing I can think of then is to use Taxonomy in a ‘hacky’ way. You can probably integrate something like an infinite scroll library (I had tried one from the creator of masonry.js) and load your cards accordingly. It’s going to be a tough nut to crack but probably possible. I’d have love to try this if my college wouldn’t have poured the long list of projects.

But yeah, that’s probably one (or maybe not) way. Maybe it can help you think something even better.