This Joomla 4 override allows you to display some latest articles 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\Language\Text;
if (!$list)
{
return;
}
?>
<section class="blog-me pt-100 pb-100" id="blog">
<div class="container">
<div class="row">
<div class="col-xl-6 mx-auto text-center">
<div class="section-title mb-5">
<h4>Latest blog</h4>
</div>
</div>
</div>
<div class="row">
<?php foreach ($list as $item) : ?>
<div class="col-lg-4 col-md-6">
<div class="single-blog">
<div class="blog-img">
<?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="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
<div class="post-category">
<?php if ($item->displayCategoryTitle) : ?>
<span class="mod-articles-category-category">
<?php echo $item->displayCategoryTitle; ?>
</span>
<?php endif; ?>
</div>
</div>
<div class="blog-content">
<div class="blog-title">
<h4>
<?php if ($params->get('link_titles') == 1) : ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</h4>
<div class="meta">
<ul class="list-unstyled">
<li>
<?php if ($item->displayDate) : ?>
<span class="mod-articles-category-date">
<?php echo $item->displayDate; ?>
</span>
<?php endif; ?>
</li>
</ul>
</div>
</div>
<?php if ($params->get('show_introtext')) : ?>
<p class="mod-articles-category-introtext">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
<?php if ($params->get('show_readmore')) : ?>
<p class="mod-articles-category-readmore">
<a href="<?php echo $item->link; ?>" class="box_btn mod-articles-category-title <?php echo $item->active; ?>">
<?php if ($item->params->get('access-view') == false) : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
<?php elseif ($readmore = $item->alternative_readmore) : ?>
<?php echo $readmore; ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
<?php else : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php endif; ?>
</a>
</p>
<?php endif; ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section> CSS
.pb-100 {
padding-bottom: 100px;
}
.pt-100 {
padding-top: 100px;
}
.mb-100 {
margin-bottom: 100px;
}
a {
text-decoration: none;
color: #333;
-webkit-transition: .4s;
transition: .4s;
}
.section-title {
position: relative;
}
.section-title p {
font-size: 16px;
margin-bottom: 5px;
font-weight: 400;
}
.section-title h4 {
font-size: 40px;
font-weight: 600;
text-transform: capitalize;
position: relative;
padding-bottom: 20px;
display: inline-block;
}
.section-title h4::before {
position: absolute;
content: "";
width: 80px;
height: 2px;
background-color: #d8d8d8;
bottom: 0;
left: 50%;
margin-left: -40px;
}
.section-title h4::after {
position: absolute;
content: "";
width: 50px;
height: 2px;
background-color: #FF7200;
left: 0;
bottom: 0;
left: 50%;
margin-left: -25px;
}
.blog-img {
position: relative;
}
.blog-img img {
width: 100%;
}
.post-category a {
display: inline-block;
background-color: #FF7200;
color: #fff;
font-size: 15px;
padding: 5px 20px;
}
.single-blog:hover img {
opacity: .85;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"
}
.post-category {
position: absolute;
left: 0;
bottom: 0;
}
.blog-content {
padding: 30px 20px;
}
.single-blog {
border: 1px solid #eee;
}
.blog-title h4 {
font-size: 20px;
font-weight: 500;
margin-bottom: 5px;
}
.meta ul {
margin: 0;
padding: 0;
list-style: none;
}
.meta {
margin-bottom: 20px;
opacity: .85;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
}
.blog-content a.box_btn {
display: inline-block;
background-color: #FF7200;
padding: 5px 15px;
color: #fff;
text-transform: capitalize;
margin-top: 20px;
}
a.box_btn::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: #CC5B00;
left: -100%;
top: 0;
-webkit-transition: .5s;
transition: .5s;
z-index: -1;
}
a.box_btn {
overflow: hidden;
z-index: 2;
-webkit-transition: .5s;
transition: .5s;
position: relative;
text-decoration:none;
}
a.box_btn:hover::before {
left: 0;
z-index: -1;
}This Joomla 3 override allows you to display some latest articles simply using 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;
?>
<section class="blog-me pt-100 pb-100" id="blog">
<div class="container">
<div class="row">
<div class="col-xl-6 mx-auto text-center">
<div class="section-title mb-5">
<h4>Latest blog</h4>
</div>
</div>
</div>
<div class="row">
<!--
<ul class="category-module<?php echo $moduleclass_sfx; ?>">
<li>-->
<?php foreach ($list as $item) : ?>
<div class="col-lg-4 col-md-6">
<div class="single-blog">
<div class="blog-img">
<?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="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
<div class="post-category">
<?php if ($item->displayCategoryTitle) : ?>
<span class="mod-articles-category-category">
<?php echo $item->displayCategoryTitle; ?>
</span>
<?php endif; ?>
</div>
</div>
<div class="blog-content">
<div class="blog-title">
<h4>
<?php if ($params->get('link_titles') == 1) : ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</h4>
<div class="meta">
<ul class="list-unstyled">
<li>
<?php if ($item->displayDate) : ?>
<span class="mod-articles-category-date">
<?php echo $item->displayDate; ?>
</span>
<?php endif; ?>
</li>
</ul>
</div>
</div>
<?php if ($params->get('show_introtext')) : ?>
<p class="mod-articles-category-introtext">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
<?php if ($params->get('show_readmore')) : ?>
<p class="mod-articles-category-readmore">
<a href="/<?php echo $item->link; ?>" class="box_btn mod-articles-category-title <?php echo $item->active; ?>">
<?php if ($item->params->get('access-view') == false) : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
<?php elseif ($readmore = $item->alternative_readmore) : ?>
<?php echo $readmore; ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
<?php else : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php endif; ?>
</a>
</p>
<?php endif; ?>
</div>
</div>
</div>
<?php endforeach; ?>
<!--
</li>
</ul>-->
</div>
</div>
</section>CSS
.pb-100 {
padding-bottom: 100px;
}
.pt-100 {
padding-top: 100px;
}
.mb-100 {
margin-bottom: 100px;
}
a {
text-decoration: none;
color: #333;
-webkit-transition: .4s;
transition: .4s;
}
.section-title {
position: relative;
}
.section-title p {
font-size: 16px;
margin-bottom: 5px;
font-weight: 400;
}
.section-title h4 {
font-size: 40px;
font-weight: 600;
text-transform: capitalize;
position: relative;
padding-bottom: 20px;
display: inline-block;
}
.section-title h4::before {
position: absolute;
content: "";
width: 80px;
height: 2px;
background-color: #d8d8d8;
bottom: 0;
left: 50%;
margin-left: -40px;
}
.section-title h4::after {
position: absolute;
content: "";
width: 50px;
height: 2px;
background-color: #FF7200;
left: 0;
bottom: 0;
left: 50%;
margin-left: -25px;
}
.blog-img {
position: relative;
}
.blog-img img {
width: 100%;
}
.post-category a {
display: inline-block;
background-color: #FF7200;
color: #fff;
font-size: 15px;
padding: 5px 20px;
}
.single-blog:hover img {
opacity: .85;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"
}
.post-category {
position: absolute;
left: 0;
bottom: 0;
}
.blog-content {
padding: 30px 20px;
}
.single-blog {
border: 1px solid #eee;
}
.blog-title h4 {
font-size: 20px;
font-weight: 500;
margin-bottom: 5px;
}
.meta ul {
margin: 0;
padding: 0;
list-style: none;
}
.meta {
margin-bottom: 20px;
opacity: .85;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
}
.blog-content a.box_btn {
display: inline-block;
background-color: #FF7200;
padding: 5px 15px;
color: #fff;
text-transform: capitalize;
margin-top: 20px;
}
a.box_btn::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: #CC5B00;
left: -100%;
top: 0;
-webkit-transition: .5s;
transition: .5s;
z-index: -1;
}
a.box_btn {
overflow: hidden;
z-index: 2;
-webkit-transition: .5s;
transition: .5s;
position: relative;
text-decoration:none;
}
a.box_btn:hover::before {
left: 0;
z-index: -1;
}