Articles popular

mod_articles_popular

Overrides - 23 March 2019 - Last Updated: 09 September 2023 - Hits: 5036

Version Joomla 4

This Joomla 4 override allows you to display verticaly a list of articles with their intro images simply using Joomla's mod_articles_popular 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_popular
		* @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;
?>
<div class="row mostread<?php echo $moduleclass_sfx; ?> mod-list py-3">
	<?php foreach ($list as $item) : ?>
	<div class="col-md-4 py-2" itemscope itemtype="https://schema.org/Article">
	
		<!-- Add the intro image of the item -->
		<?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="card-img-top" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
			</a>
			
	</div>
	<div class="col-md-8 py-2 px-3">
		<h5 class="">		
			<a href="<?php echo $item->link; ?>" itemprop="url">
				<span itemprop="name">
					<?php echo $item->title; ?>
				</span>
			</a>
		</h5>
	</div>
	<?php endforeach; ?>
</div>

Version Joomla 3

This Joomla 3 override allows you to display verticaly a list of articles with their intro images simply using Joomla's mod_articles_popular 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_popular
		* @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;
?>

<div class="container py-3">
	
	<div class="card">
		
		<div class="row mostread<?php echo $moduleclass_sfx; ?> mod-list py-3">
			
			<?php foreach ($list as $item) : ?>
			
			<div class="col-md-4 py-2" itemscope itemtype="https://schema.org/Article">
				<?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="card-img-top" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
					</a>
			</div>
			
			<div class="col-md-8 py-2 px-3">
				
				<div class="">
					<h5 class="">		
						<a href="<?php echo $item->link; ?>" itemprop="url">
							<span itemprop="name">
								<?php echo $item->title; ?>
							</span>
						</a>
					</h5>
					
				</div>
				
			</div>
			
			<?php endforeach; ?>
			
		</div>	
	</div>
</div>