This Joomla 4 override allows you to display some articles with their intro image, title and intro text in a blog style simply with Joomla's mod_articles_latest 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_latest
* @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;
?>
<div class="projects-horizontal mt-5">
<div class="container">
<div class="row projects">
<?php foreach ($list as $item) : ?>
<div class="col-sm-6 pb-5">
<div class="row">
<div class="col-md-12 col-lg-6">
<!-- 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="img-fluid" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
</div>
<div class="col">
<h5 class="nam">
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h5>
<p class="description"><?php echo JHTML::_('string.truncate', $item->introtext, 50, false, false) ; ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>CSS
.projects-horizontal {
color:#313437;
background-color:#fff;
}
.projects-horizontal p {
color:#7d8285;
}
.projects-horizontal h2 {
font-weight:bold;
margin-bottom:40px;
padding-top:40px;
color:inherit;
}
@media (max-width:767px) {
.projects-horizontal h2 {
margin-bottom:25px;
padding-top:25px;
font-size:24px;
}
}
.projects-horizontal .intro {
font-size:16px;
max-width:500px;
margin:0 auto 10px;
}
.projects-horizontal .projects {
padding-bottom:40px;
}
.projects-horizontal .item {
padding-top:60px;
min-height:160px;
}
@media (max-width:767px) {
.projects-horizontal .item {
padding-top:40px;
min-height:160px;
}
}
.projects-horizontal .item .name {
font-size:18px;
font-weight:bold;
margin-top:10px;
margin-bottom:15px;
color:inherit;
}Download the override
override-blog-layout-j4.zipInstall the override
Enjoy the override
This Joomla 3 override allows you to display some articles with their intro image, title and intro text in a blog style simply with Joomla's mod_articles_latest 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_latest
* @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;
?>
<div class="projects-horizontal">
<div class="container">
<div class="row projects">
<?php foreach ($list as $item) : ?>
<div class="col-sm-6 pb-5">
<div class="row">
<div class="col-md-12 col-lg-6">
<!-- 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="img-fluid" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
</div>
<div class="col">
<h5 class="nam">
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h5>
<p class="description"><?php echo JHTML::_('string.truncate', $item->introtext, 50, false, false) ; ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>CSS
.projects-horizontal {
color:#313437;
background-color:#fff;
}
.projects-horizontal p {
color:#7d8285;
}
.projects-horizontal h2 {
font-weight:bold;
margin-bottom:40px;
padding-top:40px;
color:inherit;
}
@media (max-width:767px) {
.projects-horizontal h2 {
margin-bottom:25px;
padding-top:25px;
font-size:24px;
}
}
.projects-horizontal .intro {
font-size:16px;
max-width:500px;
margin:0 auto 10px;
}
.projects-horizontal .projects {
padding-bottom:40px;
}
.projects-horizontal .item {
padding-top:60px;
min-height:160px;
}
@media (max-width:767px) {
.projects-horizontal .item {
padding-top:40px;
min-height:160px;
}
}
.projects-horizontal .item .name {
font-size:18px;
font-weight:bold;
margin-top:10px;
margin-bottom:15px;
color:inherit;
}