Image Chooser for Magento2 widgets

ImageChooser.php

<?php
namespace Vendor\Module\Block\Adminhtml\Widget;

class ImageChooser extends \Magento\Backend\Block\Template
{
    /**
     * @var \Magento\Framework\Data\Form\Element\Factory
     */
    protected $_elementFactory;

    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Data\Form\Element\Factory $elementFactory
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Data\Form\Element\Factory $elementFactory,
        array $data = []
    ) {
        $this->_elementFactory = $elementFactory;
        parent::__construct($context, $data);
    }

    /**
     * Prepare chooser element HTML
     *
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element Form Element
     * @return \Magento\Framework\Data\Form\Element\AbstractElement
     */
    public function prepareElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $config = $this->_getData('config');
        $sourceUrl = $this->getUrl('cms/wysiwyg_images/index',
            ['target_element_id' => $element->getId(), 'type' => 'file']);
        $chooser = $this->getLayout()->createBlock('Magento\Backend\Block\Widget\Button')
            ->setType('button')
            ->setClass('btn-chooser')
            ->setLabel($config['button']['open'])
            ->setOnClick('MediabrowserUtility.openDialog(\''. $sourceUrl .'\')')
            ->setDisabled($element->getReadonly());

        $input = $this->_elementFactory->create("text", ['data' => $element->getData()]);
        $input->setId($element->getId());
        $input->setForm($element->getForm());
        $input->setClass("widget-option input-text admin__control-text");
        if ($element->getRequired()) {
            $input->addClass('required-entry');
        }

        $element->setData('after_element_html', $input->getElementHtml() . $chooser->toHtml());
        return $element;
    }
}

widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget id="my_new_custom_widget" class="Magento\Framework\View\Element\Template">
        <label translate="true">My new custom widget</label>
        <description translate="true">My new custom widget description</description>
        <parameters>
            <parameter name="image" xsi:type="block" required="true" visible="true" sort_order="10">
                <label translate="true">Background image</label>
                <block class="Vendor\Module\Block\Adminhtml\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
        </parameters>
    </widget>
</widgets>

@ppassmannpriv Are you able to give a code example for your solution?
Does your solution also only apply when uploading images via your widget, or is it globally altering that function?

I assume if its global, it will start altering the behaviour when creating CMS pages/blocks.
Thanks

__directive issue happened for me too. I did temporary workaround.
The issue:
For example I have widget:
{{widget type="Custom\Custom\Block\Widget" background="{{media url="wysiwyg/14.jpg"}}" }}
When you click "Show/Hide Editor" at the cms page with this widget it breaks.

After a lot of attempts I end up with plugin which rewrites getWidgetDeclaration function for \Magento\Widget\Model\Widget.
It will check all widget parameter values and if there will me {{media url}} parameter it will replace it with file location.

Basic information about how to make plugin: http://devdocs.magento.com/guides/v2.0/extension-dev-guide/plugins.html

Here is Plugin code:

`
class Widget
{

/**
 * @var \Magento\Backend\Helper\Data
 */
protected $backendData;

/**
 * Widget constructor.
 * @param \Magento\Backend\Helper\Data $backendData
 */
public function __construct(
    \Magento\Backend\Helper\Data $backendData
) {
    $this->backendData = $backendData;
}


/**
 * @param \Magento\Widget\Model\Widget $subject
 * @param $type
 * @param array $params
 * @param bool $asIs
 * @return array
 */
public function beforeGetWidgetDeclaration(\Magento\Widget\Model\Widget $subject, $type, $params = [], $asIs = true)
{
    foreach ($params as $name => $value) {
        if (preg_match('/(___directive\/)([a-zA-Z0-9,_-]+)/', $value, $matches)) {
            $directive = base64_decode(strtr($matches[2], '-_,', '+/='));
            $params[$name]=str_replace(['{{media url="','"}}'],['',''],$directive);
        }
    }
    return [$type, $params, $asIs];
}

}
`

After thus you get image path at the widget code:

{{widget type="Custom\Custom\Block\Widget" background="wysiwyg/14.jpg" }}

So, I figured out a simple way of changing the input value. You have to add this javascript and the class "fix-image-url-input". It will listen for the change on the input box. I personally used Magento's requirejs functionality to add this javascript, but you can take the function out and include it another way. Hope this helps. Thank you guys for helping me complete my project!

define(["jquery"], function($) {
$(".fix-image-url-input").on("change", function(event){ var input = $(this); var value = input.val(); var directive_re = /___directive/; if(directive_re.test(value)){ var split_value = value.split("/___directive/"); split_value = split_value[1].split("/key/"); split_value = split_value[0].split(","); var media_url_insert = atob(split_value[0]); var temp = media_url_insert.replace("{{",""); temp = temp.replace("}}",""); var attributes = temp.split(" "); for(var i = 0; i < attributes.length; i++){ var temp = attributes[i].replace("\"", ""); temp = temp.replace(new RegExp("\\\"" + '$'), ''); var split_attribute = temp.split("="); if(split_attribute[0] === 'url'){ var attribute_value = split_attribute[1]; input.val(attribute_value); break; } } } });
});

Here is a link to Magento's requirejs and a similar stack overflow as an additional option

Explanation of the script: I first figured if we have a directive link, then we extract the encoded media url insert. Then decoded the media url insert. Then looked for an attribute url and removed any extra quotes. Replace the input value with my new value... done and pretty.

Thank you @sashas777
And @cedricblondeau by the way =D

Hi,

I have tried nearly everything in this thread plus plenty of other solutions from stackoverflow but it still doesn't work.

The url is still broken (links to the admi url) and I don't really know what to look for as I'm new to Magento 2.

Can someone help please ?

see my answer to this issue here https://magento.stackexchange.com/a/214131/15150

You can fix the depends issue with this:

$element->setNoWrapAsAddon(true);
$element->setData('after_element_html', '<div id="' . $element->getId() . '" class="admin__field-control control">'.$input->getElementHtml() . $chooser->toHtml().'</div>');
return $element;

Couple of issues, with fixes!

ReferenceError: MediabrowserUtility is not defined

This is caused because the mediabrowser's javascript is not loaded. So create a file named Vendor/Package/etc/adminhtml/layout/adminhtml_widget_instance_edit.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <update handle="editor"/>
</page>

The file returned in the wysiwyg editor breaks, showing "}}

This is because the editor double escapes the string, the answer is at https://gist.github.com/cedricblondeau/6174911fb4bba6cb4943#gistcomment-2056776 ,but for completition:

Create Vendor\Package\Model\Widget.php:

<?php

namespace Vendor\Package\Model;

class Widget
{
    protected $backendData;

    public function __construct(
        \Magento\Backend\Helper\Data $backendData
    )
    {
        $this->backendData = $backendData;
    }

    public function beforeGetWidgetDeclaration(
        \Magento\Widget\Model\Widget $subject,
        $type,
        $params = [],
        $asIs = true
    )
    {
        foreach ($params as $name => $value) {
            if (preg_match('/(___directive\/)([a-zA-Z0-9,_-]+)/', $value, $matches)) {
                $directive = base64_decode(strtr($matches[2], '-_,', '+/='));
                $params[$name] = str_replace(['{{media url="', '"}}'], ['', ''], $directive);
            }
        }
        return [$type, $params, $asIs];
    }
}

and load this plugin be creating Vendor/Package/etc/di.xml with

<?xml version="1.0" encoding="UTF-8" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Widget\Model\Widget">
        <plugin name="my_plugins_name" type="Vendor\Package\Model\Widget" sortOrder="1" disabled="false"/>
    </type>
</config>

for directive "solution"
https://github.com/dmatthew/magento2-widget-parameters.git

If you're having the directive issue, ppassmannpriv's solution works. I have a confirmed working example below:

First, set up a basic module with registration.php, etc/module.xml, etc.

Replace VENDOR with your company name and MODULENAME with whatever you want to call the module.

In your etc/di.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Cms\Helper\Wysiwyg\Images" type="VENDOR\MODULENAME\Helper\Wysiwyg\Images" />
</config>

Add this file: app/code/VENDOR/MODULENAME/Helper/Wysiwyg/Images.php

<?php

namespace VENDOR\MODULENAME\Helper\Wysiwyg;

class Images extends \Magento\Cms\Helper\Wysiwyg\Images
{
    public function isUsingStaticUrlsAllowed()
    {
        return true;
    }
}

As a side note, there's no need to use a preference for that helper which adds unnecessary conflict potential with other extensions. The core method dispatches the event cms_wysiwyg_images_static_urls_allowed which can be observed, and the method's return value can be changed.

Couple of issues, with fixes!

ReferenceError: MediabrowserUtility is not defined

This is caused because the mediabrowser's javascript is not loaded. So create a file named Vendor/Package/etc/adminhtml/layout/adminhtml_widget_instance_edit.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <update handle="editor"/>
</page>

The file returned in the wysiwyg editor breaks, showing "}}

This is because the editor double escapes the string, the answer is at https://gist.github.com/cedricblondeau/6174911fb4bba6cb4943#gistcomment-2056776 ,but for completition:

Create Vendor\Package\Model\Widget.php:

<?php

namespace Vendor\Package\Model;

class Widget
{
    protected $backendData;

    public function __construct(
        \Magento\Backend\Helper\Data $backendData
    )
    {
        $this->backendData = $backendData;
    }

    public function beforeGetWidgetDeclaration(
        \Magento\Widget\Model\Widget $subject,
        $type,
        $params = [],
        $asIs = true
    )
    {
        foreach ($params as $name => $value) {
            if (preg_match('/(___directive\/)([a-zA-Z0-9,_-]+)/', $value, $matches)) {
                $directive = base64_decode(strtr($matches[2], '-_,', '+/='));
                $params[$name] = str_replace(['{{media url="', '"}}'], ['', ''], $directive);
            }
        }
        return [$type, $params, $asIs];
    }
}

and load this plugin be creating Vendor/Package/etc/di.xml with

<?xml version="1.0" encoding="UTF-8" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Widget\Model\Widget">
        <plugin name="my_plugins_name" type="Vendor\Package\Model\Widget" sortOrder="1" disabled="false"/>
    </type>
</config>

works, huge thanks to kevinruscoe!

Hi,
I'm just here to report that it works fine in our project with magento 2.3.3, using just the original files posted here.
You are true heroes!
Its such a shame that the original magento components are so buggy.. but don't let me start ranting about magento2 XD

Hi,
thank you guys for all your hints. I just tried the solution on Magento 2.4.2 and it works. I slightly modified the code, I removed the constructor because it says that the class \Magento\Backend\Helper\Data is deprecated. So here's my version

<?php

declare(strict_types=1);

namespace VENDOR\PACKAGE\Model;

use Magento\Widget\Model\Widget as MagentoWidget;

class Widget
{
    public function beforeGetWidgetDeclaration(
        MagentoWidget $subject,
        $type,
        $params = [],
        $asIs = true
    ): array
    {
        foreach ($params as $name => $value) {
            if (preg_match('/(___directive\/)([a-zA-Z0-9,_-]+)/', $value, $matches)) {
                $directive = base64_decode(strtr($matches[2], '-_,', '+/='));
                $params[$name] = str_replace(['{{media url="', '"}}'], ['', ''], $directive);
            }
        }

        return [$type, $params, $asIs];
    }
}

Hi Guys,
I was looking for a solution for ___directive issue and finally found the following simple way to fix the issue for Magento 2.3.5 and newer.
In the ImageChooser class, it is necessary to add the following line to the text input element definition:

$input->addCustomAttribute('data-force_static_path', 1);

That will force the Media Browser to generate static links related to the website root (starting from /media).