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>