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

29800 Landerneau

+33 674 502 799

daniel@web-eau.net

We use cookies

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.