(prononcez web honnête) Ukraine Support
EN

Vertical timeline

mod_articles_category
Overrides - - - Hits: 3405

This Joomla 4 override allows you to display a list of articles in a Gmail box style simply using the Joomla's mod_articles_category 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_category
 * @author		web-eau.net
 * @copyright   (C) 2010 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;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

?>

<ul class="category-module<?php echo $moduleclass_sfx; ?>">

	<?php if ($grouped) : ?>
	
	<div class="container my-5">
		<div class="row">
			<div class="col-md-6 offset-md-3">
				
				<?php foreach ($list as $group_name => $group) : ?>
				<li>
					<div class="mod-articles-category-group"><?php echo $group_name; ?></div>
					
					<h4>Latest News</h4> 
					
					<ul class="vertical-timeline">
						
						<?php foreach ($group as $item) : ?>
						<li>
							<?php if ($params->get('link_titles') == 1) : ?> 
							<h4><a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
								<?php echo $item->title; ?>
							</a></h4>
							<?php else : ?> 
							<?php echo $item->title; ?>
							<?php endif; ?>
							
							<?php if ($item->displayHits) : ?>
							<span class="mod-articles-category-hits">
								(<?php echo $item->displayHits; ?>)
							</span>
							<?php endif; ?>
							
							<?php if ($params->get('show_author')) : ?>
							<span class="mod-articles-category-writtenby">
								<?php echo $item->displayAuthorName; ?>
							</span>
							<?php endif; ?>
							
							<?php if ($item->displayCategoryTitle) : ?>
							<span class="mod-articles-category-category">
								(<?php echo $item->displayCategoryTitle; ?>)
							</span>
							<?php endif; ?>
							
							<?php if ($item->displayDate) : ?>
							<span class="text-end mod-articles-category-date"><?php echo $item->displayDate; ?></span>
							<?php endif; ?>
							
							<?php if ($params->get('show_introtext')) : ?>
							<p class="mod-articles-category-introtext">
								<?php echo $item->displayIntrotext; ?>
							</p>
							<?php endif; ?>
							
							<?php if ($params->get('show_readmore')) : ?>
							<p class="mod-articles-category-readmore">
								<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
									<?php if ($item->params->get('access-view') == false) : ?>
									<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
									<?php elseif ($readmore = $item->alternative_readmore) : ?>
									<?php echo $readmore; ?>
									<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
									<?php if ($params->get('show_readmore_title', 0) != 0) : ?>
									<?php echo JHtml::_('string.truncate', $this->item->title, $params->get('readmore_limit')); ?>
									<?php endif; ?>
									<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
									<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
									<?php else : ?>
									<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
									<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
									<?php endif; ?>
								</a>
							</p>
							<?php endif; ?>
						</li>
						<?php endforeach; ?>
					</ul>
				</li>
				<?php endforeach; ?>
			</div>
		</div>
	</div>

	<?php else : ?>
	<div class="container my-5">
		<div class="row">
			<div class="col-md-6 offset-md-3">
				
				<h4>Latest News</h4> 
				
				<ul class="vertical-timeline">
					
					<?php foreach ($list as $item) : ?>
					<li>
						<?php if ($params->get('link_titles') == 1) : ?>
						<a class="mod-articles-category-title fs-5 <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><strong><?php echo $item->title; ?></strong></a>
						<?php else : ?>
                      	<strong><?php echo $item->title; ?></strong>
						<?php endif; ?>
						
						<?php if ($item->displayHits) : ?>
						<span class="mod-articles-category-hits">
							(<?php echo $item->displayHits; ?>)
						</span>
						<?php endif; ?>
						
						<?php if ($params->get('show_author')) : ?>
						<span class="mod-articles-category-writtenby">
							<?php echo $item->displayAuthorName; ?>
						</span>
						<?php endif; ?>
						
						<?php if ($item->displayCategoryTitle) : ?>
						<span class="mod-articles-category-category">
							(<?php echo $item->displayCategoryTitle; ?>)
						</span>
						<?php endif; ?>
						
						<?php if ($item->displayDate) : ?>
						<span class="small mod-articles-category-date">
							- <?php echo $item->displayDate; ?>
						</span>
						<?php endif; ?>
						
						<?php if ($params->get('show_introtext')) : ?>
						<div class="mod-articles-category-introtext">
							<?php echo $item->displayIntrotext; ?>
						</div>
						<?php endif; ?>
						
						<?php if ($params->get('show_readmore')) : ?>
						<p class="mod-articles-category-readmore">
							<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
								<?php if ($item->params->get('access-view') == false) : ?>
								<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
								<?php elseif ($readmore = $item->alternative_readmore) : ?>
								<?php echo $readmore; ?>
								<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
								<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
								<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
								<?php else : ?>
								<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
								<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
								<?php endif; ?>
							</a>
						</p>
						<?php endif; ?>
					</li>
					<?php endforeach; ?>
					<?php endif; ?>
					
				</ul>
			</div>
		</div>
	</div>	
</ul>

CSS

ul.vertical-timeline {
	list-style-type: none;
	position: relative;
}
ul.vertical-timeline:before {
	content: ' ';
	background: #d4d9df;
	display: inline-block;
	position: absolute;
	left: 29px;
	width: 2px;
	height: 100%;
	z-index: 400;
}
ul.vertical-timeline > li {
	margin: 20px 0;
	padding-left: 20px;
}
ul.vertical-timeline > li:before {
	content: ' ';
	background: white;
	display: inline-block;
	position: absolute;
	border-radius: 50%;
	border: 3px solid #22c0e8;
	left: 20px;
	width: 20px;
	height: 20px;
	z-index: 400;
 }
 

Inspiration: https://bootsnipp.com/snippets/xrKXW

Download this override

override-vertical-timeline-j4.zip

This Joomla 3 override allows you to display a list of articles in a Gmail box style simply using the Joomla's mod_articles_category 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_category
		* @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;
	
?>
<ul class="category-module<?php echo $moduleclass_sfx; ?>">

	<?php if ($grouped) : ?>
	
	<div class="container my-5">
		<div class="row">
			<div class="col-md-6 offset-md-3">
				
				<?php foreach ($list as $group_name => $group) : ?>
				<li>
					<div class="mod-articles-category-group"><?php echo $group_name; ?></div>
					
					<h4>Latest News</h4> 
					
					<ul class="vertical-timeline">
						
						<?php foreach ($group as $item) : ?>
						<li>
							<?php if ($params->get('link_titles') == 1) : ?> 
							<h4><a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
								<?php echo $item->title; ?>
							</a></h4>
							<?php else : ?> 
							<?php echo $item->title; ?>
							<?php endif; ?>
							
							<?php if ($item->displayHits) : ?>
							<span class="mod-articles-category-hits">
								(<?php echo $item->displayHits; ?>)
							</span>
							<?php endif; ?>
							
							<?php if ($params->get('show_author')) : ?>
							<span class="mod-articles-category-writtenby">
								<?php echo $item->displayAuthorName; ?>
							</span>
							<?php endif; ?>
							
							<?php if ($item->displayCategoryTitle) : ?>
							<span class="mod-articles-category-category">
								(<?php echo $item->displayCategoryTitle; ?>)
							</span>
							<?php endif; ?>
							
							<?php if ($item->displayDate) : ?>
							<span class="text-end mod-articles-category-date"><?php echo $item->displayDate; ?></span>
							<?php endif; ?>
							
							<?php if ($params->get('show_introtext')) : ?>
							<p class="mod-articles-category-introtext">
								<?php echo $item->displayIntrotext; ?>
							</p>
							<?php endif; ?>
							
							<?php if ($params->get('show_readmore')) : ?>
							<p class="mod-articles-category-readmore">
								<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
									<?php if ($item->params->get('access-view') == false) : ?>
									<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
									<?php elseif ($readmore = $item->alternative_readmore) : ?>
									<?php echo $readmore; ?>
									<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
									<?php if ($params->get('show_readmore_title', 0) != 0) : ?>
									<?php echo JHtml::_('string.truncate', $this->item->title, $params->get('readmore_limit')); ?>
									<?php endif; ?>
									<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
									<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
									<?php else : ?>
									<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
									<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
									<?php endif; ?>
								</a>
							</p>
							<?php endif; ?>
						</li>
						<?php endforeach; ?>
					</ul>
				</li>
				<?php endforeach; ?>
			</div>
		</div>
	</div>

	<?php else : ?>
	<div class="container my-5">
		<div class="row">
			<div class="col-md-6 offset-md-3">
				
				<h4>Latest News</h4> 
				
				<ul class="vertical-timeline">
					
					<?php foreach ($list as $item) : ?>
					<li>
						<?php if ($params->get('link_titles') == 1) : ?>
						<a class="mod-articles-category-title fs-5 <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><strong><?php echo $item->title; ?></strong></a>
						<?php else : ?>
						<?php echo $item->title; ?>
						<?php endif; ?>
						
						<?php if ($item->displayHits) : ?>
						<span class="mod-articles-category-hits">
							(<?php echo $item->displayHits; ?>)
						</span>
						<?php endif; ?>
						
						<?php if ($params->get('show_author')) : ?>
						<span class="mod-articles-category-writtenby">
							<?php echo $item->displayAuthorName; ?>
						</span>
						<?php endif; ?>
						
						<?php if ($item->displayCategoryTitle) : ?>
						<span class="mod-articles-category-category">
							(<?php echo $item->displayCategoryTitle; ?>)
						</span>
						<?php endif; ?>
						
						<?php if ($item->displayDate) : ?>
						<span class="small mod-articles-category-date">
							- <?php echo $item->displayDate; ?>
						</span>
						<?php endif; ?>
						
						<?php if ($params->get('show_introtext')) : ?>
						<div class="mod-articles-category-introtext">
							<?php echo $item->displayIntrotext; ?>
						</div>
						<?php endif; ?>
						
						<?php if ($params->get('show_readmore')) : ?>
						<p class="mod-articles-category-readmore">
							<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
								<?php if ($item->params->get('access-view') == false) : ?>
								<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
								<?php elseif ($readmore = $item->alternative_readmore) : ?>
								<?php echo $readmore; ?>
								<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
								<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
								<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
								<?php else : ?>
								<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
								<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
								<?php endif; ?>
							</a>
						</p>
						<?php endif; ?>
					</li>
					<?php endforeach; ?>
					<?php endif; ?>
					
				</ul>
			</div>
		</div>
	</div>

CSS

ul.vertical-timeline {
		list-style-type: none;
		position: relative;
		}
ul.vertical-timeline:before {
		content: ' ';
		background: #d4d9df;
		display: inline-block;
		position: absolute;
		left: 29px;
		width: 2px;
		height: 100%;
		z-index: 400;
		}
ul.vertical-timeline > li {
		margin: 20px 0;
		padding-left: 20px;
		}
ul.vertical-timeline > li:before {
		content: ' ';
		background: white;
		display: inline-block;
		position: absolute;
		border-radius: 50%;
		border: 3px solid #22c0e8;
		left: 20px;
		width: 20px;
		height: 20px;
		z-index: 400;
 }
 

Inspiration: https://bootsnipp.com/snippets/xrKXW

Download this override

override-vertical-timeline-j3.zip

Joomla overrides list

A bunch of tips and snippets
Agenda activities
Archived articles
Articles carousel
Articles list
Articles popular
Articles slideshow
Author bio
Awesome stats
Best offers
Blog article
Blog intro
Blog layout
Blog post
Bootstrap 5 Login Form
Calendar list
Card overlay
Category list
Clients testimonials
Concerts layout
Conference schedule
Documentation center
eCommerce products
Error 404 page
Events list
Facebook timeline
Featured articles
Features boxes
Five articles
Flexbox Card
Flipping postcard
Footer links
Frequently Asked Questions
Friends list
Glossary + index - Joomla4
Gmail inbox
Google SERPs
Graphic portfolio
Great RSS
Horizontal news
Horizontal testimonials
Job board
Knowledge base
Knowledge base Joomla 4
Language Switcher
Latest blog
Latest projects
Latest users
Login form - Bootstrap 4
Login separate
Login with picture
Magazine categories
Magazine Newsfeed
Menu restaurant
Modal login
Movies list
News Ticker
Nice agenda - Bootstrap 4
Offcanvas menu
Our services
Pagination - Bootstrap 4
Portfolio gallery
Pricing table
Products list
Profile card
Profile edition in tabs
Real estate listing
Receipt
Related articles
Related posts
Responsive timeline
Schedule event
Search - Bootstrap 4
Sidebar news
Similar tags
Staff section
Take five
Team list
Top news
Tree menu
Upcoming events
Vertical timeline

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net

About

Joomla

Quick links

Latest posts