Brian's Blog Homepage
sunset over corn fields

Showcasing the power of Joomla 4 out of the box with no additional extensions I produced this website (https://brianstest.site). One of the features I created was a masonry style view (https://brianstest.site/trips) with no javascript or css edits - just some simple template overrides.

The tutorial below is for creating that view using custom fields. For a slightly simpler version using tags see the Joomla Tags As Custom Filters.

 

Setup

  • Create a single category called Trips

  • Create a field group with the exact same name as the category.
  • Create the custom fields you need to filter the content eg Departures, Skill, Availability and make sure you place them in the field group you just created.

  • Create multiple articles in the Trips category

    • Add values for the custom fields to each article
    • Add Readmore to each article
  • Create a menu item of type Articles->Category Blog

    • Set the Blog Layout as follows

      • 0 Leading Articles
      • 9 Intro Articles
      • 3 Columns
      • Multi Column Direction - Across
    • Set the Options as follows

      • Intro Text - Show
      • Category - Hide
      • Author - Hide
      • Create Date (etc) - Hide

Template Override 1

  • Create overrides for Components->com_content->category

  • Open the override for /templates/template_name/html/com_content/category/blog.php

  • Insert the code below before line 16
    use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;​
  • Insert the code below before the closing php tag on line 51

    $fields = FieldsHelper::getFields('com_content.article');
    
    $filter="";
    foreach ($fields as $field) {;
        if ($this->category->title === $field->group_title) {
            foreach (($field->fieldparams->get('options')) as $option) {
                $filter .= ',[value="' . $option->value . '"]:checked ~ .blog-items .blog-item:not([data-category~="' . $option->value . '"])';
            }
        }
    }
    
    /** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
    $wa = Factory::getApplication()->getDocument()->getWebAssetManager();
    $wa->addInlineStyle(ltrim($filter, ",") . '{display: none; opacity: none;}');
    

     

  • On new line 59 insert the following code

    <?php $fields = FieldsHelper::getFields('com_content.article'); ?>
    <?php foreach ($fields as $field) {;?>
        <?php if ($this->category->title === $field->group_title) {;?>
            <div class="filter-label d-inline-block">
                <?php echo $field->label; ?>
            </div>
            <?php foreach (($field->fieldparams->get('options')) as $option) { ;?>
                <input type="checkbox" class="btn-check" name="CheckBox" id="<?php echo $field->id; ?>-<?php echo $option->value; ?>" value="<?php echo $option->value; ?>">
                <label class="btn btn-outline-primary btn-sm" for="<?php echo $field->id; ?>-<?php echo $option->value; ?>">
                    <?php echo $option->name; ?>
                </label>
            <?php }; ?>
        <?php }; ?>
    <?php }; ?>
  • Save & Close the file.

Template Override 2

  • Open the override for /templates/template_name/html/com_content/category/blog_item.php

  • Insert the code below before the closing php tag on line 35

    // for each field get the value
    $filter = implode(" ", array_map(function($field) {return $field->value;}, $this->item->jcfields));
    // remove commas and make lowercase
    $filter = (strtolower(str_replace(",", "", $filter)));
  • Edit the next div so that it looks as belwo

    <div class="com-content-category-blog__item blog-item"
        itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting"
            data-category="<?php echo $filter; ?>">

     

  • Add the following code at the end of the file 

    </div>

      

Optional Template override 3

You may find it useful to have an additional button that will reset all the filters.

  • Re-Open the override for /templates/template_name/html/com_content/category/blog.php
  • Insert the following code immediately after the second code block you added
    $wa->addInlineScript('function unselectCheckboxes() {const checkboxes = document.querySelectorAll(\'input[type="checkbox"]\');
        checkboxes.forEach((checkbox) => {checkbox.checked = false; });}');
    ​
  • Insert the following code immediately before the third code block you added
    <input type="checkbox" class="btn-check" name="ResetAll" id="ResetAll" onclick="unselectCheckboxes()" >
    <label class="btn btn-outline-danger btn-sm" for="ResetAll">Reset</label>​

 Demo

J o o m l a !

Brian Teeman

Brian Teeman

Who is Brian?

As a co-founder of Joomla! and OpenSourceMatters Inc I've never been known to be lacking an opinion or being too afraid to express it.

Despite what some people might think I'm a shy and modest man who doesn't like to blow his own trumpet or boast about achievements.

Where is Brian?