This Joomla 4 override allows you to display an articles slideshow using their intro images simply with Joomla's mod_articles_category module. The title and the intro text of the item appear on hover. 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 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="css-slideshow">
<?php foreach ($list as $item) : ?>
<figure>
<?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="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
<figcaption>
<?php if ($params->get('link_titles') == 1) : ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><strong><?php echo $item->title; ?></strong></a>
<?php else : ?>
<strong><?php echo $item->title; ?></strong>
<?php endif; ?>
<?php echo $item->displayIntrotext; ?>
</figcaption>
</figure>
<?php endforeach; ?>
</div>CSS
.css-slideshow img{
box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption{
position: absolute;
top: 0;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
opacity: 0;
transition: opacity .5s;
}
.css-slideshow:hover figure figcaption{
transition: opacity .5s;
opacity: 1;
}
.css-slideshow-attr{
max-width: 495px;
text-align: right;
font-size: .7em;
font-style: italic;
margin:0 auto;
}
.css-slideshow-attr a{
color: #666;
}
.css-slideshow figure{
opacity:0;
}
figure:nth-child(1) {
animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
animation: xfade 48s 0s infinite;
}
@keyframes xfade{
0%{
opacity: 1;
}
10.5% {
opacity: 1;
}
12.5%{
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}Inspiration: https://codepen.io/leemark/pen/vzCdo
Download the override
override-articles-slideshow-j4.zipInstall the override
Enjoy the override
This Joomla 3 override allows you to display an articles slideshow using their intro images simply with Joomla's mod_articles_category module. The title and the intro text of the item appear on hover. 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="css-slideshow">
<?php foreach ($list as $item) : ?>
<figure>
<?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="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
<figcaption>
<?php if ($params->get('link_titles') == 1) : ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><strong><?php echo $item->title; ?></strong></a>
<?php else : ?>
<strong><?php echo $item->title; ?></strong>
<?php endif; ?>
<?php echo $item->displayIntrotext; ?>
</figcaption>
</figure>
<?php endforeach; ?>
</div>CSS
.css-slideshow img{
box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption{
position: absolute;
top: 0;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
opacity: 0;
transition: opacity .5s;
}
.css-slideshow:hover figure figcaption{
transition: opacity .5s;
opacity: 1;
}
.css-slideshow-attr{
max-width: 495px;
text-align: right;
font-size: .7em;
font-style: italic;
margin:0 auto;
}
.css-slideshow-attr a{
color: #666;
}
.css-slideshow figure{
opacity:0;
}
figure:nth-child(1) {
animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
animation: xfade 48s 0s infinite;
}
@keyframes xfade{
0%{
opacity: 1;
}
10.5% {
opacity: 1;
}
12.5%{
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}Inspiration: https://codepen.io/leemark/pen/vzCdo