This Joomla 4 override allows you to display a team section with their pic, name, position and social medias accounts 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;
}

?>

<section class="our-team padding-lg">
	<div class="container">
		
		<div class="row text-center heading heading-icon">
			<h2>Staff section</h2>
		</div>
		
  		<hr class="pb-2">
		
		<div class="row category-module<?php echo $moduleclass_sfx; ?>">
			<?php foreach ($list as $item) : ?>
			
			<div class="col-12 col-md-6 col-lg-3">
				<div class="cnt-block equal-hight h-100">	
				
					<!-- 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; ?>" alt="<?php echo $article_image_alt; ?>">
						
						<!-- Article title -->
						<?php if ($params->get('link_titles') == 1) : ?>
						<h3><a class="pt-3 mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h3>
						<?php else : ?>
						<h3><?php echo $item->title; ?></h3>
						<?php endif; ?>
						
						<hr />
						
						<h5><small><?php echo $article_image_alt; ?></small></h5>
						
						<!-- Social media -->
						<?php $item->urls = new JRegistry($item->urls); ?>
						<div class="d-flex justify-content-evenly">	
							<div class=""><a href="<?php echo $item->urls->get('urlatext'); ?>" target="_blank"><i class="fab fa-facebook"></i></a></div>
							<div class=""><a href="<?php echo $item->urls->get('urlbtext'); ?>" target="_blank"><i class="fab fa-twitter"></i></a></div>
							<div class=""><a href="<?php echo $item->urls->get('urlctext'); ?>" target="_blank"><i class="fab fa-linkedin"></i></a></div>
						</div>
				</div>			
			</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>

CSS

.heading.heading-icon {
    display: block;
}
.padding-lg {
	display: block;
	padding-top: 60px;
	padding-bottom: 60px;
}
.practice-area.padding-lg {
    padding-bottom: 55px;
    padding-top: 55px;
}
.practice-area .inner{ 
     border:1px solid #999999; 
	 text-align:center; 
	 margin-bottom:28px; 
	 padding:40px 25px;
}
.our-team .cnt-block:hover {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    border: 0;
}
.practice-area .inner h3{ 
    color:#3c3c3c; 
	font-size:24px; 
	font-weight:500;
	font-family: 'Poppins', sans-serif;
	padding: 10px 0;
}
.practice-area .inner p{ 
    font-size:14px; 
	line-height:22px; 
	font-weight:400;
}
.practice-area .inner img{
	display:inline-block;
}
.our-team .cnt-block{ 
   float:left; 
   width:100%; 
   background:#fff; 
   padding:30px 20px; 
   text-align:center; 
   border:2px solid #d5d5d5;
   margin: 0 0 28px;
}
.our-team .cnt-block figure{
   width:148px; 
   height:148px; 
   border-radius:100%; 
   display:inline-block;
   margin-bottom: 15px;
}
.our-team .cnt-block img{ 
   width:148px; 
   height:148px; 
   border-radius:100%; 
}
.our-team .cnt-block h3{ 
   color:#2a2a2a; 
   font-size:20px; 
   font-weight:500; 
   padding:6px 0;
   text-transform:uppercase;
}
.our-team .cnt-block h3 a{
  text-decoration:none;
	color:#2a2a2a;
}
.our-team .cnt-block h3 a:hover{
	color:#337ab7;
}
.our-team .cnt-block p{ 
   color:#2a2a2a; 
   font-size:13px; 
   line-height:20px; 
   font-weight:400;
}
 

This Joomla 3 override allows you to display a team section with their pic, name, position and social medias accounts 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;
?>
<section class="our-team padding-lg">
	<div class="container">
		<div class="row text-center heading heading-icon">
			<h2>Our Team</h2>
		</div>
  		<hr class="pb-2">
		<ul class="row category-module<?php echo $moduleclass_sfx; ?>">
			<?php foreach ($list as $item) : ?>
			<li class="col-12 col-md-6 col-lg-3">
				<div class="cnt-block equal-hight" style="height: 349px;">	
					<!-- 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; ?>" alt="<?php echo $article_image_alt; ?>"></figure>
						<!-- Article title -->
						<?php if ($params->get('link_titles') == 1) : ?>
						<h3><a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h3>
						<?php else : ?>
						<h3><?php echo $item->title; ?></h3>
						<?php endif; ?>
						<hr />
						<!-- Custom fields -->
						<?php $customFields = FieldsHelper::getFields('com_content.article', $item, true);
							foreach ($customFields as $customField){
								$customFields[$customField->name] = $customField;
							}?> 
							<h5><small><?php echo $customFields['fonction']->value; ?></small></h5>
							<ul class="list-inline clearfix list-unstyled">	
								<li class="list-inline-item"><a href="/<?php echo $customFields['facebook']->value; ?>" target="_blank"><i class="fa fa-facebook"></i></a></li>
								<li class="list-inline-item"><a href="/<?php echo $customFields['twitter']->value; ?>" target="_blank"><i class="fa fa-twitter"></i></a></li>
								<li class="list-inline-item"><a href="/<?php echo $customFields['linkedin']->value; ?>" target="_blank"><i class="fa fa-linkedin"></i></a></li>
							</ul>
				</div>			
			</li>
			<?php endforeach; ?>
		</ul>
	</div>
</section>

CSS

.heading.heading-icon {
    display: block;
}
.padding-lg {
	display: block;
	padding-top: 60px;
	padding-bottom: 60px;
}
.practice-area.padding-lg {
    padding-bottom: 55px;
    padding-top: 55px;
}
.practice-area .inner{ 
     border:1px solid #999999; 
	 text-align:center; 
	 margin-bottom:28px; 
	 padding:40px 25px;
}
.our-team .cnt-block:hover {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    border: 0;
}
.practice-area .inner h3{ 
    color:#3c3c3c; 
	font-size:24px; 
	font-weight:500;
	font-family: 'Poppins', sans-serif;
	padding: 10px 0;
}
.practice-area .inner p{ 
    font-size:14px; 
	line-height:22px; 
	font-weight:400;
}
.practice-area .inner img{
	display:inline-block;
}
.our-team .cnt-block{ 
   float:left; 
   width:100%; 
   background:#fff; 
   padding:30px 20px; 
   text-align:center; 
   border:2px solid #d5d5d5;
   margin: 0 0 28px;
}
.our-team .cnt-block figure{
   width:148px; 
   height:148px; 
   border-radius:100%; 
   display:inline-block;
   margin-bottom: 15px;
}
.our-team .cnt-block img{ 
   width:148px; 
   height:148px; 
   border-radius:100%; 
}
.our-team .cnt-block h3{ 
   color:#2a2a2a; 
   font-size:20px; 
   font-weight:500; 
   padding:6px 0;
   text-transform:uppercase;
}
.our-team .cnt-block h3 a{
  text-decoration:none;
	color:#2a2a2a;
}
.our-team .cnt-block h3 a:hover{
	color:#337ab7;
}
.our-team .cnt-block p{ 
   color:#2a2a2a; 
   font-size:13px; 
   line-height:20px; 
   font-weight:400;
}
 

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net