Tips & Tutorials

Joomla Tips & Tutorials

In our previous tutorial about extending Joomla com_content, we have shown you how to create extra fields (custom fields) and display them properly in the Portfolio layout in Purity III. Today, we're back with another advanced tutorial regarding Joomla custom fields (extra fields), digging deeper into the extra fields and to show you how to achieve your own professional looking Product showcase as we have done for our recent Customer Showcase page.

Without further ado, let's get to it.

1. Extra field types

Currently, T3 Framework supports 3 types of extra fields , including:

  1. Extra field for article
  2. Extra field for forms: Menu item, search, contact, tag, etc.
  3. Extra field for module type

For today, we'll be focusing on type #1: the Extra field for article

.
Use extra fields in T3

Free to add extra fields with T3

2. How-to steps:

There are 4 steps involved in this process:

  1. Define extra field group and extra fields in each group
  2. Get extra fields
  3. How to use extra fields
  4. Style for the extra fields

2.1 Add extra field groups and define extra fields in each group

On the Customer Showcase, you will be able to see the following::

  1. Site's name: which can be done by using the article's title, so we won't need an extra field for this.
  2. Username: which is the members' username on our JoomlArt's forum, this will be our first extra field.
  3. Thumbnail: which is the site's thumbnail, this will be our second extra field.
  4. Site's URL: direct you to the page when hovering over the site's thumbnail, this will be our third extra field.
  5. JoomlArt template name: the template which our customer use to develop their site, this will be our fourth extra field.

That adds up to 4 extra fields that we need to create for the Customer Showcase. What's next?

Create a .xml file. The file is located in folder templates\t3_bs3_blank\etc\extrafields. You can define many extra fields group in one .xml file. In each group, it can have one or many extra fields.

Code format to work with the .xml file:

Define extra field group:

<fieldset name="extra-field-group-name" label="Extra field group label" description="Extra field group description" group="extrafields">

Define extra fields:

<field name="extra-field-name" type="list" default="" label="Extra field name" description="Extra field description">
	<option value="value-1">Extra field value 1</option>
	<option value="value-2">Extra field value 2</option>
</field>
Define extra fields

Define extra field group and extra fields in each group in Customer Showcase page

The full .xml file for Customer Showcase articles:

<?xml version="1.0" encoding="utf-8"?>
<form>
    <fields name="attribs">
        <fieldset name="extrafields" label="Extra Fields">
            <field name="us-username" type="text" default="" label="Username" class="input-large" description="JoomlArt username"/>
            <field name="us-url" type="text" default="" label="Url" class="input-xxlarge" description="User site url"/>
            <field name="us-thumbnail" type="text" default="" label="Thumbnail" class="input-xxlarge" description="User site thumbnail"/>
            <field name="us-template" type="text" default="" label="Template Name" class="input-large" description="JoomlArt template name"/>
        </fieldset>
    </fields>
</form>

The user-sites.xml file above defines:

  • Extra field group is "Extra Fields"
  • Extra fields: us-username, us-id, us-email, us-url, us-thumbnail, us-template
  • All extra fields' type are "text"

2.2 Get extra field for articles

As Joomla doesn't support in creating the extra fields, we have to create an override layout file that we would like to display these extra fields in. You can easily get those override layout files at templates/t3_bs3_blank/html/com_content/category.

For the Customer Showcase page, we would need to have the following override layout files:

  • showcase.php
  • showcase.xml
  • showcase_item.php
override files

The override layout files that you would need for the Customer Showcase

#1: showcase.php file

<?php

/**
 * @package     Joomla.Site
 * @subpackage  com_content
 *
 * @copyright   Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
// no direct access

defined('_JEXEC') or die('Restricted access');



$cols = $this->params->get('num_columns', 3);

$span = floor(12 / $cols);

$key = 0;

$items = $this->items;

?>



<div class="showcase<?php if ($this->params->get('pageclass_sfx')) echo ' ' . $this->params->get('pageclass_sfx'); ?>">



	<?php if ($this->params->get('show_page_heading', 1)) : ?>

	<div class="page-header">

		<h1> <?php echo $this->escape($this->params->get('page_heading')); ?></h1>

	</div>

	<?php endif; ?>



	<?php //JAHelper::loadModules('inline') ?>

	<!-- Item list -->

	<div class="showcase-items">



	<?php foreach ($items as $item):

		?>

		<?php if ($key % $cols == 0) : ?>

		<!-- Row -->

		<div class="row row-showcase">

	<?php endif ?>



			<div class="col-xs-12 col-sm-<?php echo $span ?>">

				<?php

				// Load category_item.php by default

				$this->item = $item;

				echo $this->loadTemplate('item');

				?>

			</div>



			<?php if ((($key+1) % $cols == 0) || $key+1 == count($this->items)) : ?>

			</div>

			<!-- // Row -->

		<?php endif ?>

			<?php

			$key++;

		endforeach; ?>



	</div>

	<!-- // Item list -->



	<!-- Pagination -->

	<?php

	if ($this->pagination->getPagesLinks()): ?>

		<div class="pagination-wrap">

			<?php echo $this->pagination->getPagesLinks(); ?>

			<p class="counter pagination-counter">

				<?php echo $this->pagination->getPagesCounter(); ?>

			</p>

		</div>

	<?php endif; ?>

	<!-- //Pagination -->



</div>

#2: showcase.xml file

<?xml version="1.0" encoding="utf-8"?>

<metadata>

	<layout title="xLayout - Showcase" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">

		<help

			key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG"

		/>

		<message>

			<![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>

		</message>

	</layout>



	<!-- Add fields to the request variables for the layout. -->

	<fields name="request">

		<fieldset name="request"

		 >



			<field name="id" type="category"

				description="JGLOBAL_CHOOSE_CATEGORY_DESC"

				extension="com_content"

				label="JGLOBAL_CHOOSE_CATEGORY_LABEL"

				required="true"

			/>

		</fieldset>

	</fields>



	<!-- Add fields to the parameters object for the layout. -->

<fields name="params">

<fieldset name="basic" label="Basic">

    <field name="display_num" type="text"

           description="Number of items"

           label="# Items"

           size="3"

           default="12"

            />



    <field name="num_columns" type="text"

           description="JGLOBAL_NUM_COLUMNS_DESC"

           label="JGLOBAL_NUM_COLUMNS_LABEL"

           size="3"

            />



    <field name="orderby_pri" type="list"

           description="JGLOBAL_CATEGORY_ORDER_DESC"

           label="JGLOBAL_CATEGORY_ORDER_LABEL"

            >

        <option value="">JGLOBAL_USE_GLOBAL</option>

        <option value="none">JGLOBAL_NO_ORDER</option>

        <option value="alpha">JGLOBAL_TITLE_ALPHABETICAL</option>

        <option value="ralpha">JGLOBAL_TITLE_REVERSE_ALPHABETICAL</option>

        <option value="order">JGLOBAL_CATEGORY_MANAGER_ORDER</option>

    </field>



    <field name="orderby_sec" type="list"

           description="JGLOBAL_ARTICLE_ORDER_DESC"

           label="JGLOBAL_ARTICLE_ORDER_LABEL"

            >

        <option value="">JGLOBAL_USE_GLOBAL</option>

        <option value="front">COM_CONTENT_FEATURED_ORDER</option>

        <option value="rdate">JGLOBAL_MOST_RECENT_FIRST</option>

        <option value="date">JGLOBAL_OLDEST_FIRST</option>

        <option value="alpha">JGLOBAL_TITLE_ALPHABETICAL</option>

        <option value="ralpha">JGLOBAL_TITLE_REVERSE_ALPHABETICAL</option>

        <option value="author">JGLOBAL_AUTHOR_ALPHABETICAL</option>

        <option value="rauthor">JGLOBAL_AUTHOR_REVERSE_ALPHABETICAL</option>

        <option value="hits">JGLOBAL_MOST_HITS</option>

        <option value="rhits">JGLOBAL_LEAST_HITS</option>

        <option value="order">JGLOBAL_ORDERING</option>

    </field>



    <field name="order_date" type="list"

           description="JGLOBAL_ORDERING_DATE_DESC"

           label="JGLOBAL_ORDERING_DATE_LABEL"

            >

        <option value="">JGLOBAL_USE_GLOBAL</option>

        <option value="created">JGLOBAL_CREATED</option>

        <option value="modified">JGLOBAL_MODIFIED</option>

        <option value="published">JPUBLISHED</option>

    </field>



    <field name="article_layout" type="componentlayout"

                 label="Article Layout"

                 description="JFIELD_ALT_COMPONENT_LAYOUT_DESC"

                 useglobal="true"

                 extension="com_content" view="article"

                    />

</fieldset>



    <fieldset name="article" label="COM_CONTENT_ATTRIBS_FIELDSET_LABEL">

        <field name="show_title" type="list"

               description="JGLOBAL_SHOW_TITLE_DESC"

               label="JGLOBAL_SHOW_TITLE_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="link_titles" type="list"

               description="JGLOBAL_LINKED_TITLES_DESC"

               label="JGLOBAL_LINKED_TITLES_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JNO</option>

            <option value="1">JYES</option>

        </field>



        <field name="show_intro" type="list"

               description="JGLOBAL_SHOW_INTRO_DESC"

               label="JGLOBAL_SHOW_INTRO_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field

                name="info_block_position"

                type="list"

                default=""

                label="COM_CONTENT_FIELD_INFOBLOCK_POSITION_LABEL"

                description="COM_CONTENT_FIELD_INFOBLOCK_POSITION_DESC">

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">COM_CONTENT_FIELD_OPTION_ABOVE</option>

            <option value="1">COM_CONTENT_FIELD_OPTION_BELOW</option>

            <option value="2">COM_CONTENT_FIELD_OPTION_SPLIT</option>

        </field>



        <field name="show_category" type="list"

               description="JGLOBAL_SHOW_CATEGORY_DESC"

               label="JGLOBAL_SHOW_CATEGORY_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="link_category" type="list"

               description="JGLOBAL_LINK_CATEGORY_DESC"

               label="JGLOBAL_LINK_CATEGORY_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JNO</option>

            <option value="1">JYES</option>

        </field>



        <field name="show_parent_category" type="list"

               description="JGLOBAL_SHOW_PARENT_CATEGORY_DESC"

               label="JGLOBAL_SHOW_PARENT_CATEGORY_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="link_parent_category" type="list"

               description="JGLOBAL_LINK_PARENT_CATEGORY_DESC"

               label="JGLOBAL_LINK_PARENT_CATEGORY_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JNO</option>

            <option value="1">JYES</option>

        </field>



        <field name="show_author" type="list"

               description="JGLOBAL_SHOW_AUTHOR_DESC"

               label="JGLOBAL_SHOW_AUTHOR_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="link_author" type="list"

               description="JGLOBAL_LINK_AUTHOR_DESC"

               label="JGLOBAL_LINK_AUTHOR_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JNo</option>

            <option value="1">JYes</option>

        </field>



        <field name="show_create_date" type="list"

               description="JGLOBAL_SHOW_CREATE_DATE_DESC"

               label="JGLOBAL_SHOW_CREATE_DATE_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="show_modify_date" type="list"

               description="JGLOBAL_SHOW_MODIFY_DATE_DESC"

               label="JGLOBAL_SHOW_MODIFY_DATE_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="show_publish_date" type="list"

               description="JGLOBAL_SHOW_PUBLISH_DATE_DESC"

               label="JGLOBAL_SHOW_PUBLISH_DATE_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="show_item_navigation" type="list"

               description="JGLOBAL_SHOW_NAVIGATION_DESC"

               label="JGLOBAL_SHOW_NAVIGATION_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>





        <field

                name="show_vote" type="list"

                label="JGLOBAL_SHOW_VOTE_LABEL"

                description="JGLOBAL_SHOW_VOTE_DESC"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option	value="1">JSHOW</option>

        </field>



        <field

                name="show_readmore"

                type="list"

                description="JGLOBAL_SHOW_READMORE_DESC"

                label="JGLOBAL_SHOW_READMORE_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field

                name="show_readmore_title"

                type="list"

                label="JGLOBAL_SHOW_READMORE_TITLE_LABEL"

                description="JGLOBAL_SHOW_READMORE_TITLE_DESC"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="show_icons" type="list"

               description="JGLOBAL_SHOW_ICONS_DESC"

               label="JGLOBAL_SHOW_ICONS_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="show_print_icon" type="list"

               description="JGLOBAL_SHOW_PRINT_ICON_DESC"

               label="JGLOBAL_SHOW_PRINT_ICON_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="show_email_icon" type="list"

               description="JGLOBAL_Show_Email_Icon_Desc"

               label="JGLOBAL_Show_Email_Icon_Label"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="show_hits" type="list"

               description="JGLOBAL_SHOW_HITS_DESC"

               label="JGLOBAL_SHOW_HITS_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JHIDE</option>

            <option value="1">JSHOW</option>

        </field>



        <field name="show_noauth" type="list"

               description="JGLOBAL_SHOW_UNAUTH_LINKS_DESC"

               label="JGLOBAL_SHOW_UNAUTH_LINKS_LABEL"

                >

            <option value="">JGLOBAL_USE_GLOBAL</option>

            <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>

            <option value="0">JNO</option>

            <option value="1">JYES</option>

        </field>



    </fieldset>

</fields>

</metadata>

Here is the Code format to get extra field for articles:

$attribs = new JRegistry($this->item->attribs);

You got your override layout files ready? Now all you need to do is adding the above code format into your showcase_item.php file.

#3: showcase_item.php file

<?php



// no direct access

defined('_JEXEC') or die('Restricted access');



// Define default image size (do not change)

$params = new JRegistry($this->item->attribs);

//echo "[".ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)."]";

$link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));

$products_info = JAFactory::getProducts();

$tplname = $params->get('template_name');

$jirakey = $params->get('jira_key');

// $ususername = $params->get('us-username');

// $usemail = $params->get('us-email');

// $usurl = $params->get('us-url');

// $usthumbnail = $params->get('us-thumbnail');

// $ustemplate = $params->get('us-template');



?>



<!-- Item -->

<div class="thumbnail pd-list-item">

  <div class="item-image pd-screen">

    <div class="pd-screen-img">

      <img src="/<?php echo $params->get('us-thumbnail') ?>" alt="<?php echo htmlentities($this->item->title) ?>"/>

    </div>



    <!-- State -->

	  <?php

	  $state = $params->get('special_state');

	  if (is_array($state) && count($state)):

	    foreach ($state as $st):

	    ?>

	    <span class="item-state state-<?php echo strtolower($st) ?>"><?php echo $st ?></span>

	  <?php

	    endforeach;

	  endif; ?>

	  <!-- //State -->



    <!-- CTAs -->

	  <ul class="pd-cta">

	    <li><a class="btn btn-inverse" title="<?php echo $params->get('masshead_title'); ?> Visit site" href="/<?php echo $params->get('us-url')?>" rel="nofollow" target="_blank"><i class="fa fa-desktop"></i>&nbsp;Visit site</a></li>

	  </ul>

    <!-- CTAs -->



    <span class="item-mask"></span>

  </div>

  <div class="pd-title">

    <h2>

    <?php echo $this->escape($this->item->title); ?>

  	</h2>

  </div>



  <!--<p class="item-desc"><?php //echo $this->item->introtext; ?></p>-->



  <ul class="info-list pd-info-list">

    <li class="row">

      <div class="col-xs-12 col-md-6" title="User post"><i class="fa fa-user"></i>&nbsp;

      <?php

       if ($params->get('us-id') && trim($params->get('us-id')) != '') { ?>

        <a href="http://www.joomlart.com/forums/member.php?<?php echo $params->get('us-id'); ?>" title="<?php echo $params->get('us-username'); ?>">

          <?php echo $params->get('us-username'); ?>

        </a>

      <?php } else { ?>

        <?php echo $params->get('us-username'); ?>



      <?php } ?>

      </div>

      <div class="col-xs-12 col-md-6 text-right" title="Template name"><i class="fa fa-tag"></i>&nbsp;

        <?php if($params->get('us-template') && $params->get('us-template') != '') { ?>

        <a href="http://demo.joomlart.com/#<?php echo strtolower(str_replace(' ','_',$params->get('us-template'))); ?>" title="<?php echo $params->get('us-template'); ?> demo"><?php echo $params->get('us-template'); ?></a>

        <?php } ?>

      </div>

    </li>

  </ul>



</div>

<!-- //Item -->

2.3 Add style for extra fields

You can add style for created extra fields in any .less file in your template LESS folder at templates/t3_bs3_blank/less.

Style extra fields

Add style for extra fields

Customer Showcase extra fields style:

// USER SHOWCASE
// ---------------------------------------------------------
.mod-masthead {
  position: absolute;
  top: 0;
  right: @global-margin;

  .btn-primary {
    border-radius: 30px;
    font-size: (@t3-font-size-bigger * 1.5);
    padding: (@global-padding / 2) @global-padding;
  }
}

.showcase {
  .pd-info-list {
    font-size: @font-size-base;
  }

  .pd-list-item .info-list em {
    display: inline-block;
  }

  .pd-list-item .item-image .item-mask {
    background: rgba(0,0,0,.3);
    display: none;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }


  .pd-list-item {
    .pd-screen-img img {
      transition: all 350ms;
      transform: translateZ(0px);
    }


    .pd-cta > li {
      @media (max-width: @screen-sm-max ) {
        width: 100%;
      }      
    }

    i {
      color: @gray-light;
    }

    &:hover {
      .pd-screen-img img {
        transform: scale(1.1,1.1);
      }

      .pd-cta > li > a {
        background: @green;
        border-color: @green;
        color: @white;
        opacity: 1;

        i {
          color: @white;
        }
      }
    }  
  }  

}

Please compile LESS to CSS so that the new added style will be compiled to CSS.

Compile LESS to CSS

Compile LESS to CSS

2.4 How to use extra fields

#1: Create a category that you want to assign the extra field group for.

Category setting

Assign extra field group for category

#2: Set value for extra fields in each article from created category.

Configure article extra fields

Add content for extra fields in each article

#3: Create menu item

Create menu with menu type is xlayout - Showcase, the menu will get content from a category that we assigned extra field group for.

Menu setting

Menu setting: assign to override layout (xLayout - Showcase)

Woot! You're DONE. Check out the front-page.

Extra field in front-page

Extra field in front-page

And that's how you quickly add Joomla custom fields in articles to transform a Portfolio layout in Purity III into a customized Product Showcase for your Joomla site.

Good luck!

>> More tutorials in this series: Adding Joomla custom fields in form with T3 Framework <<

Tags:

T3 Framework Joomla Template

View Posts By Tags

BLOG COMMENTS POWERED BY DISQUS