This Joomla 4 override allows you to display your latest projects simply using 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 (C) 2006 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;
if (!$list)
{
return;
}
?>
<div class="projects-horizontal mx-5">
<div class="container">
<div class="text-center intro">
<h3 class="display-4">Projects </h3>
<p>Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet vitae. </p>
</div>
<div class="row projects">
<?php foreach ($list as $item) : ?>
<div class="col-md-6 p-4">
<div class="row">
<div class="col-md-12 col-lg-5">
<!-- 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">
<h3 class="name">
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h3>
<?php if (!$params->get('intro_only')) : ?>
<p class="description"><?php echo $item->afterDisplayTitle; ?></p>
<?php endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<?php if ($params->get('show_introtext', 1)) : ?>
<p class="description"><?php echo $item->introtext; ?></p>
<?php endif; ?>
<?php echo $item->afterDisplayContent; ?>
</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;
}
@media (max-width:991px) {
.projects-horizontal .item .name {
margin-top:22px;
}
}
.projects-horizontal .item .description {
font-size:15px;
margin-bottom:0;
}Inspiration: https://epicbootstrap.com/snippets/projects-compact
This Joomla 3 override allows you to display your latest projects simply using 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 - 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 mx-5">
<div class="container">
<div class="text-center intro">
<h3 class="display-4">Projects </h3>
<p>Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet vitae. </p>
</div>
<div class="row projects">
<?php foreach ($list as $item) : ?>
<div class="col-md-6 p-4">
<div class="row">
<div class="col-md-12 col-lg-5">
<!-- 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">
<h3 class="name">
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h3>
<?php if (!$params->get('intro_only')) : ?>
<p class="description"><?php echo $item->afterDisplayTitle; ?></p>
<?php endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<?php if ($params->get('show_introtext', 1)) : ?>
<p class="description"><?php echo $item->introtext; ?></p>
<?php endif; ?>
<?php echo $item->afterDisplayContent; ?>
</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;
}
@media (max-width:991px) {
.projects-horizontal .item .name {
margin-top:22px;
}
}
.projects-horizontal .item .description {
font-size:15px;
margin-bottom:0;
}Inspiration: https://epicbootstrap.com/snippets/projects-compact