2.1 Les paramètres

Créons notre premier module Upcoming articles.
Depuis le gestionnaire de module, cliquez sur le bouton Nouveau.
Ensuite, cliquez sur Upcoming articles.

Jetons un oeil aux paramètres du module :

• Nombre d'articles à afficher: indiquez le nombre maximum d'articles que le module doit afficher.

• Catégorie: sélectionnez la ou les catégories pour vos articles à paraitre.

• Afficher la date: sélectionnez si le module doit afficher ou non la date de publication des articles.

• Format de la date: indiquez ici comment la date des articles doit être affichée par le module. Pour plus d'informations à ce sujet, voyez ci-dessous ou bien ouvrez https://www.php.net/manual/fr/datetime.formats.date.php

N'oubliez pas d'indiquez la position du module et d'assigner le module à la bonne page. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer & Fermer.

3.1 Format de la date

Pour vous aider à afficher la date de vos prochains articles au bon format, j'ai réalisé ce tableau avec quelques exemples:

3.2 Aligner la date et le titre de l'article sur la même ligne

Parce que ce sera plus simple et plus facile pour vous, je vous conseille d'utiliser - autant que possible - les classes CSS de votre template.

Mon template Cassiopeia utilise Bootstrap 5,j'ai donc choisi d'utiliser l'affichage media object:

<div class="d-flex">
	<div class="flex-shrink-0">
		<img src="..." alt="...">
	</div>
	<div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
	</div>
</div>

Avec cet exemple, il est très facile de créer un override simple et basique où la date sera affichée à la place de l'image et où le titre de l'article sera affiché à la place de l'en-tête du média.

Voici une override que j'ai créée pour vous pour afficher la date sur la même ligne que le titre de l'article:

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_upcoming
		* @author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
?>

<?php if (count($list['articleList'])) { ?>
    
    <div class="<?php echo $moduleclass_sfx; ?> d-flex">
		<?php foreach ($list['articleList'] as $item) : ?>
		
            <?php if ($showDate) { ?>
				<div class="flex-shrink-0 mod-articles-category-date fw-bold">
					<?php echo JHtml::_('date', $item->publish_up, $params->get('show_date_format', JText::_('DATE_FORMAT_LC4'))); ?>
				</div>
			<?php } ?>
			
				<div class="flex-grow-1 ms-3">
                    <?php echo $item->title; ?>
				</div>
		<?php endforeach; ?>		
	</div>
            
<?php } ?>

N'hésitez pas à copier / coller ce code this code si vous l'aimez et si votre template utilise aussi Bootstrap 5. La démo, présente ci-dessous, utilise cette override !

4. Demo