This Joomla 4 override allows you to display your articles like a Facebook timeline 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="category-module<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<div class="car facebook-box">
<div class="content">
<div class="right-icon">
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="d-flex">
<div class="flex-shrink-0 avatar">
<img class="avatar" src="https://via.placeholder.com/40" alt="" /> <!-- avatar 40x40 -->
</div>
<div class="flex-grow-1 ms-3">
<p class=""><a class="name-author"><?php echo $item->displayAuthorName; ?></a><br />
<span class="small"><?php echo $item->displayDate; ?> - <i class="date-sub fa fa-globe"></i></span></p>
</div>
</div>
<div class="content row text"> <!-- intro text -->
<?php echo $item->displayIntrotext; ?>
</div>
</div>
<div class="thumbnail"> <!-- intro image -->
<?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;
}?>
<a href="<?php echo $item->link; ?>">
<img class="img-fluid" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
</div>
<div class="facebook-footer">
<?php echo $item->displayHits; ?> people read this.
<hr />
<div class="row text-center">
<div class="col"><i class="fas fa-thumbs-up fa-2x"></i> Like</div> <div class="col"><i class="fas fa-comment fa-2x"></i> Comment</div> <div class="col"><i class="fas fa-share fa-2x"></i> Share</div>
</div>
<hr />
</div>
</div>
<?php endforeach; ?>
</div>CSS
.facebook-box {
width: 500px;
margin: 30px auto;
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
}
.facebook-box .right-icon {
float: right;
display: inline;
width: 24px;
height: 24px;
color: #606770;
cursor: pointer;
}
.facebook-box .content {
padding: 12px;
}
.facebook-box .row.header {
max-height: 40px;
margin-bottom: 11px;
}
.facebook-box .header .avatar {
float: left;
width: 40px;
height: 40px;
margin-right: 8px;
}
.facebook-box .header .avatar img {
border-radius: 50%;
}
.facebook-box .header .name {
width: calc(100% - 40px - 8px);
font-size: 12px;
}
.facebook-box .header .name h5 {
margin-bottom: 2px;
font-weight: 700;
font-size: 14px;
}
.facebook-box .header .name .name-author a {
color: #3658B2 !important;
font-size: 12px;
}
.facebook-box .header .name .sub {
color: #616770;
font-size : 12px;
}
.facebook-box .thumbnail {
width: 100%;
margin-left: -1px;
}
.facebook-box .facebook-footer {
border-top: 1px solid #e1e2e3;
margin: 0;
padding: 9px 12px 7px 12px;
font-size: 12px;
background-color: #f6f7f8;
border-radius: 0 0 3px 3px;
color: #606770;
overflow: hidden;
}
.facebook-box .facebook-footer .row {
margin-top: 10px;
margin-bottom: 2px;
overflow: hidden;
color: #606770;
text-align: center;
cursor: pointer;
}Download the override
override-facebook-timeline-j4.zipInstall the override
Enjoy the override
This Joomla 3 override allows you to display your articles like a Facebook timeline 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="category-module<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<div class="card facebook-box">
<div class="content">
<div class="right-icon">
<h4><strong>...</strong></h4>
</div>
<div class="content row header">
<div class="avatar">
<img class="avatar" src="http://placehold.it/40x40" alt="" /> <!-- image 40x40 -->
</div>
<div class="name">
<h5 class="name-author"><a class="name-author"><?php echo $item->displayAuthorName; ?></a></h5>
<p><span class="mt-2 sub"><?php echo $item->displayDate; ?></span> - <i class="sub fa fa-globe"></i></p>
</div>
</div>
<div class="content row text"> <!-- intro text -->
<?php echo $item->displayIntrotext; ?>
</div>
</div>
<div class="row thumbnail"> <!-- intro image -->
<?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;
}?>
<a href="/<?php echo $item->link; ?>">
<img class="img-fluid card-img-top" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
</div>
<div class="footer">
<a href="#"><?php echo $item->displayHits; ?> people</a> read this.
<hr />
<div class="row text-center">
<div class="col"><i class="fa fa-thumbs-up fa-2x"></i> Like</div> <div class="col"><i class="fa fa-comment-o fa-2x"></i> Comment</div> <div class="col"><i class="fa fa-share fa-2x"></i> Share</div>
</div>
<hr />
</div>
</div>
<?php endforeach; ?>
</div>CSS
.facebook-box {
width: 500px;
margin: 30px auto;
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
}
.facebook-box .right-icon {
float: right;
display: inline;
width: 24px;
height: 24px;
color: #606770;
cursor: pointer;
}
.facebook-box .content {
padding: 12px;
}
.facebook-box .row.header {
max-height: 40px;
margin-bottom: 11px;
}
.facebook-box .header .avatar {
float: left;
width: 40px;
height: 40px;
margin-right: 8px;
}
.facebook-box .header .avatar img {
border-radius: 50%;
}
.facebook-box .header .name {
width: calc(100% - 40px - 8px);
font-size: 12px;
}
.facebook-box .header .name h5 {
margin-bottom: 2px;
font-weight: 700;
font-size: 14px;
}
.facebook-box .header .name .name-author a {
color: #3658B2 !important;
font-size: 12px;
}
.facebook-box .header .name .sub {
color: #616770;
font-size : 12px;
}
.facebook-box .thumbnail {
width: 100%;
margin-left: -1px;
}
.facebook-box .footer {
border-top: 1px solid #e1e2e3;
margin: 0;
padding: 9px 12px 7px 12px;
font-size: 12px;
background-color: #f6f7f8;
border-radius: 0 0 3px 3px;
color: #606770;
overflow: hidden;
}
.facebook-box .footer .row {
margin-top: 10px;
margin-bottom: 2px;
overflow: hidden;
color: #606770;
text-align: center;
cursor: pointer;
}