Override "Adventskalender" for Joomla 5.2 Articles Module

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
		$images  = json_decode($item->images);

		$layoutAttr = [
			'src' => $images->image_intro,
			'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
		];

		// 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 adventdate field exists and is a valid date
		$adventDate = isset($jcfields['adventdatum']) ? date('Y-m-d', strtotime($jcfields['adventdatum']->value)) : null;

		// Set up popup options
		$popupOptions['src'] = Route::_('index.php?option=com_content&view=article&id=' . $item->id . '&catid=' . $item->catid . '&layout=modal&tmpl=component', false);
		$popupOptions['textHeader'] = $item->title;
		?>

        <div class="mod-articles-advent-item-content">
			<?php if ($adventDate && $adventDate <= $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>

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\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 advent-bg">
	<?php foreach ($items as $item) : ?>
		<?php
		$images  = json_decode($item->images);
		$layoutAttr = [
			'src' => $images->image_intro,
			'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
		];

		// 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 adventdate field exists and is a valid date
		$adventDate = isset($jcfields['adventdatum']) ? date('Y-m-d', strtotime($jcfields['adventdatum']->value)) : null;

		// Set up popup options
		$popupOptions['src'] = Route::_('index.php?option=com_content&view=article&id=' . $item->id . '&catid=' . $item->catid . '&layout=modal&tmpl=component', false);
		$popupOptions['textHeader'] = $item->title;
		?>

        <div class="mod-articles-advent-item-content">
			<?php if ($adventDate && $adventDate <= $today) : ?>
                <button type="button"
                        data-joomla-dialog="<?php echo htmlspecialchars(json_encode($popupOptions, JSON_UNESCAPED_SLASHES)) ?>"
                        class="btn btn-link advent-link"
                        aria-label="Öffnet <?php echo $item->title; ?>"
                        id="title-<?php echo $item->id; ?>"
                        data-module-id="<?php echo $item->id; ?>">
                    <span><?php echo date('j', strtotime($adventDate)); ?></span>
                </button>
			<?php else : ?>
                <span><?php echo date('j', strtotime($adventDate)); ?></span>
			<?php endif; ?>
        </div>
	<?php endforeach; ?>
</div>

mod_articles_advent.css

.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;
    }
  }
.advent-bg {
  padding: .5rem;
  background-image: url(../../../../../images/adventskalender/dein-bildname.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;
  }
}
@media (max-width: 768px) {
  .advent-grid {
    grid-template-columns: repeat(3,minmax(80px,1fr));
  }
}