How to Create a Team Section With Joomla ?

A new request

In November 1320, the Lord of Hornshadow summoned the city council to validate the add a council section to each district. Everyone thought it was a great idea because it could help the residents of the city and also the visitors.

The city council also wanted that this new section should be easy to manage, in case of change in a district council. This council section must display the following informations:

• The pic of each council member

• The name of each council member

• The occupation of each council member

• A brief text about her/him

• And a button to contact her/him

Now, let's have a preview to our team section:

Credits images: @Pixabay

Let's display our Team section

Ok it's time to have fun with overrides and to display our council members on the website.
Because each member is linked to its district, we'll simply display her/him on the page of its district. Thus, it will be easier for the end user to find the informations on the council members of each district.

To do so, we'll use the powerful native Joomla module mod_articles_category.
As you maybe know, this module doesn't display the intro image. So we'll have to add it in our override.

Here is the code to display the intro image:

<?php
	$article_images  = json_decode($item->images);
	$article_image   = '';
	$article_image_alt   = '';
	if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
		$article_image  = $article_images->image_intro;
		$article_image_alt  = $article_images->image_intro_alt;
	}?>  					
		
	<a href="/<?php echo $item->link; ?>">
		<img class="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
	</a>
		

We'll also need to display the occupation and the link for the contact button. These two informations will be added in backend with customs fields.
Here is the code to display custom fields in an override:

<?php $customFields = FieldsHelper::getFields('com_content.article', $item, true);
		foreach ($customFields as $customField){
		$customFields[$customField->name] = $customField;
	}?> 	
		<p><?php echo $customFields['name-of-the-custom-field']->value; ?></p>

If it is you're first override in Joomla, I strongly recommand you to read first the previous #JOC articles (see the list above) where you'll find all the useful informations about the steps override creation.

According to the preview, we'll display the members of our team side by side, thanks to the Bootstrap grid.
Here is the code for a member:

<div class="panel panel-default">
			<img src="path/to/the/image.jpg" alt=""/>
 	<div class="panel-body"><h1>Article title</h1>
 	<p class="lead">Sub title</p>
	<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 	<p align="center"><a class="btn btn-primary">Contact</a></p>
	</div>
	</div>

As you can see, it's pretty simple. I use the Bootstrap classes as much as possible to keep my code clean and light.

Now, we can create our override in Joomla.

To help you to understand how I've built it and where are placed the differents elements, I've added comments in the code.

Feel free to add your own customization.

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_category
		* @Author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
?>
<div class="row category-module<?php echo $moduleclass_sfx; ?> mod-list">
	
	<?php foreach ($list as $item) : ?>
	<div class="col-md-3">
		
		<div class="panel panel-default">
			
			<!-- The intro image -->
			<?php
				$article_images  = json_decode($item->images);
				$article_image   = '';
				$article_image_alt   = '';
				if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
					$article_image  = $article_images->image_intro;
					$article_image_alt  = $article_images->image_intro_alt;
				}?>  					
				
				<img class="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
				
				<div class="panel-body">
					
					<!-- The name of the member -->
					<h1 class="">
						<?php echo $item->title; ?>
					</h1>
					
					<?php $customFields = FieldsHelper::getFields('com_content.article', $item, true);
						foreach ($customFields as $customField){
							$customFields[$customField->name] = $customField;
						}?> 
						
						<!-- The occupation of the member -->
						<p class="lead">
							<?php echo $customFields['occupation']->value; ?>
						</p>
						
						<!-- The short description -->
						<p class="mod-articles-category-introtext">
							<?php echo $item->displayIntrotext; ?>
						</p>
						
						<!-- The contact button -->
						<p align="center">
							<a class="btn btn-primary" href="mailto:<?php echo $customFields['contact']->value; ?>">Contact</a>
						</p>
						
				</div>
		</div>
	</div>
	<?php endforeach; ?>
	
</div>

Et voilà!

Now, you can create your module Articles - Category and setup accordingly to your needs.
Keep in mind to:

• assign your module to the right page

• assign your module to a valid template position

• add your articles in the right category

• and enjoy your new team section!