Related articles

This Joomla 4 override adds the intro image to the articles displayed by the module tags similar. At the bottom of this article, you can download the file of the override.

Joomla 4 frontend rendering

PhP markup

This override goes there: /templates/YOUR-TEMPLATE/html/mod_tags_similar/

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_tags_similar
 * @author		web-eau.net
 * @copyright   (C) 2013 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\Router\Route;
use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

$db = JFactory::getDbo();
$query = $db->getQuery(true)
		->select($db->quoteName(array('core_content_id', 'core_images', 'core_body')))
		->from($db->quoteName('#__ucm_content'))
		->where($db->quoteName('core_content_id') . ' IN (' . implode(',', array_column($list, 'core_content_id')) . ')');
$extraData = $db->setQuery($query)->loadObjectList('core_content_id');

?>

<div class="row row-cols-1 row-cols-md-3 g-4 mb-3"> // to display 3 items in a row - See Bootstrap documentation for details
  
	<?php foreach ($list as $i => $item) : ?>
  
		<div class="col">
			<div class="item-content border rounded-3 h-100 py-3">              

              	<a href="<?php echo Route::_($item->link); ?>">
					<?php // Display intro image ?>
					<?php $images = json_decode($extraData[$item->core_content_id]->core_images); ?>
					<?php if (!empty($images->image_intro)) : ?>
					<div class="intro-img-tag my-auto text-center">
					<img 
						 src="<?php echo htmlspecialchars($images->image_intro, ENT_QUOTES, 'UTF-8'); ?>" 
						 alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_QUOTES, 'UTF-8'); ?>" 
						 class="img-fluid rounded-0 card-img-top" loading="lazy">                  
					</div>
					<?php endif; ?>
                </a>
				
				<div class="card-body">                  
					<?php if (($item->type_alias === 'com_users.category') || ($item->type_alias === 'com_banners.category')) : ?>
						<?php if (!empty($item->core_title)) : ?>
							<?php echo htmlspecialchars($item->core_title, ENT_COMPAT, 'UTF-8'); ?>
						<?php endif; ?>
					<?php else : ?>

					<p class="px-4 pt-3">              
						<a class="fs-5" href="<?php echo Route::_($item->link); ?>">
							<?php if (!empty($item->core_title)) : ?>
								<?php echo htmlspecialchars($item->core_title, ENT_COMPAT, 'UTF-8'); ?>
							<?php endif; ?>
						</a>  
					</p>
            
				</div>            
			<?php endif; ?>
					
			</div>
		</div>
		
	<?php endforeach; ?>
	
</div>

Download the override

Install the override

Enjoy the override

PayPalMe with a beer