This Joomla 4 override allows you to display a profile card 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;
	}
	
?>

<div class="row row-cols-1 row-cols-md-3 g-4">
	
	<?php foreach ($list as $item) : ?>
	<div class="col">
		<div class="card card-container border">
			
			<?php if ($item->featured == 1) : ?>
			<div class="card-header pb-5">
				<h3 class="me-4 mt-3 py-2 px-2 fs-5 badge badge-primary">PRO</h3> 
			</div>
			<?php else : ?>
			<div class="card-header pb-5">
				<h3 class="me-4 mt-3 py-2 fs-5 px-2 badge badge-info">MEMBER</h3> 
			</div>	
			<?php endif; ?>
			
			<div class="card-body pt-4 text-center">
				<div class="py-4">
					<?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 -->
				</div>
				
				<h3 class="text-primary fs-2"><?php echo $item->title; ?></h3><!-- Article title -->
				
				<h6><?php echo $item->displayCategoryTitle; ?></h6><!-- category article -->
				
				<p class="px-4"><?php echo $item->displayIntrotext; ?></p><!-- intro text -->
				
				<div class="buttons">
					<button class="btn btn-primary"> Message </button> 
					<button class="btn btn-outline-primary"> Following </button>
				</div>
			</div>
			
			<div class="card-footer">
				<div class="skills">
					<h6 class="text-muted">Skills</h6>
					<!-- tags -->
					<ul class="list-inline">
						<?php $item->urls = new JRegistry($item->urls); ?>
						<li class="list-inline-item btn btn-outline-primary my-1"><small><?php echo $item->urls->get('urlatext'); ?></small></li>
						<li class="list-inline-item btn btn-outline-primary my-1"><small><?php echo $item->urls->get('urlbtext'); ?></small></li>
						<li class="list-inline-item btn btn-outline-primary my-1"><small><?php echo $item->urls->get('urlctext'); ?></small></li>
					</ul>
				</div>
			</div>	
		</div>
	</div>
	<?php endforeach; ?>  
</div>

CSS

.card-container {
	background-color:rgba(0,0,0,.125) !important;
}
.card-container .round {
	width:128px;height:128px;border: 1px solid #17A2B8;border-radius: 50%;padding: 7px;
}

This Joomla 3 override allows you to display a profile card 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;

?>

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

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net