Magazine categories

: mod_article_category

Live Demo 

Magazine Categories


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

<div class="container category-module<?php echo $moduleclass_sfx; ?>">
	
	<?php if ($grouped) : ?>	
	
    <div class="row">

        <div class="include-wrapper pb-5 col-12">

            <section class="row">  	
			
				<div class="col-12 pt-2 pl-md-1 mb-3 mb-lg-1">
      
				<?php foreach ($list as $group_name => $group) : ?>
                
                    <div class="row card-group">                        
                        
						<?php foreach ($group as $item) : ?>
                        <div class="col-6 pb-2">
                            <div class="card border-0 rounded-0 text-white overflow zoom">

                                <div class="position-relative">

                                    <div class="ratio_right-cover-2 image-wrapper">
                                        <?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="img-fluid card-img-top" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
											</a>
											
									</div>                                  

                                    <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                        <span class="text-white p-1 badge badge-primary rounded-0">
											<?php echo $item->displayCategoryTitle; ?>
										</span>

                                        <a href="/<?php echo $item->link; ?>">
                                            <h2 class="h5 text-white my-1"><?php echo $item->title; ?></h2>
										</a>
									</div>

								</div>

							</div>
						</div>
                        <?php endforeach; ?>
						
					</div>
					
					<?php endforeach; ?>
				</div>
							
			</section>

		</div>
	</div>
	
	<?php endif; ?>
	
</div>

CSS

.b-0 {
    bottom: 0;
}
.bg-shadow {
    background: rgba(76, 76, 76, 0);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179, 171, 171, 0)), color-stop(49%, rgba(48, 48, 48, 0.37)), color-stop(100%, rgba(19, 19, 19, 0.8)));
    background: linear-gradient(to bottom, rgba(179, 171, 171, 0) 0%, rgba(48, 48, 48, 0.71) 49%, rgba(19, 19, 19, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
}
.top-indicator {
    right: 0;
    top: 1rem;
    bottom: inherit;
    left: inherit;
    margin-right: 1rem;
}
.overflow {
    position: relative;
    overflow: hidden;
}
.zoom img {
    transition: all 0.2s linear;
}
.zoom:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.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.