Movies list

: mod_articles_category

Live demo

Movies list


Interstellar

A team of explorers travel through wormhole in space in an attempt to ensure humanity's survival.

Split

Kevin has evidenced 23 personalities according to his trusted psychiatrist, Dr. Karen Fletcher.

The age of Adaline

After 29-year-old Adaline recovers from a nearly lethal accident, she inexplicably stops growing older.

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; ?>">
    <div class="row flex-column-reverse flex-md-row">
		
		<?php foreach ($list as $item) : ?>
		
        <div class="col-md-4"> <!-- 3 items in a row -->
            <div class="card"> 
			
				<div class="card-header">
                    <?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;
					}?>  					
											
					<img class="card-img" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
				</div>
				
				<div class="card-body">				
			
					<?php if ($params->get('link_titles') == 1) : ?>
						<h2 class="card-title"><a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h2>
					<?php else : ?>
						<h2 class="card-title"><?php echo $item->title; ?></h2>
					<?php endif; ?>

					<div class="container">
						<div class="row">
						
							<div class="col-4 metadata">
								<i class="fa fa-star" aria-hidden="true"></i> 
								<?php $item->urls = new JRegistry($item->urls); ?>
								<p><?php echo $item->urls->get('urlatext'); ?></p>
							</div>
							<div class="col-8 metadata">
								<?php if ($item->displayCategoryTitle) : ?>
									<span class="mod-articles-category-category">
										<small><?php echo $item->displayCategoryTitle; ?></small>
									</span>
								<?php endif; ?>
							</div>
						</div>
					</div> 
					
					<?php if ($params->get('show_introtext')) : ?>
						<p class="card-text mod-articles-category-introtext">
							<?php echo $item->displayIntrotext; ?>
						</p>
					<?php endif; ?>
					<a class="trailer-preview" href="/<?php echo $item->urls->get('urlbtext'); ?>" target="new"> 
						<i class="fa fa-play" aria-hidden="true"></i>
					</a>
					
				</div>
			</div>
		</div>
		<?php endforeach; ?>
	</div>
</div>

CSS

.card-header, .metadata {
  background: none;
  padding: 0;
  position: relative;
  border-style: none;
}
.metadata {
  font-size: 16px;
}
.metadata i, .metadata p {
  float: left;
}
.metadata p {
  margin-top: 0;
  margin-left: 10px;
}
.metadata i {
  color: #ff9d00;
  margin-top: 5px;
  margin-left: 1px;
}
.card-img {
  -webkit-clip-path: inset(10% 0 20% 0);
  clip-path: inset(10% 0 20% 0);
  margin-top: -15%;
}
.card-body {
  position: relative;
  margin-top: -30%;
  color: #9fa7a9;
}
.card-body .card-title {
  font-weight: 600;
  color: #414345;
}
.card-body .card-text {
  margin-top: 8px;
  font-weight: 600;
  line-height: 30px;
}
.card, .trailer-preview {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card:hover, .trailer-preview:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10), 0 8px 8px rgba(0, 0, 0, 0.18);
}
.card {
  border-radius: 8pt;
  border-style: none;
  overflow: hidden;
  transform: scale(0.8);
  margin-top: -60px;
}
.trailer-preview {
  background-color: #ff3d49;
  position: absolute;
  top: -46px;
  right: 24px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: white;
  font-size: 36px;
  text-align: center;
  padding-top: 13px;
}
.trailer-preview:hover, .trailer-preview:disabled, .trailer-preview:active, .trailer-preview:focus {
  background-color: #ff3d49;
  color: white;
}
.trailer-preview i {
  margin-left: 5px;
}
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 de plusieurs projets, conférencier et fondateur du JUG Breizh.