Featured articles

: mod_articles_latest

Live Demo 

Featured articles


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;
	
?>

<section class="blog-me pt-100 pb-100" id="blog">
	
	<div class="container">
		
		<div class="row">
			<div class="col-xl-6 mx-auto text-center">
				<div class="section-title mb-5">
					<h4>Latest blog</h4>
				</div>
			</div>
		</div>
		
		<div class="row">				
			
			<?php foreach ($list as $item) : ?>
              
			<div class="col-lg-4 col-md-6">  <!-- setup for 3 columns -->
				<div class="single-blog">
					<div class="blog-img">
						
						<!-- 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;
							}?> 
						<!-- Featured ribbon -->	
						<?php if ($item->featured == 1) : ?>
						
						<div class="ribbon-wrapper-orange"><div class="ribbon-orange"><?php echo JText::_('MOD_OVERRIDE_FEATURED') ?></div></div> 
                        <a href="/<?php echo $item->link; ?>">
							<img class="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
						</a>
						
                        <?php else : ?>
                        <a href="/<?php echo $item->link; ?>">
							<img class="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
						</a>
                        <?php endif; ?> 
					</div>
					
					<div class="blog-content">								
						<div class="blog-title">									
							<h4>								
								<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
							</h4>

						</div>
						
						<?php if ($params->get('show_readmore')) : ?>
						<p class="mod-articles-category-readmore">						
							<a href="/<?php echo $item->link; ?>" class="box_btn mod-articles-category-title <?php echo $item->active; ?>">
								<?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; ?>
						
					</div>
				</div>
			</div>	
			<?php endforeach; ?>
			
		</div>
	</div>
</section>

CSS

.ribbon-wrapper-orange {
 width: 85px;
 height: 88px;
 overflow: hidden;
 position: absolute;
 top: -3px;
 right: -3px;
 z-index: 90;
}
.ribbon-orange {
 font: bold 15px Sans-Serif;
 color: #FFF;
 text-align: center;
 text-shadow: rgba(0,0,0,0.5) 0px 1px 0px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 position: relative;
 padding: 7px 0;
 left: -5px;
 top: 15px;
 width: 120px;
 background-color: #e85311;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#e85311), to(#d26d01)); 
 background-image: -webkit-linear-gradient(top, #e85311, #d26d01); 
 background-image: -moz-linear-gradient(top, #e85311, #d26d01); 
 background-image: -ms-linear-gradient(top, #e85311, #d26d01); 
 background-image: -o-linear-gradient(top, #e85311, #d26d01); 
 color: #FFF;
 -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-orange:before, .ribbon-orange:after {
 content: "";
 border-top: 3px solid #c26400; 
 border-left: 3px solid transparent;
 border-right: 3px solid transparent;
 position:absolute;
 bottom: -3px;
}
.ribbon-orange:before {
 left: 0;
}
.ribbon-orange:after {
 right: 0;
}
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.