Upcoming articles Documentation

Here is the display I've made with a light override and with the parameters setup in the previous step: 3 items, with the date in the PhP format d M:

  • 16 Avr
    7 tips and tricks to Optimize Your Joomla Website to Rank Higher on Google
  • 19 Avr
    Women's portraits at Joomla: Chiara Francesca Storti
  • 19 Avr
    Tutoriel - Créer des pense-bêtes en HTML5 et CSS3
  • 23 Avr
    10 Latest blog HTML & CSS snippets
  • 26 Avr
    Lead Generation Through Content Marketing: How Does it Work?

Because the content of these articles is not yet available to your visitors, their titles are not linked.

3.1 The date format

To help you to display the date of your upcoming articles in the right format, I've made this table with some examples:

# Format Result
1 d-m-Y 01-01-2020
2 d.m.y 01.01.20
3 d m 01 01
4 d M Y 01 Jan 2020
5 m-d Jan-01

More examples and more help here: https://www.php.net/manual/en/datetime.formats.date.php

3.2 Align the date and the title on the same line

Because it will be easier and faster for you, I suggest you to use (as much as possible), the CSS classes of your template to acheive this.

My template is powered by Bootstrap 4, so I've used the media object CSS class:

<div class="media">
  <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

With this example, it's very easy to create a simple and basic override where the date will be displayed instead of the image and where the article's title will be displayed instead of the media heading.

Here is the override I've created to display the upcoming articles on my blog:

<?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;
?>
<!-- LIST of Upcoming Article -->
<?php if (count($list['articleList'])) { ?>
    <ul class="<?php echo $moduleclass_sfx; ?> list-group list-group-flush">
		<?php foreach ($list['articleList'] as $item) : ?>
 		<li class="list-group-it list-group-item-action py-3">
            <div class="media">
                <?php if ($showDate) { ?>
					<span class="bleu mod-articles-category-date">
						<strong>
							<?php echo JHtml::_('date', $item->publish_up, $params->get('show_date_format', JText::_('DATE_FORMAT_LC4'))); ?>
						</strong>
					</span>
				<?php } ?>
				<div class="ml-3 media-body">
                    <?php echo $item->title; ?>
				</div>
			</div>
		</li>
        <?php endforeach; ?>
	</ul>
<?php } ?>

Feel free to copy / paste this code if you like it and if your template is also powered with Bootstrap 4.