This Joomla 4 override allows you to display a vertical list of a team with their pic, name, position and email address simply using the Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 * @author		web-eau.net
 * @copyright   (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

?>

<ul class="staff">
	<?php foreach ($list as $item) : ?>
	<?php $item->urls = new JRegistry($item->urls); ?>	
	<li>					
		<!-- Image intro -->
		<?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="img-fluid" src="<?php echo $article_image; ?>" title="<?php echo $item->title; ?>" alt="<?php echo $article_image_alt; ?>">
			
			<!-- Position and @mail -->		
            <h5><?php echo $item->title; ?></h5>
			<p><?php echo $item->urls->get('urlatext'); ?><br />
			<small><a href="mailto:<?php echo $item->urls->get('urlbtext'); ?>" title="Email"><?php echo $item->urls->get('urlbtext'); ?></a></small></p>
	</li>
	<?php endforeach; ?>
</ul>

CSS

ul.staff {
    list-style: none;
    margin: 0!important;
    padding: 0;
}
ul.staff li {
    border-bottom: 1px dotted #e0e0e0;
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
    overflow: hidden;
}
ul.staff li img {
    border: 1px solid #e0e0e0;
	width: 50px;
	height: 50px;
    float: left;
    padding: 3px;
    margin-right: 12px;
    margin-top: 15px;
    margin-bottom: 25px;
}
ul.staff li h5 {
    margin: 0;
	font-weight: 700px;
}
 

This Joomla 3 override allows you to display a vertical list of a team with their pic, name, position and email address simply using the Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_category
		* @author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
?>

<ul class="staff">
	
	<?php foreach ($list as $item) : ?>
	<?php $item->urls = new JRegistry($item->urls); ?>	
	<li>					
	
	<!-- Image intro -->
		<?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;
			}?> 				
			<figure><img class="img-responsive" src="/<?php echo $article_image; ?>" title="<?php echo $item->title; ?>" alt="<?php echo $article_image_alt; ?>"></figure>
	
	<!-- Position and @mail -->		
            <h5><?php echo $item->title; ?></h5>
			<p><?php echo $item->urls->get('urlatext'); ?><br />
			<small><a href="mailto:<?php echo $item->urls->get('urlbtext'); ?>" title="Email"><?php echo $item->urls->get('urlbtext'); ?></a></small></p>
	</li>
	<?php endforeach; ?>
</ul>

CSS

ul.staff {
    list-style: none;
    margin: 0!important;
    padding: 0;
}
ul.staff li {
    border-bottom: 1px dotted #e0e0e0;
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
    overflow: hidden;
}
ul.staff li img {
    border: 1px solid #e0e0e0;
	width: 50px;
	height: 50px;
    float: left;
    padding: 3px;
    margin-right: 12px;
    margin-top: 15px;
    margin-bottom: 25px;
}
ul.staff li h5 {
    margin: 0;
	font-weight: 700px;
}
 

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net