This Joomla 4 override allows you to display on your website, movie posters and related infos simply using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 * @author		web-eau.net
 * @copyright   (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

?>

<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 per row -->
            <div class="border h-100"> 
				<div class="">
                    <?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="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 text-end">
								<?php if ($item->displayCategoryTitle) : ?>
									<span class="mod-articles-category-category">
										<small><?php echo $item->displayCategoryTitle; ?></small>
									</span>
								<?php endif; ?>
							</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;
}

This Joomla 3 override allows you to display on your website, movie posters and related infos simply using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP 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;
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net