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

We use cookies

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.