Graphic portfolio

This Joomla 4 override allows you to display a graphic portfolio with 6 items simply using Joomla's mod_articles_category 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_category
 * @author 	    web-eau.net
 * @copyright   (C) 2010 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;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\LayoutHelper;

if (!$list)
{
	return;
}

?>

<div class="container">
	
    <div class="row form-row align-items-center">
	
		<?php 
			$article_image   = [];
			$article_image_alt   = [];
		?>
      
		<?php foreach ($list as $item) : ?>
			<?php 
      		$article_images  = json_decode($item->images);						
			if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
			$article_image[$item->id]  = $article_images->image_intro;
			$article_image_alt[$item->id]  = $article_images->image_intro_alt;
			} 
      		else 
            {
			$article_image[$item->id]  = 'images/assets/grey-bg.png'; // image placeholder
			$article_image_alt[$item->id]  = 'No image'; // alt image placeholder
			} 
		?> 

		<?php endforeach; ?>
	
		<div class="col-3">
			
			<div class="img-square">
				<a class="" href="<?php echo $list[0]->link; ?>">
					<img class="img-cover" src="<?php echo $article_image[$list[0]->id]; ?>" alt="<?php echo $article_image_alt[$list[0]->id]; ?>" />
				</a>	
			</div>
			
		</div>
		
		<div class="col-6">
		
			<div class="row form-row align-items-end mb-2">
			
				<div class="col-7">
					
					<div class="img-square">
						<a class="" href="<?php echo $list[1]->link; ?>">
							<img class="img-cover" src="<?php echo $article_image[$list[1]->id]; ?>" alt="<?php echo $article_image_alt[$list[1]->id]; ?>" />
						</a>					
					</div>
					
				</div>
				
				<div class="col-5">
					
					<div class="img-square">
						<a class="" href="<?php echo $list[2]->link; ?>">
							<img class="img-cover" src="<?php echo $article_image[$list[2]->id]; ?>" alt="<?php echo $article_image_alt[$list[2]->id]; ?>" />
						</a>						
					</div>
					
				</div>
				
			</div> 
			
			<div class="row form-row">
				<div class="col-5">
					
					<div class="img-square">
						<a class="" href="<?php echo $list[3]->link; ?>">
							<img class="img-cover" src="<?php echo $article_image[$list[3]->id]; ?>" alt="<?php echo $article_image_alt[$list[3]->id]; ?>" />
						</a>	
					</div>
					
				</div>
				
				<div class="col-7">
					
					<div class="img-square">
						<a class="" href="<?php echo $list[4]->link; ?>">
							<img class="img-cover" src="<?php echo $article_image[$list[4]->id]; ?>" alt="<?php echo $article_image_alt[$list[4]->id]; ?>" />
						</a>	
					</div>
					
				</div>
			</div> 
			
		</div>
		
		<div class="col-3">
			
			<div class="img-square">
				<a class="" href="<?php echo $list[5]->link; ?>">
					<img class="img-cover" src="<?php echo $article_image[$list[5]->id]; ?>" alt="<?php echo $article_image_alt[$list[5]->id]; ?>" />
				</a>	
			</div>
			
		</div>
		
	</div> 
	
</div>

CSS

.align-items-center {
    -webkit-box-align: center!important;
    align-items: center!important;
}
.form-row {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.img-square {
    position: relative;
    padding-bottom: 100%;
}
.img-square .img-cover {
    position: absolute;
}
.img-cover {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
img {
    vertical-align: middle;
    border-style: none;
}