¡El poder de la imaginación! En Joomla 5.2, se ha introducido el nuevo módulo de Artículos, un módulo súper flexible que te permite mostrar tus artículos. En este artículo, Viviana nos muestra cómo puedes usar este módulo para crear un Calendario de Adviento. ¡Inspírate y desata tu propia creatividad!
El Calendario de Adviento tiene una larga tradición en Alemania y en los últimos años se ha vuelto popular en otros países también. Originalmente desarrollado para ayudar a los niños a contar los días antes de Navidad, ha evolucionado para tratar a los adultos también con dulces o pequeños regalos, uno cada día hasta Navidad. Y, por supuesto, también hay calendarios de adviento en línea.
Hace algunos años, había una extensión para Joomla para crear calendarios de adviento y la usé durante varios años para un cliente. Una organización de protección animal usaba el calendario de adviento para presentar historias bonitas, pedir ayuda o presentar mascotas especiales. Esta extensión ya no se desarrolla activamente y, como otro cliente me pidió un calendario de adviento para su sitio web, tuve que buscar una nueva solución. Quería algo ligero que no necesitara mantenimiento, ya que es un requisito "una vez al año".
Joomla 5.2 introdujo un nuevo módulo, el Módulo de Artículos (conocido internamente como “Content Module to Rule them All” - adaptado libremente de “El Señor de los Anillos”). Cinco (de los siete) módulos de artículos anteriores se han combinado para proporcionar más flexibilidad (para más información, consulte la página de ayuda: https://docs.joomla.org/Help5.x:Site_Modules:_Articles). Ya uso el módulo en nuevos sitios web y también he creado algunas anulaciones para él. En este artículo, quiero mostrarte cómo planeo implementar un calendario de adviento para mi cliente usando el módulo de Artículos.
Preparación
Para crear el Calendario de Adviento, necesitamos:
- Una categoría (la llamé “Adviento”)
- Un campo personalizado del tipo Calendario para los artículos (primero creé un Grupo de Campo “Adviento” y asigné el campo llamado “Día” al grupo y a la categoría). Usaremos este campo para definir qué “puerta” en el calendario de adviento se puede abrir cada día.
- 24 artículos (p. ej., Día 1, Día 2, ..., Día 24) cada uno con una imagen de introducción y un día asignado (Día 1 = 1 de diciembre y así sucesivamente). El contenido del artículo puede ser lo que quieras: una receta, un poema, una imagen...
Modificaciones (Overrides)
El módulo de Artículos consta de tres archivos:
- default.php
- default_items.php
- default_titles.php
Dado que utilizaré solo unos pocos parámetros del módulo, he creado un solo archivo llamado advent.php y reescribí el código para mostrar una cuadrícula (6x4) que contiene solo las imágenes de introducción de los artículos. Los artículos serán clicables cuando el día asignado coincida con hoy: el Día 2 está asignado al 2 de diciembre, el artículo puede verse antes, pero se volverá clicable el 2 de diciembre. El artículo se abrirá en una ventana modal.
advent.php
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles
*
* @copyright (C) 2024 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\Factory;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;
use Joomla\CMS\Router\Route;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->useScript('joomla.dialog-autocreate');
if (!$list) {
return;
}
$items = $list;
$today = Factory::getDate()->format('Y-m-d');
// Set up the modal options that will be used for module editor
$popupOptions = [
'popupType' => 'iframe',
'className' => 'adventskalender',
];
?>
<div class="advent-grid">
<?php foreach ($items as $item) : ?>
<?php
// Get the images for this article
$images = json_decode($item->images);
// Get the custom fields for this article
$jcfields = FieldsHelper::getFields('com_content.article', $item, true);
// Create an associative array for easier access by field name
foreach($jcfields as $jcfield) {
$jcfields[$jcfield->name] = $jcfield;
}
// Ensure the field exists and is a valid date
$openDay = isset($jcfields['day']) ? date('Y-m-d', strtotime($jcfields['day']->value)) : null;
// Set up popup options
$popupOptions['src'] = Route::_('index.php?view=article&layout=modal&tmpl=component&id=' . $item->id, false);
$popupOptions['textHeader'] = $item->title;
$layoutAttr = [
'src' => $images->image_intro,
'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
];
?>
<div class="mod-articles-advent-item-content">
<?php if ($openDay <= $today) : ?>
<button type="button"
data-joomla-dialog="<?php echo htmlspecialchars(json_encode($popupOptions, JSON_UNESCAPED_SLASHES)) ?>"
class="btn btn-link advent-link"
aria-label="<?php echo $item->title; ?>"
id="title-<?php echo $item->id; ?>"
data-module-id="<?php echo $item->id; ?>">
<figure class="advent-item-image">
<?php echo LayoutHelper::render('joomla.html.image', $layoutAttr); ?>
</figure>
</button>
<?php else : ?>
<figure class="advent-item-image">
<?php echo LayoutHelper::render('joomla.html.image', $layoutAttr); ?>
</figure>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>Explicación de las líneas
Con esta línea obtenemos el script para crear ventanas modales, esta función es parte del núcleo de Joomla:
$wa->useScript('joomla.dialog-autocreate');El módulo tiene el código para mostrar la imagen de introducción del artículo, pero para evitar conflictos con otros parámetros que se puedan haber configurado para el sitio web, decidí reescribir esta parte también. Con estas líneas obtenemos las imágenes de los artículos y configuramos algunos atributos:
$images = json_decode($item->images);
$layoutAttr = [
'src' => $images->image_intro,
'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
];También necesitamos el campo personalizado:
$jcfields = FieldsHelper::getFields('com_content.article', $item, true);
foreach($jcfields as $jcfield) {
$jcfields[$jcfield->name] = $jcfield;
}Estas
// Set up the modal options that will be used for module editor
$popupOptions = [
'popupType' => 'iframe',
'className' => 'adventskalender',
];y estas
$popupOptions['src'] = Route::_('index.php?view=article&layout=modal&tmpl=component&id=' . $item->id, false);
$popupOptions['textHeader'] = $item->title;son opciones para la ventana modal. Usamos el título del artículo como el título de la ventana modal.
Obtenemos la fecha actual:
$today = Factory::getDate()->format('Y-m-d');Comprobamos si el campo existe y convertimos el valor al mismo formato de fecha:
$openDay = isset($jcfields['day']) ? date('Y-m-d', strtotime($jcfields['day']->value)) : null;y comparamos los dos valores:
<?php if ($openDay <= $today) : ?>Los artículos asignados a "hoy" o a días anteriores se vuelven clicables con la ayuda de un botón alrededor de la imagen. Los artículos asignados a días futuros muestran solo la imagen:
<?php if ($openDay <= $today) : ?>
<button type="button"
data-joomla-dialog="<?php echo htmlspecialchars(json_encode($popupOptions, JSON_UNESCAPED_SLASHES)) ?>"
class="btn btn-link advent-link"
aria-label="<?php echo $item->title; ?>"
id="title-<?php echo $item->id; ?>"
data-module-id="<?php echo $item->id; ?>">
<figure class="advent-item-image">
<?php echo LayoutHelper::render('joomla.html.image', $layoutAttr); ?>
</figure>
</button>
<?php else : ?>
<figure class="advent-item-image">
<?php echo LayoutHelper::render('joomla.html.image', $layoutAttr); ?>
</figure>
<?php endif; ?>
CSS
He añadido el siguiente código CSS al archivo user.css desde Cassiopeia:
.advent-grid {
display: grid;
grid-template-columns: repeat(6,minmax(100px,1fr));
gap: .5rem;
figure {
margin: 0;
}
.advent-link {
padding: 0;
text-decoration: none;
color: currentColor;
width: 100%;
height: 100%;
}
.mod-articles-advent-item-content {
aspect-ratio: 1;
transition: all .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.16);
&:hover {
transform: scale(1.025);
}
}
span {
font-size: 4rem;
color: #fff;
}
}
@media (max-width: 768px) {
.advent-grid {
grid-template-columns: repeat(3,minmax(80px,1fr));
}
}Módulo
Como se mencionó anteriormente, usaremos solo unos pocos parámetros del módulo:
- Modo: Normal
- Artículos a Mostrar: 24
- Selecciona la categoría (p. ej., Adviento)
- En Ordenar selecciona "Aleatorio"
- En Avanzado selecciona el diseño "advent"
Puedes colocar el módulo en una posición de tu plantilla (p.ej. top-a en Cassiopeia) o insertarlo en un artículo que esté enlazado a un elemento de menú.
El resultado se parecerá a esto:
Cuando haces clic en una "puerta", obtienes el contenido del artículo correspondiente en una caja modal:
Diseño alternativo
Otra opción para crear un calendario de adviento es tener una imagen de fondo y mostrar los artículos como cajas con el número del día en ellas.
El código de la modificación se ve así:
advent2.php
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles
*
* @copyright (C) 2024 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\Factory;
use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;
use Joomla\CMS\Router\Route;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->useScript('joomla.dialog-autocreate');
if (!$list) {
return;
}
$items = $list;
$today = Factory::getDate()->format('Y-m-d');
// Set up the modal options that will be used for module editor
$popupOptions = [
'popupType' => 'iframe',
'className' => 'adventskalender',
];
?>
<div class="advent-grid advent-bg">
<?php foreach ($items as $item) : ?>
<?php
// Get the images for this article
$images = json_decode($item->images);
// Get the custom fields for this article
$jcfields = FieldsHelper::getFields('com_content.article', $item, true);
// Create an associative array for easier access by field name
foreach($jcfields as $jcfield) {
$jcfields[$jcfield->name] = $jcfield;
}
// Ensure the field exists and is a valid date
$openDay = isset($jcfields['day']) ? date('Y-m-d', strtotime($jcfields['day']->value)) : null;
// Set up popup options
$popupOptions['src'] = Route::_('index.php?view=article&layout=modal&tmpl=component&id=' . $item->id, false);
$popupOptions['textHeader'] = $item->title;
$layoutAttr = [
'src' => $images->image_intro,
'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
];
?>
<div class="mod-articles-advent-item-content">
<?php if ($openDay <= $today) : ?>
<button type="button"
data-joomla-dialog="<?php echo htmlspecialchars(json_encode($popupOptions, JSON_UNESCAPED_SLASHES)) ?>"
class="btn btn-link advent-link"
aria-label="<?php echo $item->title; ?>"
id="title-<?php echo $item->id; ?>"
data-module-id="<?php echo $item->id; ?>">
<span><?php echo date('j', strtotime($openDay)); ?></span>
</button>
<?php else : ?>
<span><?php echo date('j', strtotime($openDay)); ?></span>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>En lugar de la imagen de introducción del artículo, extraje el día del valor del campo:
<?php echo date('j', strtotime($openDay)); ?>Se necesitan unas pocas líneas adicionales de CSS:
.advent-bg {
padding: .5rem;
background-image: url(../../../../../images/advent/christmas-background-4621177_1920.jpg);
background-repeat: no-repeat;
background-size: cover;
.mod-articles-advent-item-content {
box-shadow: 3px 3px 3px rgba(255, 255, 255, 0.5);
border: 1px solid #d5d5d5;
}
}Y el resultado es muy bonito:
Por supuesto, la idea no se limita a los calendarios de adviento. Puedes usarla también para un evento de promoción, por ejemplo, para dar descuentos en productos o servicios durante la Semana Negra. Puedes modificar el código para que las “puertas” se abran solo en el día asignado:
<?php if ($openDay == $today) : ?>
En este espíritu: prueba el nuevo módulo de Artículos, juega con los parámetros y obtén nuevas ideas para tu sitio web.
Muchas gracias a Stefan Wendhausen por revisar y mejorar el código.
Las imágenes son de Pixabay.
Este artículo es una traducción de How to create an Advent Calendar using the new Articles Module in Joomla 5.2
