Staff section

: mod_articles_category

Live demo

Our Team


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

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.