This Joomla 4 override allows you to display some articles with their intro image, title and intro text in a blog style simply with Joomla's mod_stats 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_latest
		* @Author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	defined('_JEXEC') or die;
?>  
<div class="projects-horizontal mt-5">
	<div class="container">		
		<div class="row projects">				
			<?php foreach ($list as $item) : ?>
			<div class="col-sm-6 pb-5">  
				<div class="row">
					<div class="col-md-12 col-lg-6">
						<!-- 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="img-fluid" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
							</a>
					</div>
					<div class="col">									
						<h5 class="nam">								
							<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
						</h5>
						<p class="description"><?php echo JHTML::_('string.truncate', $item->introtext, 50, false, false) ; ?></p>	
					</div>
				</div>
			</div>	
			<?php endforeach; ?>
		</div>
	</div>
</div>

CSS

.projects-horizontal {
  color:#313437;
  background-color:#fff;
}
.projects-horizontal p {
  color:#7d8285;
}
.projects-horizontal h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}
@media (max-width:767px) {
  .projects-horizontal h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}
.projects-horizontal .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto 10px;
}
.projects-horizontal .projects {
  padding-bottom:40px;
}
.projects-horizontal .item {
  padding-top:60px;
  min-height:160px;
}
@media (max-width:767px) {
  .projects-horizontal .item {
    padding-top:40px;
    min-height:160px;
  }
}
.projects-horizontal .item .name {
  font-size:18px;
  font-weight:bold;
  margin-top:10px;
  margin-bottom:15px;
  color:inherit;
}
 

This Joomla 3 override allows you to display some articles with their intro image, title and intro text in a blog style simply with Joomla's mod_stats module. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_latest
		* @Author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
?>  

<div class="projects-horizontal">
	<div class="container">		
		<div class="row projects">				
			
			<?php foreach ($list as $item) : ?>
			
			<div class="col-sm-6 pb-5">  
				<div class="row">
					<div class="col-md-12 col-lg-6">
						
						<!-- 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="img-fluid" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
							</a>
							 
					</div>
					
					<div class="col">									
						<h5 class="nam">								
							<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
						</h5>
						<p class="description"><?php echo JHTML::_('string.truncate', $item->introtext, 50, false, false) ; ?></p>	
					</div>
					
				</div>
			</div>	
			<?php endforeach; ?>
			
		</div>
	</div>
</div>

CSS

.projects-horizontal {
  color:#313437;
  background-color:#fff;
}
.projects-horizontal p {
  color:#7d8285;
}
.projects-horizontal h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}
@media (max-width:767px) {
  .projects-horizontal h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}
.projects-horizontal .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto 10px;
}
.projects-horizontal .projects {
  padding-bottom:40px;
}
.projects-horizontal .item {
  padding-top:60px;
  min-height:160px;
}
@media (max-width:767px) {
  .projects-horizontal .item {
    padding-top:40px;
    min-height:160px;
  }
}
.projects-horizontal .item .name {
  font-size:18px;
  font-weight:bold;
  margin-top:10px;
  margin-bottom:15px;
  color:inherit;
}
 

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net