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%;
}Download the override
override-author-bio-j4.zipInstall the override
Enjoy the override
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%;
}