This Joomla 4 override allows you to display an "About the author" section simply by using the Joomla's mod_articles_news 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_news
		* @author 	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;

if (!$list)
{
	return;
}

?>

<div id="author-bio" class="rounded <?php echo $moduleclass_sfx; ?>">
	
	<?php foreach ($list as $item) : ?>
	
	<div class="row my-3">
		<div class="col-md-4 m-auto text-center">
			
			<!-- Intro image -->
			<?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="author-bio-img shadow" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
			</a>
			
		</div>
		
		<div class="col-md-7 author-bio-content-info">
		
			<h3 class="author-bio-article-title"><?php echo $item->title; ?></h3>
			
			<p class="description"><?php echo $item->introtext; ?></p>
          
          	<?php $item->urls = new JRegistry($item->urls); ?>
			<div class="d-flex justify-content-start">	
				<div class=""><a href="<?php echo $item->urls->get('urlatext'); ?>" target="_blank"><i class="fab fa-facebook"></i></a></div>
				<div class="mx-4"><a href="<?php echo $item->urls->get('urlbtext'); ?>" target="_blank"><i class="fab fa-twitter"></i></a></div>
				<div class=""><a href="<?php echo $item->urls->get('urlctext'); ?>" target="_blank"><i class="fab fa-linkedin"></i></a></div>
			</div>
			
		</div>
		
		<div class="col-md-1"></div>
		
	</div>

	<?php endforeach; ?>
	
</div>

CSS

#author-bio {
	border: 1px solid #CDCDCD;
}
.author-bio-content-info {
	padding: 2%;
}
.author-bio-article-title {
	font-style: normal;
	font-weight: 600;
	font-size: 22px;
	line-height: 34px;
	color: #353535;
	margin-top: 10px;
	display: block;
}
.author-bio-img {
  	height: 150px;
    width: 150px;
    border-radius: 50%;
}
 

This Joomla 3 override allows you to display an "About the author" section simply by using the Joomla's mod_articles_news 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_news
		* @author 	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
defined('_JEXEC') or die;

?>

<div id="author-bio" class="rounded <?php echo $moduleclass_sfx; ?>">
	
	<?php foreach ($list as $item) : ?>
	
	<div class="row my-3">
		<div class="col-md-4 m-auto text-center">
			
			<!-- Intro image -->
			<?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="author-bio-img shadow" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
			</a>
			
		</div>
		
		<div class="col-md-7 author-bio-content-info">
		
			<h3 class="author-bio-article-title"><?php echo $item->title; ?></h3>
			
			<p class="description"><?php echo $item->introtext; ?></p>
          
          	<?php $item->urls = new JRegistry($item->urls); ?>
			<div class="d-flex justify-content-start">	
				<div class=""><a href="<?php echo $item->urls->get('urlatext'); ?>" target="_blank"><i class="fab fa-facebook"></i></a></div>
				<div class="mx-4"><a href="<?php echo $item->urls->get('urlbtext'); ?>" target="_blank"><i class="fab fa-twitter"></i></a></div>
				<div class=""><a href="<?php echo $item->urls->get('urlctext'); ?>" target="_blank"><i class="fab fa-linkedin"></i></a></div>
			</div>
			
		</div>
		
		<div class="col-md-1"></div>
		
	</div>

	<?php endforeach; ?>
	
</div>

CSS

#author-bio {
	border: 1px solid #CDCDCD;
}
.author-bio-content-info {
	padding: 2%;
}
.author-bio-article-title {
	font-style: normal;
	font-weight: 600;
	font-size: 22px;
	line-height: 34px;
	color: #353535;
	margin-top: 10px;
	display: block;
}
.author-bio-img {
  	height: 150px;
    width: 150px;
    border-radius: 50%;
}
 

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net