Is there a Hugo site or theme with filters?

support
1

Hello everyone,

I’m currently exploring Hugo themes and websites, and I’m particularly interested in incorporating filters into my project. Since Hugo primarily generates static pages, I’m looking for guidance on how to implement filters effectively.

I have a list of results that display properties, and these results need to be filterable based on various criteria, such as residential or commercial properties. Furthermore, under the residential category, we have sub-filters like home, apartment and villa etc.

Now, I’m wondering about the best approach for creating such a website in Hugo. Should I generate static pages for every possible filter combination, or would it be better to generate a .json file using Hugo from .md files and then use JavaScript to filter and display the results?

I’m also curious if anyone has already tackled a similar project using Hugo and filters. Your insights and experiences would be greatly appreciated.

Thank you!

2

I don’t know if it fits your use case but i implemented something similar for video poker tournament categories. Static web pages.

Source code is here : GitHub - divinerites/videos-cp

Website is here : https://cp-videos.netlify.app

1 Like
3

Wowchemy uses Isotope.

1 Like
4

Hi @divinerites

the website you mention is using Hugo taxonomy with possibility of only 1 selection this is very easy to achieve in Hugo.

but it becomes very complicated when you combine selections for example select 2 different options and filter. I wonder in such case if it makes sense to generate all combination pages statically or export json data to generate list page results.

thanks

5

I choose to do it with 1 criteria. But you can obviously do it for more the same way. Will also depends on how much critères you have : X * Y * Z.
If a lot then the JS is the way to go

1 Like
6

Hi @divinerites

Using Hugo’s method of generating static pages gives website benefit is SEO. while using js I suppose I can fetch data from the .json file to display cards.

But I was wondering if there is an existing demo of such functionality with Hugo. where Hugo export the list results in .json and then filter using js.

thanks

7

Another alternative would be to generate one static page with all data and use JavaScript to display only the desired parts.

1 Like
8

Hi @chrillek

This was my first thought but if I have 1000 cards to display wouldn’t that be an issue.

I was thinking to generate a .json file in Hugo and get the results from there. as otherwise 1000 result load will make the page impossible to load.

Do you know of any existing such examples so I can get my head around this in how a Hugo expert might do it. making maximum use of Hugo either output of.json etc.

Thanks

9

1000 is only a problem if they have images and you actually load those images. Using an old school lazy load and a load more button fixes this issue. See Hugobricks blog for an example.

1 Like
10

I used for calinalefter.com a tutorial from smashing magazine, - search for “How To Build A Progressively Enhanced, Accessible, Filterable And Paginated List”

2 Likes
11

Thanks @solopx

Are the filters using Hugo functions or all js for example I try to make use of this code:

{{ $pages := .Resources.Match "images/*" }}
    {{ $categories := slice }}
    {{ range $pages }}
      {{ if .Params.category }}
        {{ $categories = $categories | append .Params.category }}
      {{ end }}
    {{ end }}
    {{ $categories = uniq $categories }}

and then simply use minimal js to filter, but your example is perfect as it make use of multiple filters at the same time.

Is there a public repo for this project? Are you using params or only categories and tags for the filter?

Thanks

12

I have added the excellent List.js to my Zen theme.

An example implementation can be seen at: Products – Zen demo site

As noted on that page you nee some custom js and html code for each implementation but it works well.

3 Likes
13

@gora, you can take a look at https://jamstackthemes.dev/ and it’s souce: GitHub - stackbit/jamstackthemes: A list of themes and starters for JAMstack sites..

1 Like
14

Hi @Sid

This theme is using categories, I see the categories are very easy in Hugo to use. But what about non category items in front matter params.

I already made a very big real estate site with almost 20,000 listings and didn’t use any categories and instead made use of front mater items.

Will this technique work the same for for non category items as Hugo generate pages for categories but does not do the same for other frontmatter items.

Looking forward to your response

Thanks

15

I have created an API and I’m using it with AlpineJs like in the article from smashing magasine.
Hugo doesn’t mix the content dynamically.

That project is not public.

16

You can instruct Hugo to consider a frontmatter parameter as a taxonomy. See Taxonomies | Hugo.

1 Like