How to add promotional labels on top of images in Magento 2 ? - magento

Question

How can I place a promotional label layer on top of images in Magento 2. The image I am including is from the out of the box Magento 2 theme and it has a text " New Luma Yoga Collection ...." and a button "Shop New Yoga" that was somehow placed on top of the image in the editor .
This is how it looks in the editor

Answer 1

There are various ways on how you can achieve this. One way is to add a HTML element directly into the WYSIWYG editor and mark it up with HTML. This is also how the Luma theme has done this. If you look at your editor, you see the content in small blue below the image. If you switch from WYSIWYG to HTML, you can see the HTML markup of this element:
<span class="content bg-white">
<span class="info">New Luma Yoga Collection</span>
<strong class="title">Get fit and look fab in new seasonal styles</strong>
<span class="action more button">Shop New Yoga</span>
</span>
You can simply use CSS to style this element.
However...
Although this is a very widely uses approach to do such a thing (and it's easy and fast to do so), it's not the most elegant solution. After all, it's not clear from the WYSIWYG-editor that the 'blue link' is actually a special element. If your client starts messing with it, he will break the layout and call you because 'you made the site, so it's your fault'. Trust me, I've been there...
A more elegant solution would be to use widgets. A widget is very simple to create in Magento 2. First you have to create a file called widget.xml in the etc-folder of your module, and put something like this in it:
<?xml version="1.0"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
<label translate="true">Example widget</label>
<description translate="true">This is an example widget</description>
</widget>
</widgets>
Now you can create a Block in the Block-folder of your module:
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Example extends Template implements BlockInterface
{
/**
* #return string
*/
public function _toHtml()
{
return '<p class="hello">Hello world!</p>';
}
}
Now if you click the widget-button in the WYSIWYG-editor, the widget will be there in the list of widgets to choose from:
Now, if you insert this widget in your WYSIWYG editor, you're sure about the HTML it will output (since that is handled with PHP), and your client cannot 'break it'.
In your scenario you most likely want to add parameters so you can make your widget reusable. This is very simple. Edit your widget.xml:
<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
<label translate="true">Example widget</label>
<description translate="true">This is an example widget</description>
<parameters>
<parameter name="name" xsi:type="text" visible="true" sort_order="0">
<label translate="true">Name</label>
<description translate="true">Please enter a name</description>
</parameter>
</parameters>
</widget>
And to use it in your Block Class:
public function _toHtml()
{
return '<p class="hello">Hello ' . $this->getName() . '</p>';
}
It's really that simple.
In your specific case I would suggest creating a widget with 4 parameters:
Header
Content
Button Text
Button Link