This Joomla 4 override allows you to display your articles in an horizontal format simply using Joomla's mod_articles_news 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_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;
if (!$list)
{
return;
}
?>
<div class="row">
<div class="col-md-12 p-3">
<?php foreach ($list as $item) : ?>
<div class="card mb-3">
<div class="row no-gutters newsflash<?php echo $moduleclass_sfx; ?> ">
<div class="col-md-4">
<?php if ($params->get('img_intro_full') !== 'none' && !empty($item->imageSrc)) : ?>
<img class="card-img-left img-fluid" src="<?php echo $item->imageSrc; ?>" alt="<?php echo $item->imageAlt; ?>" height="100%" />
<?php endif; ?>
</div>
<div class="col-md-8">
<div class="px-4">
<?php if ($params->get('item_title')) : ?>
<?php $item_heading = $params->get('item_heading', 'h4'); ?>
<<?php echo $item_heading; ?> class="card-titl newsflash-title pt-3">
<?php if ($item->link !== '' && $params->get('link_titles')) : ?>
<a href="<?php echo $item->link; ?>">
<<?php echo $item_heading; ?> class="card-titl newsflash-title pt-3"><?php echo $item->title; ?></<?php echo $item_heading; ?>>
</a>
<?php else : ?>
<<?php echo $item_heading; ?> class="card-titl newsflash-title pt-3"><?php echo $item->title; ?></<?php echo $item_heading; ?>>
<?php endif; ?>
</<?php echo $item_heading; ?>>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : ?>
<p class="card-text"><?php echo $item->afterDisplayTitle; ?></p>
<?php endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<?php if ($params->get('show_introtext', 1)) : ?>
<p class="card-text"><?php echo $item->introtext; ?></p>
<?php endif; ?>
<?php echo $item->afterDisplayContent; ?>
<?php if (isset($item->link) && $item->readmore != 0 && $params->get('readmore')) : ?>
<?php echo '<p class="text-end"><a class="readmore" href="' . $item->link . '">' . $item->linkText . '</a></p>'; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>This Joomla 3 override allows you to display your articles in an horizontal format simply using Joomla's mod_articles_news 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_news
* @Author web-eau.net
* @copyright Copyright (C) 2005 - 2015 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">
<div class="row">
<div class="col-md-12 p-3">
<?php foreach ($list as $item) : ?>
<div class="card mb-3">
<div class="row no-gutters newsflash<?php echo $moduleclass_sfx; ?> ">
<div class="col-md-4">
<?php if ($params->get('img_intro_full') !== 'none' && !empty($item->imageSrc)) : ?>
<img class="card-img-top img-fluid" src="<?php echo $item->imageSrc; ?>" alt="<?php echo $item->imageAlt; ?>" height="100%" />
<?php endif; ?>
</div>
<div class="col-md-8">
<div class="px-4">
<?php if ($params->get('item_title')) : ?>
<?php $item_heading = $params->get('item_heading', 'h4'); ?>
<<?php echo $item_heading; ?> class="card-title newsflash-title<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($item->link !== '' && $params->get('link_titles')) : ?>
<a href="/<?php echo $item->link; ?>">
<<?php echo $item_heading; ?> class="card-title newsflash-title<?php echo $params->get('moduleclass_sfx'); ?>"><?php echo $item->title; ?></<?php echo $item_heading; ?>>
</a>
<?php else : ?>
<<?php echo $item_heading; ?> class="card-title newsflash-title<?php echo $params->get('moduleclass_sfx'); ?>"><?php echo $item->title; ?></<?php echo $item_heading; ?>>
<?php endif; ?>
</<?php echo $item_heading; ?>>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : ?>
<p class="card-text"><?php echo $item->afterDisplayTitle; ?></p>
<?php endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<?php if ($params->get('show_introtext', 1)) : ?>
<p class="card-text"><?php echo $item->introtext; ?></p>
<?php endif; ?>
<?php echo $item->afterDisplayContent; ?>
<?php if (isset($item->link) && $item->readmore != 0 && $params->get('readmore')) : ?>
<?php echo '<p class="text-right"><a class="readmore" href="' . $item->link . '">' . $item->linkText . '</a></p>'; ?>
<?php endif; ?>
</div>
</div></div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>