This Joomla 4 override allows you to display a list of archived articles with their intro images simply by overriding the Joomla's /html/com_content/archive/default_items.php files. At the bottom of this article, you can download the files of the override.

Frontend rendering

PhP markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  com_content
		* @author 	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	defined('_JEXEC') or die;
	use Joomla\CMS\HTML\HTMLHelper;
	use Joomla\CMS\Language\Text;
	use Joomla\CMS\Router\Route;
	use Joomla\Component\Content\Site\Helper\RouteHelper;
	$params = $this->params;
?>
<div id="archive-items" class="pt-3 mt-3 com-content-archive__items">
	<div class="row">		
		<?php foreach ($this->items as $i => $item) : ?>
        <div class="col-md-6">
			<div class="row px-3 my-3">	
				<!-- Let's add the intro image -->
				<div class="col-md-3">					
					<?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;
						}?>  					
						<div class="view overlay rgba-white-slight shadow mb-3">	
							<a href="<?php echo $item->link; ?>">
								<img class="img-fluid rounded-0" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
							</a>
						</div>
				</div> 				
				<div class="col-md-9">  
					<?php $info = $item->params->get('info_block_position', 0); ?>
					<div class="mb-3 row<?php echo $i % 2; ?>" itemscope itemtype="https://schema.org/Article">
						<div class="page-header">
							<!-- Now, the creation date of the article -->
							<?php if ($params->get('show_create_date')) : ?>
							<dd>
								<div class="create text-muted">									
									<time datetime="<?php echo HTMLHelper::_('date', $item->created, 'c'); ?>" itemprop="dateCreated">
										<h5 class="h6 mb-3"><?php echo Text::sprintf( HTMLHelper::_('date', $item->created, Text::_('DATE_FORMAT_LC3'))); ?></h5>
									</time>									
								</div>
							</dd>
							<?php endif; ?>
							<!-- and the title of the article -->
							<h2 class="h5" itemprop="headline">
								<?php if ($params->get('link_titles')) : ?>
								<a href="<?php echo Route::_(RouteHelper::getArticleRoute($item->slug, $item->catid, $item->language)); ?>" itemprop="url">
									<?php echo $this->escape($item->title); ?>
								</a>
								<?php else : ?>
								<?php echo $this->escape($item->title); ?>
								<?php endif; ?>
							</h2>
						</div>						
					</div>
				</div>
			</div>
		</div>
		<?php endforeach; ?>
	</div>
</div>
<div class="com-content-archive__navigation w-100">
	<?php if ($this->params->def('show_pagination_results', 1)) : ?>
	<p class="com-content-archive__counter counter float-right pt-3 pr-2">
		<?php echo $this->pagination->getPagesCounter(); ?>
	</p>
	<?php endif; ?>
	<div class="com-content-archive__pagination">
		<?php echo $this->pagination->getPagesLinks(); ?>
	</div>
</div>

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net