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.
Joomla 4 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>