Profile card

Live demo

 

PRO

Ricky Park

New York

User interface designer and front-end developer - Cat lover

Message Following

Skills

• Joomla
• UI / UX
• HTML
• CSS

 

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;

?>

<?php foreach ($list as $item) : ?>
<div class="card card-container border-info">
	
	<?php if ($item->featured == 1) : ?>
	<div class="card-header">
		<span class="ml-4 mt-3 py-2 px-2 badge badge-warning">PRO</span> 
	</div>
    <?php else : ?>
	<div class="card-header">
		<span class="ml-4 mt-3 py-2 text-white px-2 badge badge-info">MEMBER</span> 
	</div>	
	<?php endif; ?>
	
	<div class="card-body text-center">
		<?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="round" src="/<?php echo $article_image; ?>" alt="" /> <!-- intro image -->
		
		<h3 class="h2"><?php echo $item->title; ?></h3><!-- Article title -->
		
		<h6><?php echo $item->displayCategoryTitle; ?></h6><!-- category article -->
		
		<p><?php echo $item->displayIntrotext; ?></p><!-- intro text -->
		
		<div class="buttons">
			<button class="btn btn-info"> Message </button> 
			<button class="btn btn-outline-info"> Following </button>
		</div>
	</div>
	
	<div class="card-footer">
		<div class="skills">
			<h6>Skills</h6>
			<!-- tags -->
			<ul class="list-inline">
				<?php $item->urls = new JRegistry($item->urls); ?>
				<li class="list-inline-item btn btn-outline-secondary my-1"><small><?php echo $article_image_alt ?></small></li>
				<li class="list-inline-item btn btn-outline-secondary my-1"><small><?php echo $item->urls->get('urlatext'); ?></small></li>
				<li class="list-inline-item btn btn-outline-secondary my-1"><small><?php echo $item->urls->get('urlbtext'); ?></small></li>
				<li class="list-inline-item btn btn-outline-secondary my-1"><small><?php echo $item->urls->get('urlctext'); ?></small></li>
			</ul>
		</div>
	</div>	
</div>
<?php endforeach; ?>

CSS

.card-container .round {
	border: 1px solid #17A2B8;
	border-radius: 50%;
	padding: 7px;
}

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.