Vertical timeline

: mod_articles_category

Live demo

 
 

 

HTML 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 mt-5 mb-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) : ?> 
							<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>">
								<?php echo $item->title; ?>
							</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="float-right 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 mt-5 mb-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 <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></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="float-right 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 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;
 }
A PROPOS DE L'AUTEUR :
Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Daniel est également très impliqué dans la communauté Joomla depuis 2014 en étant membre actif de plusieurs projets, conférencier et fondateur du JUG Breizh.