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;
}