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

We use cookies

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.