Blog intro

This Joomla 4 override displays the intro image on the left and on the right, the infos about the content of the article. There's no extra CSS as the display is created with Bootstrap classes. The module newsflash will manage the display for you. At the bottom of this article, you can download the file 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;
use Joomla\CMS\Language\Text;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Layout\LayoutHelper;

if (!$list) {
    return;
}

?>

<div class="mod-articlesnews newsflash">
	
    <?php foreach ($list as $item) : ?>
	
        <div class="mod-articlesnews__ite row g-0 position-relative" itemscope itemtype="https://schema.org/Article">
          
			<div class="col-md-7">
		
				<!-- 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="rounded-3 shadow img-fluid" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
				</a>  
			</div>

		<div class="col-md-5 position-absolute top-50 start-50 translate-middle ms-5">
          
			<div class="card-body align-self-center small p-5 bg-white rounded-3 shadow">
			
				<!-- item title -->
				<?php if ($params->get('item_title')) : ?>
					<?php $item_heading = $params->get('item_heading', 'h4'); ?>
					<<?php echo $item_heading; ?> class="newsflash-title pe-4">
						<?php if ($item->link !== '' && $params->get('link_titles')) : ?>
						<a href="<?php echo $item->link; ?>">
							<?php echo $item->title; ?>
						</a>
						<?php else : ?>
						<?php echo $item->title; ?>
						<?php endif; ?>
					</<?php echo $item_heading; ?>>
				<?php endif; ?>
				
				<!-- introtext -->
				<?php if ($params->get('show_introtext', 1)) : ?>
					<p class="card-text pe-5"><?php echo $item->introtext; ?></p>
				<?php endif; ?>
				
				<!-- readmore button -->
				<?php if (isset($item->link) && $item->readmore != 0 && $params->get('readmore')) : ?>
       				<p class="mod-articles-category-readmore">
            			<a class="mod-articles-category-title btn btn-sm btn-primary <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
                			<?php if ($item->params->get('access-view') == false) : ?>
                   				<?php echo Text::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
                			<?php elseif ($item->alternative_readmore) : ?>
                    			<?php echo $item->alternative_readmore; ?>
                    			<?php echo HTMLHelper::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
                        			<?php if ($params->get('show_readmore_title', 0)) : ?>
                            		<?php echo HTMLHelper::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
                        	<?php endif; ?>
                			<?php elseif ($params->get('show_readmore_title', 0)) : ?>
                   	 			<?php echo Text::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
                    			<?php echo HTMLHelper::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
                			<?php else : ?>
                    			<?php echo Text::_('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
                			<?php endif; ?>
           				</a>
        			</p>
				<?php endif; ?>

			</div>	
          
		</div> 
          
        </div>
		
    <?php endforeach; ?>
</div>

Download the override

Install the override

Enjoy the override

PayPalMe with a beer