This Joomla 4 override allows you to display a lead article plus 4 others articles aside simply by 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\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\LayoutHelper;
if (!$list)
{
return;
}
?>
<div class="blog-home3 py-5">
<div class="contain">
<div class="row">
<div class="col-md-12">
<?php
$article_image = [];
$article_image_alt = [];
?>
<?php foreach ($list as $item) : ?>
<?php
$article_images = json_decode($item->images);
if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
$article_image[$item->id] = $article_images->image_intro;
$article_image_alt[$item->id] = $article_images->image_intro_alt;
} else {
$article_image[$item->id] = 'images/assets/grey-bg.png'; // image placeholder
$article_image_alt[$item->id] = 'No image'; // alt image placeholder
}
?>
<?php endforeach; ?>
<div class="row">
<!-- lead article -->
<div class="col-lg-6">
<div class="border mb-4">
<!-- intro image -->
<a class="" href="<?php echo $list[0]->link; ?>">
<img class="card-img-top" src="<?php echo $article_image[$list[0]->id]; ?>" alt="<?php echo $article_image_alt[$list[0]->id]; ?>" />
</a>
<!-- author + publish date -->
<div class="date-pos text-center text-white p-3 bg-success-gradiant">
<span class="px-2 text-uppercase fs-6"><?php echo $list[0]->displayAuthorName; ?></span>
<span class="px-2 text-uppercase fs-6"><?php echo $list[0]->displayDate; ?></span>
</div>
<div class="card-body">
<!-- article title -->
<h4 class="font-weight-medium mt-3">
<a href="<?php echo $list[0]->link; ?>" class="link text-decoration-none mod-articles-category-title <?php echo $list[0]->active; ?>"><?php echo $list[0]->title; ?></a>
</h4>
<!-- introtext -->
<p class="pt-3 m-t-20"><?php echo $list[0]->displayIntrotext; ?></p>
</div>
</div>
</div>
<!-- articles column -->
<div class="col-lg-6">
<div class="row">
<!-- article #2 -->
<div class="col-md-6">
<div class="border mb-4">
<a class="" href="<?php echo $list[1]->link; ?>">
<img class="card-img-top" src="<?php echo $article_image[$list[1]->id]; ?>" alt="<?php echo $article_image_alt[$list[1]->id]; ?>" />
</a>
<div class="date-pos text-center text-white p-3 bg-success-gradiant">
<span class="px-2 text-uppercase"><?php echo $list[1]->displayAuthorName; ?></span>
<span class="px-2 text-uppercase"><?php echo $list[1]->displayDate; ?></span>
</div>
<div class="card-body">
<h5 class="font-weight-medium mt-3">
<a href="<?php echo $list[1]->link; ?>" class="link text-decoration-none mod-articles-category-title <?php echo $list[1]->active; ?>"><?php echo $list[1]->title; ?></a>
</h5>
</div>
</div>
</div>
<!-- article #3 -->
<div class="col-md-6">
<div class="border mb-4">
<a class="" href="<?php echo $list[2]->link; ?>">
<img class="card-img-top" src="<?php echo $article_image[$list[2]->id]; ?>" alt="<?php echo $article_image_alt[$list[2]->id]; ?>" />
</a>
<div class="date-pos text-center text-white p-3 bg-success-gradiant">
<span class="px-2 text-uppercase"><?php echo $list[2]->displayAuthorName; ?></span>
<span class="px-2 text-uppercase"><?php echo $list[2]->displayDate; ?></span>
</div>
<div class="card-body">
<h5 class="font-weight-medium mt-3">
<a href="<?php echo $list[2]->link; ?>" class="link text-decoration-none mod-articles-category-title <?php echo $list[2]->active; ?>"><?php echo $list[2]->title; ?></a>
</h5>
</div>
</div>
</div>
<!-- article #4 -->
<div class="col-md-6">
<div class="border mb-4">
<a class="" href="<?php echo $list[3]->link; ?>">
<img class="card-img-top" src="<?php echo $article_image[$list[3]->id]; ?>" alt="<?php echo $article_image_alt[$list[3]->id]; ?>" />
</a>
<div class="date-pos text-center text-white p-3 bg-success-gradiant">
<span class="px-2 text-uppercase"><?php echo $list[3]->displayAuthorName; ?></span>
<span class="px-2 text-uppercase"><?php echo $list[3]->displayDate; ?></span>
</div>
<div class="card-body">
<h5 class="font-weight-medium mt-3">
<a href="<?php echo $list[3]->link; ?>" class="link text-decoration-none mod-articles-category-title <?php echo $list[3]->active; ?>"><?php echo $list[3]->title; ?></a>
</h5>
</div>
</div>
</div>
<!-- article #5 -->
<div class="col-md-6">
<div class="border mb-4">
<a class="" href="<?php echo $list[4]->link; ?>">
<img class="card-img-top" src="<?php echo $article_image[$list[4]->id]; ?>" alt="<?php echo $article_image_alt[$list[4]->id]; ?>" />
</a>
<div class="date-pos text-center text-white p-3 bg-success-gradiant">
<span class="px-2 text-uppercase"><?php echo $list[4]->displayAuthorName; ?></span>
<span class="px-2 text-uppercase"><?php echo $list[4]->displayDate; ?></span>
</div>
<div class="card-body">
<h5 class="font-weight-medium mt-3">
<a href="<?php echo $list[4]->link; ?>" class="link text-decoration-none mod-articles-category-title <?php echo $list[4]->active; ?>"><?php echo $list[4]->title; ?></a>
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>CSS
.blog-home3 h1,
.blog-home3 h2,
.blog-home3 h3,
.blog-home3 h4,
.blog-home3 h5,
.blog-home3 h6 {
color: #3e4555;
}
.blog-home3 h5 {
line-height: 22px;
font-size: 18px;
}
.blog-home3 a.link {
color: #3e4555;
}
.blog-home3 a.link:hover {
color: #316ce8;
}
.blog-home3 .font-weight-medium {
font-weight: 500;
}
.blog-home3 .bg-light {
background-color: #f4f8fa !important;
}
.blog-home3 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.blog-home3 .card.card-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.blog-home3 .on-hover {
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
.blog-home3 .on-hover:hover {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
.blog-home3 .bg-success-gradiant {
background: #2cdd9b;
background: -webkit-linear-gradient(legacy-direction(to right), #2cdd9b 0%, #1dc8cc 100%);
background: -webkit-gradient(linear, left top, right top, from(#2cdd9b), to(#1dc8cc));
background: -webkit-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
background: -o-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
background: linear-gradient(to right, #2cdd9b 0%, #1dc8cc 100%);
}
.blog-home3 .date-pos {
font-size: 12px;
}
.blog-home3 a {
overflow: hidden;
}
.blog-home3 a img {
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
.blog-home3 a img:hover {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}