Facebook timeline

: mod_articles_category

Live demo

Facebook timeline


 
 

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

A PROPOS DE L'AUTEUR :
Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Daniel est également très impliqué dans la communauté Joomla depuis 2014 en étant membre actif de plusieurs projets, conférencier et fondateur du JUG Breizh.