How to use and display Joomla custom fields in custom positions attractively

How to use and display Joomla custom fields in custom positions attractively

When Joomla introduced the Custom fields in 2012 starting from version 3.7, it shifted the focus of blogging experience from monotonous to attractive manner being capable of data display attributes in seamless integration in front-end.

 Joomla custom fields can be utilised in Joomla articles, User manager and contacts components also. These cusom fields show-up in separate tab when editing articles, users and contacts. Various type of custom fields available to add in the above components and Joomla ACL, language and layout options are also available to add in each custom field.

The following type of custom fields are available to add in the above components:

  • Text
  • Calendar
  • Checkboxes
  • Color
  • Editor
  • Integer
  • List
  • List of images
  • Media
  • Radio
  • Repeatable
  • SQL
  • Text area
  • URL
  • User
  • User Groups

 So, here we will not discuss the basic usage of creating and adding the custom fields into articles. We will discuss the advance usage of custom fields and their usage in Joomla front-end. If you are a developer you already know to override and custom code the default.php file that is used to display the article detail page. To display the custom fields in custom style, we will utilise the override file of default.php file in following location:

templates/your_template/html/com_content/article/default.php

Now call all the custom fields created by you in this default.php through php code before closing php sign:

foreach($this->item->jcfields as $jcfield)
     {
          $this->item->jcFields[$jcfield->name] = $jcfield;
     }


?>

 Now go to your desired location in HTML section where you want to display your custom fields. The best location is after:

<?php  echo $this->item->event->beforeDisplayContent;  ?>

The above position is used to display the custom fields and other 3rd party plugins in automatic mode. This position is diplayed before your content written in article editor. To display the custom fields in custom style, It is recommended to select Automatic Display in field options to Do Not Automatic Display, so that all custom fields should not be shown automatically.

The simple code to call each custom field in HTML section is as per below:

<?php echo $this->item->jcFields['tour-category']->value; ?>

You can call the both field's Value or Raw Value:

<?php echo $this->item->jcFields['tour-category']->rawvalue; ?>

The raw value of the field can be used to apply condition through other field, whether to display the field value or not. In this case you can create a field of radio type using Yes or No before this field and control the display of desired field in this way:

<?php if ($this->item->jcFields['tour-display-condition']->rawvalue > 0) : ?>
<?php echo $this->item->jcFields['tour-category']->value; ?>
<?php endif; ?>

 You can also add class to display icon, text size, text color as per below code:

<div class="field-details"><h5>Tour Category</h5>
<?php if ($this->item->jcFields['tour-display-condition']->rawvalue > 0) : ?>
<p class="text-prop"><?php echo $this->item->jcFields['tour-category']->value; ?></p>
<?php endif; ?>
</div>

 If you are using bootstrap theme then you can use the bootstrap responsive class by wrapping the above code (or all your custom fields) in following manner:

<div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-3">
				<div class="fields-holder">
                                  <div class="field-details"><h5>Tour Category</h5>
<?php if ($this->item->jcFields['tour-display-condition']->rawvalue > 0) : ?>
<p class="text-prop"><?php echo $this->item->jcFields['tour-category']->value; ?></p>
<?php endif; ?>
               </div>
          </div>
        </div>
      </div>
   </div>

You can add icons through classes to display as shown in first image of this post.

 

Pin It

Add comment


Security code
Refresh

Related Articles