Blog

The latest version of Joomla 3.7 has finally brought native custom fields. This is an outstanding creative feature with which you can add 15 different type of integrated fields on your articles, and apply them to different groups of fields to different categories. So you can have for example page products sections, events sections, multiple featured images. Let's see how to integrate custom fields with our overriding code and print them in a more sophisticated way than the native "automatic display".

Custom fields is a feature everyone was waiting for years. You can have for example: product pages, events sections, multiple images articles; each one with its own specific fields. This is an important advance, which shortens the distance with WordPress, which already offers quite a straight way, to expand content fields.

This feature is promising to expand the way we manage content, bringing the cms beyond the mere content management.

I'm writing this article as a short guide and a personal note to modify the code and using this new feature in the best way. Infact the automatic display of custom fields in the front end is ugly and limited, it was quite the disappointing part of it. You can only display them in a for each loop before the content, after the title or after the content in an ugly - and hard to style - description list <dl><dd> tags.

Fortunately the workaround, actually not described in the official documentation, is quite straightforward. Let's see how to call every single custom field in any part of the page template, in the category template (or frontpage) and in plugins modules too.

Custom fields in the article page and category

Le'ts solve the first problem: all the custom fields are printed in a weird dl list. 

First of all, we need to deactivate "automatic display" in the article option. In this way, only PHP code will print our custom fields and that's a good thing.

Then, on top of the deafult.php of your article override (/html/com_content/article/default.php) let's call the new jcfields property and assign all the fields to an array:

<?php
// GET CUSTOM FIELDS
    $myCustomFields = array();
    foreach($this->item->jcfields as $field) {
        $myCustomFields[$field->name] = $field->value;
    } 
?>


In this way we can call each field later in the template code, just like this way:

<?php
// RECOVER CUSTOM FILED NAME
    if (isset($myCustomFields['fieldname']) and !empty($myCustomFields['fieldname'])) : ?>
        <h4><span>Label:</span>  <?php echo $myCustomFields['fieldname']; ?></h4>    
    endif;
?>


The "if isset" conditional PHP does not print anything when the fields are empty. Just like all the other template parts.

That's all. Now it's possible to echo all the other fields in the same way in every part of the article page.

To call the custom fields in the category page you need to insert the same code inside blog_item.php override. Remember it must be always inside the for each loop of the content items. Same for the featured frontend files, in default_item.

You now have custom fields in the articles pages, category pages, and front page. Let's see how to call them on a module, in my case I just needed to print them in a modified articles newsflash module.

Custom fields in a module

In the module, we retrieve the array fields in the same way. But in this case, we must also modify the helper.php, calling for module parameters. This is because custom fields are triggered by the event "onContentPrepare" already loaded in content pages but not necessarily in modules.

Trigger the events inside the "static function getList(&$params) {", you can paste the following code:

         // trigger events
            if ($triggerEvents)
            {
                $item->text = '';
                $app->triggerEvent('onContentPrepare', array ('com_content.article', &$item, &$params, 1));
                $results = $app->triggerEvent('onContentAfterTitle', array('com_content.article', &$item, &$params, 1));
                $item->afterDisplayTitle = trim(implode("\n", $results));
                $results = $app->triggerEvent('onContentBeforeDisplay', array('com_content.article', &$item, &$params, 1));
                $item->beforeDisplayContent = trim(implode("\n", $results));
                $results = $app->triggerEvent('onContentAfterDisplay', array('com_content.article', &$item, &$params, 1));
                $item->afterDisplayContent = trim(implode("\n", $results));
            }
            else
            {
                $item->afterDisplayTitle    = '';
                $item->beforeDisplayContent = '';
                $item->afterDisplayContent  = '';
            }

Approximately the same way works for extensions and plugins. That's all on how to freely use the custom fields inside articles, categories and modules. You can, in this way embed your fields in the right tags, for example microdata or typography headings. And, surely style with your css.

Official documentation is here