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;
}
 

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;
}
 

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net