Live demo
Facebook timeline
Daniel Dubois
2019 avril 02 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris augue, aliquam quis massa eget, mollis commodo neque. Pellentesque viverra, felis vitae auctor maximus, dui nisi accumsan urna, eget rhoncus tortor dolor id felis.
Daniel Dubois
2019 avril 02 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris augue, aliquam quis massa eget, mollis commodo neque. Pellentesque viverra, felis vitae auctor maximus, dui nisi accumsan urna, eget rhoncus tortor dolor id felis.
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;
}
