Latest blog

: mod_articles_category

Live demo

 

Outre votre site web et vos réseaux sociaux,...

Lire la suite...


On ne va pas se mentir, la question du respect...

Lire la suite...


Few days ago, I've published the blog post How...

Lire la suite...


 

 

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;
	
?>
	
	<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">	
				<!--
				<ul class="category-module<?php echo $moduleclass_sfx; ?>">	
					
					<li>-->
						
					<?php foreach ($list as $item) : ?>
						<div class="col-lg-4 col-md-6"> 
							<div class="single-blog">
								<div class="blog-img">
                      
                      				<?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="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
									</a>
						
									<div class="post-category">
										<?php if ($item->displayCategoryTitle) : ?>
										<span class="mod-articles-category-category">
											<?php echo $item->displayCategoryTitle; ?>
										</span>
										<?php endif; ?>						
									</div>
								</div>
								<div class="blog-content">
									<div class="blog-title">
										<h4>
											<?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; ?>
										</h4>
										<div class="meta">
											<ul class="list-unstyled">
												<li>
													<?php if ($item->displayDate) : ?>
													<span class="mod-articles-category-date">
														<?php echo $item->displayDate; ?>
													</span>
													<?php endif; ?>
												</li>
											</ul>
										</div>
									</div>
									
									<?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 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; ?>
					<!--	
					</li>
					
					</ul>-->
				
			</div>
		</div>
	</section>					

CSS


.pb-100 {
	padding-bottom: 100px;
}
.pt-100 {
	padding-top: 100px;
}
.mb-100 {
	margin-bottom: 100px;
}
a {
	text-decoration: none;
	color: #333;
	-webkit-transition: .4s;
	transition: .4s;
}
.section-title {
	position: relative;
}
.section-title p {
	font-size: 16px;
	margin-bottom: 5px;
	font-weight: 400;
}
.section-title h4 {
	font-size: 40px;
	font-weight: 600;
	text-transform: capitalize;
	position: relative;
	padding-bottom: 20px;
	display: inline-block;
}
.section-title h4::before {
	position: absolute;
	content: "";
	width: 80px;
	height: 2px;
	background-color: #d8d8d8;
	bottom: 0;
	left: 50%;
	margin-left: -40px;
}
.section-title h4::after {
	position: absolute;
	content: "";
	width: 50px;
	height: 2px;
	background-color: #FF7200;
	left: 0;
	bottom: 0;
	left: 50%;
	margin-left: -25px;
}
.blog-img {
	position: relative;
}
.blog-img img {
	width: 100%;
}
.post-category a {
	display: inline-block;
	background-color: #FF7200;
	color: #fff;
	font-size: 15px;
	padding: 5px 20px;
}
.single-blog:hover img {
	opacity: .85;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"
}
.post-category {
	position: absolute;
	left: 0;
	bottom: 0;
}
.blog-content {
	padding: 30px 20px;
}
.single-blog {
	border: 1px solid #eee;
}
.blog-title h4 {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 5px;
}
.meta ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.meta {
	margin-bottom: 20px;
	opacity: .85;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
}
.blog-content a.box_btn {
	display: inline-block;
	background-color: #FF7200;
	padding: 5px 15px;
	color: #fff;
	text-transform: capitalize;
	margin-top: 20px;
}
a.box_btn::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #CC5B00;
	left: -100%;
	top: 0;
	-webkit-transition: .5s;
	transition: .5s;
	z-index: -1;
}
a.box_btn {
	overflow: hidden;
	z-index: 2;
	-webkit-transition: .5s;
	transition: .5s;
	position: relative;
	text-decoration:none;
}
a.box_btn:hover::before {
	left: 0;
	z-index: -1;
}
Daniel Dubois

Daniel Dubois

Passionné par le Web 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.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.