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>• </span> <?php echo $item->urls->get('urlbtext'); ?> <span>•
</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;
}Inspiration: https://codepen.io/veenakr/pen/MVQoPV
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>•
</span> <?php echo $item->urls->get('urlbtext'); ?> <span>•
</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;
}Inspiration: https://codepen.io/veenakr/pen/MVQoPV