This Joomla 4 override offers you a new experience to display your articles in Joomla. With only few lines of CSS and some Bootstrap classes, your articles have a completly new layout . Thanks to com_content, Joomla will manage the display for you on destkop and on mobile. At the bottom of this article, you can download the file of the override.
This override goes here: /templates/your-template/html/com_content/article/blog-post.php
Joomla 4 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage com_content
* @author web-eau.net
* @copyright (C) 2006 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\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Associations;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\FileLayout;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Uri\Uri;
use Joomla\Component\Content\Administrator\Extension\ContentComponent;
use Joomla\Component\Content\Site\Helper\RouteHelper;
// Create shortcuts to some parameters.
$params = $this->item->params;
$canEdit = $params->get('access-edit');
$user = Factory::getUser();
$info = $params->get('info_block_position', 0);
$htag = $this->params->get('show_page_heading') ? 'h2' : 'h1';
// Check if associations are implemented. If they are, define the parameter.
$assocParam = (Associations::isEnabled() && $params->get('show_associations'));
$currentDate = Factory::getDate()->format('Y-m-d H:i:s');
$isNotPublishedYet = $this->item->publish_up > $currentDate;
$isExpired = !is_null($this->item->publish_down) && $this->item->publish_down < $currentDate;
?>
<div class="mx-auto w-90 com-content-article item-page<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/Article">
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>">
<?php if ($this->params->get('show_page_heading')) : ?>
<div class="page-header">
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
</div>
<?php endif;
if (!empty($this->item->pagination) && !$this->item->paginationposition && $this->item->paginationrelative)
{
echo $this->item->pagination;
}
?>
<?php $useDefList = $params->get('show_modify_date') || $params->get('show_publish_date') || $params->get('show_create_date')
|| $params->get('show_hits') || $params->get('show_category') || $params->get('show_parent_category') || $params->get('show_author') || $assocParam; ?>
<div class="d-flex justify-content-center">
<div class="col-md-10">
<div class="card card-cascade wider reverse">
<!-- Header image -->
<div class="view-cascade overlay text-center">
<?php echo LayoutHelper::render('joomla.content.full_image_post', $this->item); ?>
</div>
<div class="card-body cascade text-center py-4">
<!-- Article title -->
<<?php echo $htag; ?> itemprop="headline" class="fw-bold">
<?php echo $this->escape($this->item->title); ?>
</<?php echo $htag; ?>>
<?php if ($this->item->state == ContentComponent::CONDITION_UNPUBLISHED) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JUNPUBLISHED'); ?></span>
<?php endif; ?>
<?php if ($isNotPublishedYet) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JNOTPUBLISHEDYET'); ?></span>
<?php endif; ?>
<?php if ($isExpired) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JEXPIRED'); ?></span>
<?php endif; ?>
<!-- Data -->
<?php if ($useDefList && ($info == 0 || $info == 2)) : ?>
<div class="d-flex justify-content-center py-3"><?php echo LayoutHelper::render('joomla.content.info_block', array('item' => $this->item, 'params' => $params, 'position' => 'above')); ?></div>
<?php endif; ?>
<!-- Social shares -->
<div class="social-counters pt-3">
<!-- Facebook -->
<button class="btn btn-fb btn-sm position-relative me-4">
<i class="fab fa-facebook-f pe-2"></i>
<span class="clearfix d-none d-md-inline-block">Facebook</span>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger text-white">46</span>
</button>
<!-- Twitter -->
<button class="btn btn-tw btn-sm position-relative me-4">
<i class="fab fa-twitter pe-2"></i>
<span class="clearfix d-none d-md-inline-block">Twitter</span>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger text-white">22</span>
</button>
<!-- Linkedin -->
<button class="btn btn-lkd btn-sm position-relative me-4">
<i class="fab fa-linkedin pe-2"></i>
<span class="clearfix d-none d-md-inline-block">LinkedIn</span>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger text-white">31</span>
</button>
<!-- Comments -->
<button class="btn btn-primary btn-sm position-relative me-4">
<i class="far fa-comments pe-2"></i>
<span class="clearfix d-none d-md-inline-block">Comments</span>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger text-white">18</span>
</button>
</div>
</div>
</div>
<!-- Content -->
<div itemprop="articleBody" class="mx-auto w-90 com-content-article__body mt-5">
<?php echo $this->item->text; ?>
<?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
</div>
</div>
</div>
</div>CSS
.card {
font-weight: 400;
border: 0 !important;
-webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}
.card-cascade.wider {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.card.card-cascade.wider .card-body.cascade {
z-index: 1;
margin-right: 4%;
margin-left: 4%;
background: #fff;
}
.cascade {
z-index: 30 !important;
margin-top: -1.5rem !important;
border-radius: 0.25rem;
-webkit-box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}
.card.card-cascade .view-cascade {
margin-top: 0 !important;
object-fit: fill;
border-radius: 0.25rem !important;
-webkit-box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}
.btn-fb {
color: #fff;
background-color: #3b5998;
}
.btn-fb:hover {
color: #fff;
background-color: #4264aa;
}
.btn-tw {
color: #fff;
background-color: #147bc9;
}
.btn-tw:hover {
color: #fff;
background-color: #6cb7f0;
}
.btn-lkd {
color: #fff;
background-color: #0A66C2;
}
.btn-lkd:hover {
color: #fff;
background-color: #4E90D3;
}