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;
}

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;
}

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net