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