This Joomla 4 override allows you to display a list of users in a social media style simply using 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\Layout\LayoutHelper;
	use Joomla\CMS\HTML\HTMLHelper;
	use Joomla\Utilities\ArrayHelper;
	use Joomla\CMS\Router\Route;
	
	$images  = json_decode($displayData->images);	
	
	if (!$list)
	{
		return;
	}
	
	$img       = HTMLHelper::cleanImageURL($images->image_fulltext);
	$alt       = empty($images->image_fulltext_alt) && empty($images->image_fulltext_alt_empty) ? '' : 'alt="' . htmlspecialchars($images->image_fulltext_alt, ENT_COMPAT, 'UTF-8') . '"';
	
?>

<div class="friend-list">
	<div class="row row-cols-1 row-cols-md-3 g-4<?php echo $moduleclass_sfx; ?>"> <!-- Because we want 3 items per row -->
		
		<?php foreach ($list as $item) : ?>
		
		<div class="col-md-4 col-sm-6">
			
			<div class="friend-card h-100">
				<?php
					$images = json_decode($item->images);
					$item->imageSrc = '';
					$item->imageAlt = '';
					$item->imageCaption = '';
					$item->imageSrc = htmlspecialchars($images->image_fulltext, ENT_COMPAT, 'UTF-8');
					$item->imageAlt = htmlspecialchars($images->image_fulltext_alt, ENT_COMPAT, 'UTF-8');
					if ($images->image_intro_caption)
					{
						$item->imageCaption = htmlspecialchars($images->image_fulltext_caption, ENT_COMPAT, 'UTF-8');
					}
				?>
				<!-- Header banner / Image fulltext -->
				<div class="img-intro pull cover"> 
					
					<div class="img-intro pull-<?php echo htmlspecialchars($images->float_first); ?>"> 
						<figure class="newsflash-image">
							<?php echo LayoutHelper::render(
								'joomla.html.image',
								[
								'src' => $item->imageSrc,
								'alt' => $item->imageAlt,
								]
							); ?>
							<?php if (!empty($item->imageCaption)) : ?>
							<figcaption>
								<?php echo $item->imageCaption; ?>
							</figcaption>
							<?php endif; ?>
						</figure>
					</div>
				</div>
				
				<!-- Avatar / Intro image -->
				<div class="card-info">
					<div class="img-thumbnail img-intro pull"> 
						<?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;
							}?>  					
							<a href="<?php echo $item->link; ?>">
								<img class="profile-photo-lg" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
							</a>					
					</div>
					
					<div class="friend-info pt-2">
						
						<div class="d-flex justify-content-between">
							
							<!-- Name / Article title -->
							<div class="me-auto">
								<h5><strong>
									<?php if ($params->get('link_titles') == 1) : ?>
									<?php $attributes = ['class' => 'mod-articles-category-title ' . $item->active]; ?>
									<?php $link = htmlspecialchars($item->link, ENT_COMPAT, 'UTF-8', false); ?>
									<?php $title = htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8', false); ?>
									<?php echo HTMLHelper::_('link', $link, $title, $attributes); ?>
									<?php else : ?>
									<?php echo $item->title; ?>
									<?php endif; ?>
								</strong></h5> 
							</div>
							
							<!-- Link / article category -->
							<div class="">								
								<div class="">
									<?php echo $item->displayCategoryTitle; ?>
								</div>							
							</div> 
							
						</div>
						
						<!-- Bio / Intro text -->
						<?php if ($params->get('show_introtext')) : ?>
						<p class="mod-articles-category-introtext small">
							<?php echo $item->displayIntrotext; ?>
						</p>
						<?php endif; ?>
						
					</div>
					
				</div>
			</div>
		</div>                
		<?php endforeach; ?>
	</div>
</div>

CSS

.friend-list .friend-card{
  border-radius: 4px;
  border-bottom: 1px solid #f1f2f2;
  overflow: hidden;
  margin-bottom: 20px;
}
.friend-list .friend-card .card-info{
  padding: 0 20px 10px;
}
.friend-list .friend-card .card-info img.profile-photo-lg{
  margin-top: -60px;
  border: 7px solid #fff;
}
img.profile-photo-lg {
    height: 80px;
    width: 80px;
    border-radius: 50%;
}

This Joomla 3 override allows you to display a list of users in a social media style simply using Joomla's mod_weblinks 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  Weblinks
 * @author		web-eau.net
 * @copyright   Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
?>

<?php if ($params->get('groupby', 0)) : ?>
	<?php $cats = array(); ?>
	<?php $cols = $params->get('groupby_columns', 3); ?>
	<?php foreach ($list as $l) : ?>
		<?php $cats[] = array('catid' => $l->catid, 'title' => $l->category_title); ?>
	<?php endforeach; ?>
	<?php $cats = array_values(array_map('unserialize', array_unique(array_map('serialize', $cats)))); ?>
	<?php foreach ($cats as $k => $cat) : ?>
		<?php $items = array(); ?>
		<?php foreach ($list as $item) : ?>
			<?php if ($item->catid == $cat['catid']) : ?>
				<?php $items[] = $item; ?>
			<?php endif; ?>
		<?php endforeach; ?>
		<?php if ($cols > 1) : ?>
			<?php if ($k % $cols == 0) : ?>
				<div class="row row-fluid">
			<?php endif; ?>
			<div class="span<?php echo (12 / $cols); ?>">
		<?php endif; ?>
		<?php if ($params->get('groupby_showtitle', 1)) : ?>
			<h4><?php echo htmlspecialchars($cat['title'], ENT_COMPAT, 'UTF-8'); ?></h4>
		<?php endif; ?>
			<ul class="weblinks<?php echo $moduleclass_sfx; ?>">
				<?php foreach ($items as $item) : ?>
					<li>
						<?php $link = $item->link; ?>
						<?php
						switch ($item->params->get('target', 3))
						{
							case 1:
								// Open in a new window
								echo '<a href="' . $link . '" target="_blank" rel="noopener" rel="' . $params->get('follow', 'nofollow') . '">' .
									htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8') . '</a>';
								break;

							case 2:
								// Open in a popup window
								echo "<a href=\"#\" onclick=\"window.open('" . $link . "', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false\">" .
									htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8') . '</a>';
								break;

							default:
								// Open in parent window
								echo '<a href="' . $link . '" rel="noopener" rel="' . $params->get('follow', 'nofollow') . '">' .
									htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8') . '</a>';
								break;
						}
						?>
						<?php if ($params->get('description', 0)) : ?>
							<?php echo nl2br($item->description); ?>
						<?php endif; ?>

						<?php if ($params->get('hits', 0)) : ?>
							<?php echo '(' . $item->hits . ' ' . JText::_('MOD_WEBLINKS_HITS') . ')'; ?>
						<?php endif; ?>
					</li>
				<?php endforeach; ?>
			</ul>
		<?php if ($cols > 1) : ?>
			</div>
			<?php if(($k + 1) % $cols == 0 || $k == count($cats) - 1) : ?>
				</div>
			<?php endif; ?>
		<?php endif; ?>
	<?php endforeach; ?>
      
<?php else : ?>
  
<div class="container">  
    <div class="friend-list">
		
		<div class="row <?php echo $moduleclass_sfx; ?>">
	
			<?php foreach ($list as $item) : ?>
		
            <div class="col-md-4 col-sm-6">
				<div class="friend-card">
				
					<?php $images = json_decode($item->images); ?>
					<?php  if (isset($images->image_first) and !empty($images->image_first)) : ?>
					<div class="img-intro pull-<?php echo htmlspecialchars($images->float_first); ?>"> 
						<img alt="" class="img-responsive cover" src="<?php echo $images->image_first; ?>" />
					</div>
					<?php endif; ?>	
					
					<div class="card-info">
						<?php $images = json_decode($item->images); ?>
						<?php  if (isset($images->image_second) and !empty($images->image_second)) : ?>
						<div class="img-thumbnail img-intro pull-<?php echo htmlspecialchars($images->float_second); ?>"> 
							<img alt="" class="profile-photo-lg" src="<?php echo htmlspecialchars($images->image_second); ?>" />
						</div>
						<?php endif; ?>
						
						<div class="friend-info pt-2">
						
							<div class="d-flex justify-content-between">
							 
								<div class="">
								<h5><strong>
								<?php echo htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8'); ?>
								</strong></h5> 
								</div>
							
								<div class="">							
								<?php $link = $item->link; ?>
								<?php
									switch ($item->params->get('target', 3))
									{
										case 1:
										// Open in a new window
										echo '<a ref="' . $link . '" class="---" target="_blank" rel="noopener" rel="' . $params->get('follow', 'nofollow') . '">website</a>';
										break;
										
										case 2:
										// Open in a popup window
										echo "<a class=\"---\" ref=\"#\" onclick=\"window.open('" . $link . "', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false\">" .
										htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8') . '</a>';
										break;
										
										default:
										// Open in parent window
										echo '<a ref="' . $link . '" class="---" rel="noopener" rel="' . $params->get('follow', 'nofollow') . '">Website</a>';
										break;
									}
								?>	
								</div>                        	
							</div>
							
							<?php if ($params->get('description', 0)) : ?>
							<p><?php echo nl2br($item->description); ?></p>
							<?php endif; ?> 
							
						</div>
						
					</div>
				</div>
			</div>                
		<?php endforeach; ?>
		</div>
	</div>
	
</div>
<?php endif; ?>

CSS

.friend-list .friend-card{
  border-radius: 4px;
  border-bottom: 1px solid #f1f2f2;
  overflow: hidden;
  margin-bottom: 20px;
}
.friend-list .friend-card .card-info{
  padding: 0 20px 10px;
}
.friend-list .friend-card .card-info img.profile-photo-lg{
  margin-top: -60px;
  border: 7px solid #fff;
}
img.profile-photo-lg {
    height: 80px;
    width: 80px;
    border-radius: 50%;
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net