This Joomla 4 override allows you to highlight your featured articles with a nice ribbon simply using Joomla's mod_articles_latest 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_latest
* @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\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\FileLayout;
use Joomla\CMS\Language\Associations;
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;
if (!$list)
{
return;
}
?>
<section class="blog-me py-5" id="blog">
<div class="container">
<div class="row">
<?php foreach ($list as $item) : ?>
<div class="col-lg-4 col-md-6 h-100"> <!-- setup for 3 columns -->
<div class="single-blog">
<div class="blog-img">
<!-- 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;
}?>
<!-- Featured ribbon -->
<?php if ($item->featured == 1) : ?>
<div class="ribbon-wrapper-orange"><div class="ribbon-orange"><?php echo JText::_('MOD_OVERRIDE_FEATURED') ?></div></div>
<a href="<?php echo $item->link; ?>">
<img class="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
<?php else : ?>
<a href="<?php echo $item->link; ?>">
<img class="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
<?php endif; ?>
</div>
<div class="blog-content">
<div class="blog-title">
<h4>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h4>
</div>
<?php if ($params->get('show_readmore')) : ?>
<p class="mod-articles-category-readmore">
<a href="/<?php echo $item->link; ?>" class="box_btn mod-articles-category-title <?php echo $item->active; ?>">
<?php if ($item->params->get('access-view') == false) : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
<?php elseif ($readmore = $item->alternative_readmore) : ?>
<?php echo $readmore; ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
<?php else : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php endif; ?>
</a>
</p>
<?php endif; ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>CSS
.ribbon-wrapper-orange {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
z-index: 90;
}
.ribbon-orange {
font: bold 15px Sans-Serif;
color: #FFF;
text-align: center;
text-shadow: rgba(0,0,0,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #e85311;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e85311), to(#d26d01));
background-image: -webkit-linear-gradient(top, #e85311, #d26d01);
background-image: -moz-linear-gradient(top, #e85311, #d26d01);
background-image: -ms-linear-gradient(top, #e85311, #d26d01);
background-image: -o-linear-gradient(top, #e85311, #d26d01);
color: #FFF;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-orange:before, .ribbon-orange:after {
content: "";
border-top: 3px solid #c26400;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-orange:before {
left: 0;
}
.ribbon-orange:after {
right: 0;
}Download the override
override-featured-articles-j4.zipInstall the override
Enjoy the override
This Joomla 3 override allows you to highlight your featured articles with a nice ribbon simply using Joomla's mod_articles_latest 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_latest
* @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;
?>
<section class="blog-me pt-100 pb-100" id="blog">
<div class="container">
<div class="row">
<div class="col-xl-6 mx-auto text-center">
<div class="section-title mb-5">
<h4>Latest blog</h4>
</div>
</div>
</div>
<div class="row">
<?php foreach ($list as $item) : ?>
<div class="col-lg-4 col-md-6"> <!-- setup for 3 columns -->
<div class="single-blog">
<div class="blog-img">
<!-- 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;
}?>
<!-- Featured ribbon -->
<?php if ($item->featured == 1) : ?>
<div class="ribbon-wrapper-orange"><div class="ribbon-orange"><?php echo JText::_('MOD_OVERRIDE_FEATURED') ?></div></div>
<a href="<?php echo $item->link; ?>">
<img class="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
<?php else : ?>
<a href="<?php echo $item->link; ?>">
<img class="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
<?php endif; ?>
</div>
<div class="blog-content">
<div class="blog-title">
<h4>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h4>
</div>
<?php if ($params->get('show_readmore')) : ?>
<p class="mod-articles-category-readmore">
<a href="/<?php echo $item->link; ?>" class="box_btn mod-articles-category-title <?php echo $item->active; ?>">
<?php if ($item->params->get('access-view') == false) : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
<?php elseif ($readmore = $item->alternative_readmore) : ?>
<?php echo $readmore; ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
<?php else : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php endif; ?>
</a>
</p>
<?php endif; ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>CSS
.ribbon-wrapper-orange {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
z-index: 90;
}
.ribbon-orange {
font: bold 15px Sans-Serif;
color: #FFF;
text-align: center;
text-shadow: rgba(0,0,0,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #e85311;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e85311), to(#d26d01));
background-image: -webkit-linear-gradient(top, #e85311, #d26d01);
background-image: -moz-linear-gradient(top, #e85311, #d26d01);
background-image: -ms-linear-gradient(top, #e85311, #d26d01);
background-image: -o-linear-gradient(top, #e85311, #d26d01);
color: #FFF;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-orange:before, .ribbon-orange:after {
content: "";
border-top: 3px solid #c26400;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-orange:before {
left: 0;
}
.ribbon-orange:after {
right: 0;
}