This Joomla 4 override allows you to display a chronological job board simply using Joomla's mod_articles_category module. 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   (C) 2010 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\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

?>
		<div class="wrapper">
			<ul id="job-board">
			<?php foreach ($list as $group_name => $group) : ?>
				<li class="date"><?php echo $group_name; ?></li> 
				<?php foreach ($group as $item) : ?>
				<?php $item->urls = new JRegistry($item->urls); ?>
				<a href="<?php echo $item->link; ?>">
					<li class="listing clearfix">
						<div class="image_wrapper">
						    <?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 src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>"> 
						</div>
						<div class="info">
							<span class="job_title"><?php echo $item->title; ?></span> 
							<span class="job_info"><?php echo $item->urls->get('urlatext'); ?> 
                              <span>&bull; </span> <?php echo $item->urls->get('urlbtext'); ?> <span>&bull; 
							</span> <?php echo $item->displayDate; ?></span> 
						</div>
						<span class="job_type"><?php echo $item->urls->get('urlctext'); ?></span> 
					</li>
				</a>
				<?php endforeach; ?>
			<?php endforeach; ?>
			</ul>
		</div>

CSS

.wrapper {
  max-width: 90%;
  margin: 0 auto;
}
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
#job-board {
  width: 100%;
  position: relative;
  list-style: none;
  padding: 0;
}
#job-board:after {
  content: " ";
  width: 1px;
  background: 1px #d9dee9;
  height: 90%;
  position: absolute;
  top: 3em;
  left: 3em;
  z-index: 0;
}
#job-board a {
  text-decoration: none;
}
#job-board .listing {
  background: #fff;
  border: 1px solid #d9dee9;
  border-radius: 0.3em;
  padding: 1em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1;
  display: table;
  width: 96%;
  transition: all 0.3s ease-in-out;
}
#job-board .listing img, #job-board .listing .info, #job-board .listing .job_type {
  display: table-cell;
  vertical-align: middle;
  font-size: 0.9em;
  color: #9592ad;
}
#job-board .listing .image_wrapper {
  width: 60px;
}
#job-board .listing .image_wrapper img {
  width: 60px;
  display: block;
  margin: 0 auto;
  border-radius: 0.25em;
}
#job-board .listing .info {
  line-height: 1.25;
  width: 640px;
  padding-left: 25px;
}
#job-board .listing .info .job_title {
  font-weight: 700;
  color: #34314c;
  font-size: 1.5em;
}
#job-board .listing .info .job_info {
  color: #9592ad;
  display: block;
}
#job-board .listing .info .job_info span {
  margin: 0 0.75em;
}
#job-board .listing .job_type {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75em;
  position: relative;
  white-space: nowrap;
  padding-top: 0.6em;
  color: #fd7473;
}
#job-board .listing .job_type:before {
  content: " ";
  background: #fd7473;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  position: absolute;
  left: -20px;
  top: 27px;
}
#job-board .listing:hover {
  cursor: pointer;
  box-shadow: 0px 2px 40px 0 rgba(0, 0, 0, .1);
}
#job-board .date {
  display: inline-block;
  padding: 0.6em 0;
  width: 100px;
  background: #fff;
  border: 1px solid #d9dee9;
  border-radius: 3em;
  font-weight: 700;
  font-size: 0.75em;
  text-align: center;
  z-index: 2;
  position: relative;
  margin: 1em 0 2em 0;
}

This Joomla 3 override allows you to display a chronological job board testimonial simply using Joomla's mod_articles_category module. 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="wrapper">
			
			<ul id="job-board">
			
			<?php foreach ($list as $group_name => $group) : ?>
			
				<li class="date"><?php echo $group_name; ?></li> 
				
				<?php foreach ($group as $item) : ?>
				<?php $item->urls = new JRegistry($item->urls); ?>
                  
				<a href="/<?php echo $item->link; ?>">
					<li class="listing clearfix">
						<div class="image_wrapper">
						    <?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 src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>"> 
						</div>
						<div class="info">
							<span class="job_title"><?php echo $item->title; ?></span> 
							<span class="job_info"><?php echo $item->urls->get('urlatext'); ?> <span>&bull; 
								</span> <?php echo $item->urls->get('urlbtext'); ?> <span>&bull; 
							</span> <?php echo $item->displayDate; ?></span> 
						</div>
						<span class="job_type"><?php echo $item->urls->get('urlctext'); ?></span> 
					</li>
				</a>
				
				<?php endforeach; ?>
			
			<?php endforeach; ?>
			
			</ul>
			
		</div>

CSS

.wrapper {
  max-width: 90%;
  margin: 0 auto;
}
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
#job-board {
  width: 100%;
  position: relative;
  list-style: none;
  padding: 0;
}
#job-board:after {
  content: " ";
  width: 1px;
  background: 1px #d9dee9;
  height: 90%;
  position: absolute;
  top: 3em;
  left: 3em;
  z-index: 0;
}
#job-board a {
  text-decoration: none;
}
#job-board .listing {
  background: #fff;
  border: 1px solid #d9dee9;
  border-radius: 0.3em;
  padding: 1em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1;
  display: table;
  width: 96%;
  transition: all 0.3s ease-in-out;
}
#job-board .listing img, #job-board .listing .info, #job-board .listing .job_type {
  display: table-cell;
  vertical-align: middle;
  font-size: 0.9em;
  color: #9592ad;
}
#job-board .listing .image_wrapper {
  width: 60px;
}
#job-board .listing .image_wrapper img {
  width: 60px;
  display: block;
  margin: 0 auto;
  border-radius: 0.25em;
}
#job-board .listing .info {
  line-height: 1.25;
  width: 640px;
  padding-left: 25px;
}
#job-board .listing .info .job_title {
  font-weight: 700;
  color: #34314c;
  font-size: 1.5em;
}
#job-board .listing .info .job_info {
  color: #9592ad;
  display: block;
}
#job-board .listing .info .job_info span {
  margin: 0 0.75em;
}
#job-board .listing .job_type {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75em;
  position: relative;
  white-space: nowrap;
  padding-top: 0.6em;
  color: #fd7473;
}
#job-board .listing .job_type:before {
  content: " ";
  background: #fd7473;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  position: absolute;
  left: -20px;
  top: 27px;
}
#job-board .listing:hover {
  cursor: pointer;
  box-shadow: 0px 2px 40px 0 rgba(0, 0, 0, .1);
}
#job-board .date {
  display: inline-block;
  padding: 0.6em 0;
  width: 100px;
  background: #fff;
  border: 1px solid #d9dee9;
  border-radius: 3em;
  font-weight: 700;
  font-size: 0.75em;
  text-align: center;
  z-index: 2;
  position: relative;
  margin: 1em 0 2em 0;
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net