This Joomla 4 override allows you to display a portfolio section simply using the Joomla's mod_banners 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_banners
 * @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\Language\Text;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Uri\Uri;
use Joomla\Component\Banners\Site\Helper\BannerHelper;

?>

<div class="">
	
	<div class="row row-cols-1 row-cols-md-2 category-module <?php echo $moduleclass_sfx; ?>">
		
		<?php foreach ($list as $item) : ?>
		
		<div class="col">
		
			<div class="card">
				<?php $link = JRoute::_('index.php?option=com_banners&task=click&id=' . $item->id); ?>
				<?php if ($item->type == 1) : ?>
				<?php // Text based banners ?>
				<?php echo str_replace(array('{CLICKURL}', '{NAME}'), array($link, $item->name), $item->custombannercode); ?>
				<?php else : ?>
				<?php $imageurl = $item->params->get('imageurl'); ?>
				<?php $width = $item->params->get('width'); ?>
				<?php $height = $item->params->get('height'); ?>
				<?php if (BannerHelper::isImage($imageurl)) : ?>
				<?php // Image based banner ?>
				<?php $baseurl = strpos($imageurl, 'http') === 0 ? '' : JUri::base(); ?>
				<?php $alt = $item->params->get('alt'); ?>
				<?php $alt = $alt ?: $item->name; ?>
				<?php $alt = $alt ?: JText::_('MOD_BANNERS_BANNER'); ?>
				<?php if ($item->clickurl) : ?>
              
				<?php // Wrap the banner in a link ?>
				<?php $target = $params->get('target', 1); ?>
				<?php if ($target == 1) : ?>
				<?php // Open in a new window ?>
				<a href="<?php echo $link; ?>" target="_blank" rel="noopener noreferrer" title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?>">
				<img class="card-img-top" src="<?php echo $baseurl . $imageurl; ?>" alt="<?php echo $alt;?>" <?php if (!empty($width)) echo ' width="' . $width . '"';?><?php if (!empty($height)) echo ' height="' . $height . '"';?> />
				</a>
              
				<?php elseif ($target == 2) : ?>
				<?php // Open in a popup window ?>
				<a
				href="<?php echo $link; ?>" onclick="window.open(this.href, '',
				'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550');
				return false"
				title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?>">
					<img
					class="card-img-top" 
					src="<?php echo $baseurl . $imageurl; ?>"
					alt="<?php echo $alt;?>"
					<?php if (!empty($width)) echo ' width="' . $width . '"';?>
					<?php if (!empty($height)) echo ' height="' . $height . '"';?>
					/>
				</a>
				<?php else : ?>
				<?php // Open in parent window ?>
				<a
				href="<?php echo $link; ?>"
				title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?>">
					<img
					class="card-img-top" 
					src="<?php echo $baseurl . $imageurl; ?>"
					alt="<?php echo $alt;?>"
					<?php if (!empty($width)) echo ' width="' . $width . '"';?>
					<?php if (!empty($height)) echo ' height="' . $height . '"';?>
					/>
				</a>
				<?php endif; ?>
				<?php else : ?>
				<?php // Just display the image if no link specified ?>
				<img
				class="card-img-top" 
				src="<?php echo $baseurl . $imageurl; ?>"
				alt="<?php echo $alt;?>"
				<?php if (!empty($width)) echo ' width="' . $width . '"';?>
				<?php if (!empty($height)) echo ' height="' . $height . '"';?>
				/>
				<?php endif; ?>
				<?php elseif (BannerHelper::isFlash($imageurl)) : ?>
				<object
				classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
				codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
				<?php if (!empty($width)) echo ' width="' . $width . '"';?>
				<?php if (!empty($height)) echo ' height="' . $height . '"';?>
				>
					<param name="movie" value="<?php echo $imageurl; ?>" />
					<embed
					src="<?php echo $imageurl; ?>"
					loop="false"
					pluginspage="http://www.macromedia.com/go/get/flashplayer"
					type="application/x-shockwave-flash"
					<?php if (!empty($width)) echo ' width="' . $width . '"';?>
					<?php if (!empty($height)) echo ' height="' . $height . '"';?>
					/>
				</object>
				<?php endif; ?>
				<?php endif; ?>
				
				<div class="card-body">
					
					<h3 class="text-center bleu"><?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?></h3>
					
					<!-- Description -->
					<?php echo ($item->description); ?>	
					
					<!-- Bouton voir le projet -->
					<p class="text-center mod-articles-category-readmore">
						<a class="btn btn-primary mod-articles-category-title" href="<?php echo $link; ?>" target="_blank" rel="noopener noreferrer" title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?>"> Voir le projet </a>
					</p>
                  
                  	<br />
					<div class="clr"></div>
				</div>
				
			</div>
          
		</div>
		<?php endforeach; ?>
	</div>
</div>
 

This Joomla 3 override allows you to display a portfolio section simply using the Joomla's mod_banners 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;
	
	/** @var  \stdClass  $item */

	$images = json_decode($item->images);
	JLoader::register('BannerHelper', JPATH_ROOT . '/components/com_banners/helpers/banner.php');

?>


<div class="">
	
	<div class="row row-cols-1 row-cols-md-2 g-4 category-module<?php echo $moduleclass_sfx; ?>">
		
		<?php foreach ($list as $item) : ?>
		
		<div class="col">
		
			<div class="card h-100">
				<?php $link = JRoute::_('index.php?option=com_banners&task=click&id=' . $item->id); ?>
				<?php if ($item->type == 1) : ?>
				<?php // Text based banners ?>
				<?php echo str_replace(array('{CLICKURL}', '{NAME}'), array($link, $item->name), $item->custombannercode); ?>
				<?php else : ?>
				<?php $imageurl = $item->params->get('imageurl'); ?>
				<?php $width = $item->params->get('width'); ?>
				<?php $height = $item->params->get('height'); ?>
				<?php if (BannerHelper::isImage($imageurl)) : ?>
				<?php // Image based banner ?>
				<?php $baseurl = strpos($imageurl, 'http') === 0 ? '' : JUri::base(); ?>
				<?php $alt = $item->params->get('alt'); ?>
				<?php $alt = $alt ?: $item->name; ?>
				<?php $alt = $alt ?: JText::_('MOD_BANNERS_BANNER'); ?>
				<?php if ($item->clickurl) : ?>
				<?php // Wrap the banner in a link ?>
				<?php $target = $params->get('target', 1); ?>
				<?php if ($target == 1) : ?>
				<?php // Open in a new window ?>
				<a
				href="<?php echo $link; ?>" target="_blank" rel="noopener noreferrer" 
				title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?>">
					<img
					class="card-img-top" 
					src="<?php echo $baseurl . $imageurl; ?>"
					alt="<?php echo $alt;?>"
					<?php if (!empty($width)) echo ' width="' . $width . '"';?>
					<?php if (!empty($height)) echo ' height="' . $height . '"';?>
					/>
				</a>
				<?php elseif ($target == 2) : ?>
				<?php // Open in a popup window ?>
				<a
				href="<?php echo $link; ?>" onclick="window.open(this.href, '',
				'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550');
				return false"
				title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?>">
					<img
					class="card-img-top" 
					src="<?php echo $baseurl . $imageurl; ?>"
					alt="<?php echo $alt;?>"
					<?php if (!empty($width)) echo ' width="' . $width . '"';?>
					<?php if (!empty($height)) echo ' height="' . $height . '"';?>
					/>
				</a>
				<?php else : ?>
				<?php // Open in parent window ?>
				<a
				href="<?php echo $link; ?>"
				title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?>">
					<img
					class="card-img-top" 
					src="<?php echo $baseurl . $imageurl; ?>"
					alt="<?php echo $alt;?>"
					<?php if (!empty($width)) echo ' width="' . $width . '"';?>
					<?php if (!empty($height)) echo ' height="' . $height . '"';?>
					/>
				</a>
				<?php endif; ?>
				<?php else : ?>
				<?php // Just display the image if no link specified ?>
				<img
				class="card-img-top" 
				src="<?php echo $baseurl . $imageurl; ?>"
				alt="<?php echo $alt;?>"
				<?php if (!empty($width)) echo ' width="' . $width . '"';?>
				<?php if (!empty($height)) echo ' height="' . $height . '"';?>
				/>
				<?php endif; ?>
				<?php elseif (BannerHelper::isFlash($imageurl)) : ?>
				<object
				classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
				codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
				<?php if (!empty($width)) echo ' width="' . $width . '"';?>
				<?php if (!empty($height)) echo ' height="' . $height . '"';?>
				>
					<param name="movie" value="<?php echo $imageurl; ?>" />
					<embed
					src="<?php echo $imageurl; ?>"
					loop="false"
					pluginspage="http://www.macromedia.com/go/get/flashplayer"
					type="application/x-shockwave-flash"
					<?php if (!empty($width)) echo ' width="' . $width . '"';?>
					<?php if (!empty($height)) echo ' height="' . $height . '"';?>
					/>
				</object>
				<?php endif; ?>
				<?php endif; ?>
				
				<div class="card-body">
					
					<br />
					
					<h4 class="text-center vert"><?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?></h4>
					
					<!-- Description -->
					<?php echo ($item->description); ?>					
					
					<br />
					
					<!-- Bouton voir le projet -->
					<p class="text-center mod-articles-category-readmore">
						<a class="btn btn-primary mod-articles-category-title" href="<?php echo $link; ?>" target="_blank" rel="noopener noreferrer" title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?>"> Voir le projet </a>
					</p>
					<div class="clr"></div>
				</div>
				
			</div>
		</div>
		<?php endforeach; ?>
	</div>
</div>
 

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net