Filter your Content with JFilters by Bluecoder – a Case Study for a Film Festival

by Marc Dechèvre

woluweb

Marc

Present slides https://slides.woluweb.be

1. Introduction

Needless to say, we are a huge fan of Custom Fields in Joomla. See for example the numerous articles we wrote about the topic in the Joomla Community Magazine: https://magazine.joomla.org/authors/marc-dechevre

In our eyes Custom Fields are probably the best feature introduced in Joomla core over the last 10 years.

But once you start using them the next thing you probably want to do is to let your visitors filter Articles on those Custom Fields.

This is precisely what JFilters by Bluecoder allows! And even more because one can also filter on Categories and/or on Tags.

We wanted to write a Case Study about JFilters to show in practice how far you can go because we are always happy to share our enthousiasm for Joomla and its best extensions.

2. The project

The site we want to showcase here is for a (Documentary) Film Festival: https://www.moisdudoc.be/

That Festival is a yearly event created about 10 years ago and organized by the Centre du Cinéma et de l’Audiovisuel (namely the “Department of the Ministry of Culture for French-speaking Belgium in charge of promoting the Belgian Cinema”).

It gathers every year thousands of people in more than 70 cultural places in French-speaking Belgium, namely Brussels and Wallonia.

The website has two major sections:

The Program

The Catalog (new since 2023)

3. The challenges

3.1. Allow visitors to easily find the sessions they want

The first challenge for such a website is to allow visitors to easily find what they are looking for.

For each Session there is one Article having several Custom Fields. The most important ones are

Once a Session is in the past, it is moved from the Category “Upcoming Sessions” to “Past Sessions”.

With other words, we need filters on several dimensions:

3.2. Allow programmers to easily find the films they want

The setup here is similar or even more simple as we have

The challenge here really is the fact that have simultanously 2 filters on the website (Program and Catalog), meaning there are extra requirements:

3.3. A nice integration with our Template

For some time now we use YOOtheme as Template for almost all our projects because it allows to build Overrides / Alternate Layouts with a Page Builder thanks to the so-called Dynamic Content.

So the filtering extension also has to integrate nicely with YOOtheme.

4. JFilters: the perfect solution

As soon as JFilters was released by Bluecoder we had the intuition that we had finally found the perfect solution:

Another good point: JFilters is very performant:

The free version has already a lot to offer but the Pro/Business versions are definitely worth the very reasonable price. Feel free to create and account, start to play with the free version and see for yourself: https://blue-coder.com/subscribe

5. Our setup

5.1. Films Program

Here is the front-end for the Program where we can see

We use two Menu Items for the Program

jfilters

In Components > JFilters we see the different Fields on which we can potentially filter.

Note: if you created new Custom Fields and don’t see them on the list, simply click on the Synchronise Button. You could also click on the Re-Generate Button… but in that case you would lose all the potential customizations that you have brought to each field on this list.

For the Program we want to filter on

jfilters

Note that we did not want to show all existing Categories so we selected a Parent (being here “Séances” in French, ie Sessions).

jfilters

In our JFilters Filters Module

jfilters

5.2. Films Catalog

Here is the front-end for the Program where we can see

jfilters

Just like previously, in our JFilters Filters Module

jfilters

Good to know:

jfilters

Why do we set the Status of the Categories to “Listening”? Actually, if you don’t do that the Filter Module will display and count all values for all Categories… and not only for the Category selected in the Blog View where the Module is displayed. In our usecase, some Custom Fields like “Year of production” are assigned both to the Films of the Program and to those of the Catalog, meaning that the Filter Module was showing “more things” than expected.

5.3. YOOtheme

In YOOtheme, when you click on a Menu Item of Type JFilters Results, you will be able to use the Builder in order to quicly customize the Layout of your Page. This way you can have something which is much nicer than for a regular Smart Search Results Page: indeed in our case we like to have Cards with Images for example.

Even better: now you can also have several Layouts for JFilters Results. To get this

jfilters

On my Builder for a given JFilters Results page you can see

Note: you can build such Cards easily

jfilters

5.4. AJAX or no AJAX that’s the question

In the numerous features of JFilters, there is also AJAX option in the JFilters Module which allows to reload the JFilters Results without reloading the whole page. Interesting of course.

But here is a tip which we want to share with you if, like us, you use YOOtheme and

then keep AJAX disabled if you are still working on the Layout of the JFilters Results Page in YOOtheme.

This way, when playing with the Filters from within YOOtheme’s interface, the “Builder” button will appear next to the corresponding so-called Template (otherwise, since the corresponding Menu Item is hidden, that “Builder” button will not be shown, preventing your from editing that Layout)

jfilters

6. Conclusion

I have had the opportunity to meet Sakis TERZIS from Bluecoder at several JoomlaDays and also to attend several of his presentations of JFilters.

Everytime, even if already know JFilters quite well, I discover new things… So don’t hesitate to watch the replays:

Besides, everytime I had suggestions, Sakis would sooner or later integrate them in some next version.

So JFilters has definitely become one of my favourite extensions for Joomla.