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;
}Inspiration: https://codepen.io/FlorinPop17/pen/EJKgKB
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;
}Inspiration: https://codepen.io/FlorinPop17/pen/EJKgKB