Display Article custom fields in table

Question

I am trying to customise the way the article custom fields are displayed on the category blog page. At present they are displayed in a vertical list:

What I would like to do is display these in a table, whereby the Field Name/Titles are displayed horizontally across the top of the page and then each articles custom field 'values' are displayed underneath the correct custom field heading.

I have created an override of the custom fields render.php but cannot see how on earth I can do this.

The code involved is:

foreach ($fields as $field)
{
    // If the value is empty do nothing
    if (!isset($field->value) || $field->value == '')
    {
        continue;
    }

    $class = $field->params->get('render_class');
    $layout = $field->params->get('layout', 'render');
    $content = FieldsHelper::render($context, 'field.' . $layout, array('field' => $field));

    $output[] = '<dd class="field-entry ' . $class . '">' . $content . '</dd>';
}

if (empty($output))
{
    return;
}

?>
<dl class="fields-container">
    <?php echo implode("\n", $output); ?>
</dl>

I'm trying to figure out how I can strip the headers from the DD tag but still preserve the content and position them under the correct heading?

Any pointers would be most welcome. The sample page can be found here

Thank you in advance.

Donna

Answer 1

I did something like you want to do a few months ago, I displayed my custom fields in a scrollable/sortable table across the page however my technique was to use an Alternate Layout for the Category List display rather than change the custom field rendering.

Using an Alternate Layout rather than a layout override meant that I only changed the List layout for the display of the one category of items I wanted and could still use the normal list display for the other pages. By not modifying the custom rendering it didn't upset the display of the fields in other displays.

You can start by looking here for some details, https://docs.joomla.org/Layout_Overrides_in_Joomla . There was something missing in that documentation but with a few other articles I was able to piece together what was needed but hopefully what follows is enough to get you going.

The basic steps are;

1. Create an override in your template for ..\com_content\category\default*.* files

2. Rename the default*.* files to myevents*.* in the template folder, or whatever name you like.

3. Edit myevents_articles.php and change the column headers to match your data headings. Owner and Expiry are my custom fields.

       <th scope="col" id="categorylist_header_owner">
       <?php echo JHtml::_('grid.sort', 'Owner', 'owner', $listDirn, $listOrder); ?>
       </th>
       <th scope="col" id="categorylist_expiry_date">
       <?php echo JHtml::_('grid.sort', 'Expiry', 'expiry', $listDirn, $listOrder); ?>
       </th>
   

4. Scroll down a bit further and change the data sections of your template to use something like

      <td headers="categorylist_header_owner" class="list-owner">
          <?php echo $article->jcfields['8']->value; ?>
          </span>             </td>           <td headers="categorylist_expiry_date" class="list-expiry">
          <?php echo $article->jcfields['7']->value; ?>
          </span>

jcfields['n'] is the id of the custom field.

5. Save myevents_articles.php

6. Edit myevents.xml and change the to be the the name of your alt layout, something like; title="My Events List" option="COM_CONTENT_CATEGORY_VIEW_MYEVENTS_OPTION"

7. Depending on the template you are using you might have to edit some of the other myevents*.* files.

8. Create a language override for COM_CONTENT_CATEGORY_VIEW_MYEVENTS_OPTION in the back end.

9. Create/Edit your Menu Item and you will now see a selection under Articles for 'My Events List'

And that is pretty much it.