Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Image Chooser for Magento2 widgets
<?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;
}
}
<?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>
@cedricblondeau

This comment has been minimized.

Copy link
Owner Author

commented Jan 14, 2016

For more information and solution for "/___directive" URLs, see http://stackoverflow.com/questions/5077755/images-in-magento-widgets (Magento 1.x).

@TommyKolkman

This comment has been minimized.

Copy link

commented Feb 5, 2016

So we end up with something like {{widget type="Elephant\CustomWidget\Block\Widget\TextAndImage" title="Titel" image="{{media url="wysiwyg/photo-1432057322224-8916b9ed202a.jpeg"}}" image_position="top" link="http://google.com"}}, but Magento doesn't accept this nested directive. Did you solve this?

@TommyKolkman

This comment has been minimized.

Copy link

commented Feb 29, 2016

Another question (to whoever is using this): the "depends" node of the parameter isn't working like it should (works on textfields, for example). Any idea?

<parameter name="image" xsi:type="block" required="true" visible="true" sort_order="40">
                <label translate="true">Image (default)</label>
                <block class="Elephant\CFParent\Block\Adminhtml\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Pick image...</item>
                        </item>
                    </data>
                </block>
                <depends>
                    <parameter name="language" value="0" />
                </depends>
            </parameter>
@cedricblondeau

This comment has been minimized.

Copy link
Owner Author

commented Apr 2, 2016

For the "/___directive" URL, see http://stackoverflow.com/questions/5077755/images-in-magento-widgets, there is different solutions.
Regarding the 'depends" node, I think it's a bug.

@willrpike

This comment has been minimized.

Copy link

commented May 2, 2016

Thank you, this is super helpful.

@mvistas

This comment has been minimized.

Copy link

commented May 19, 2016

Hello cedricblondeau,

I am new on magento 2. I just create a widget and one of the parameters is a image uploader. I just use you code.
When I choose the picture and insert it on the widget form, the picture url seams to be ok in the form field. It looks like this: http://local.magento.com/admin/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvcHVycGxlLmpwZyJ9fQ,,/key/4c150d984998702b74709bb8f05820aff2f85a968d47e50f9638b7d2a7b1ced3/

But when I save the widget, in a page for example, the data in field is saved with this: {{media url=

I can not save the picture url.

Can you help me?
Thank you in advance

@ahofstetter

This comment has been minimized.

Copy link

commented Jul 28, 2016

I am seeing error "ReferenceError: MediabrowserUtility is not defined" in console when using this. Am using Magento 2.1 CE. Maybe it is due to a change introduced in 2.1? Will post here if I find a solution

@ahofstetter

This comment has been minimized.

Copy link

commented Aug 8, 2016

No resolution has been found. @cedricblondeau , do you have any idea how this can be fixed?
Thanks

@dutchwave

This comment has been minimized.

Copy link

commented Aug 19, 2016

Same problem as @ahofstetter @cedricblondeau

@ahofstetter

This comment has been minimized.

Copy link

commented Aug 23, 2016

If you add an adminhtml layout update for handle adminhtml_widget_instance_edit.xml, it will include the wysiwyg editor for you for the widget edit page. Works for me after that
Something like the below in the layout/adminhtml folder for your custom module

<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>
@chonny

This comment has been minimized.

Copy link

commented Aug 25, 2016

Anyone found solution of ___directive issue ?

@DavidLambauer

This comment has been minimized.

Copy link

commented Aug 25, 2016

Hi everybody, I solved the Issue by just adding the correct JS File to head via layout.xml. This solution works for me at the moment. I have to make some Unit Tests and try to integrate the JS File only when it is necessary.

I also made a simple module which is available here: https://packagist.org/packages/dlambauer/magento2-module-backend-widget-imageupload

@athleticnerd

This comment has been minimized.

Copy link

commented Aug 29, 2016

Hello Guys,
i have found a solution for the ___directive problem.

1. create YouCompany\YourModule/etc/di.xml
`

`

2. Create two Plugins.
On: "YouCompany/YourModule/Model/Plugin/Adminhtml/Wysiwyg/Images"

YOU HAVE TO REPLACE: "comwrap_widget_background_image" and "comwrap_widget_content_image" with you Widget parameter name!

`

getRequest()->getParam("target_element_id"), "comwrap_widget_background_image") !== 0 || strpos($subject->getRequest()->getParam("target_element_id"), "comwrap_widget_content_image") !== 0){ return $subject->getUrl('cms/*/onInsert', array("is_widget"=>true)); } return $subject->getUrl('cms/*/onInsert'); } ``` } ` And on: On: "YouCompany/YourModule/Model/Plugin/Cms/Helper/Wysiwyg" ` getCurrentUrl() . $filename; $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface'); $mediaUrl = $storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA); $mediaPath = str_replace($mediaUrl, '', $fileurl); $request = $objectManager->get("\Magento\Framework\App\Request\Http"); if ($request->getParam("is_widget") == 1){ return $mediaPath; } return $returnValue; } ``` } `
@DavidLambauer

This comment has been minimized.

Copy link

commented Aug 30, 2016

Hi there, I worked a little bit on my module, which seems to had some bigger bugs than I actually thought. The solution that works for me is that I just required the missing Javascript Component (MediabrowserUtility) by adding a require(...) at the end of my block. This is not very pretty, but I am not sure how to require JS Components when I need them in my block.

Please let me know if there are any further bugs.

Thanks for gist!

@TommyKolkman

This comment has been minimized.

Copy link

commented Oct 21, 2016

@DavidLambauer, you're a hero! Thanks for the extension, that is awesome.

@sengaigibon

This comment has been minimized.

Copy link

commented Nov 10, 2016

@DavidLambauer, It's a very useful code!
About the missing "MediabrowserUtility" I took the same approach as @ahofstetter.
I got some more errors after I choose the picture and then clicking again on the button to choose another one.
I replaced line #40 with this...:
->setOnClick("MediabrowserUtility.openDialog('$sourceUrl',null, null,'".$this->escapeQuote(__('Choose Image...'),true)."',(opt = new Object(), opt.closed = false, opt))")
Just passing parameters to openDialog function.
Thaks for this code @DavidLambauer

@rodde177

This comment has been minimized.

Copy link

commented Dec 21, 2016

Hi, does this still work for you in Magento 2.1.3?

@ppassmannpriv

This comment has been minimized.

Copy link

commented Feb 17, 2017

I found a solution for the __directive URLs. For some reason in the Class \Magento\Cms\Helper\Wysiwyg\Images the method isUsingStaticUrlsAllowed returns a false. ( ͠° ͟ʖ ͡°)

So in my widget module i made a preference in my di.xml to extend the Helper and altered the method to return true. ( ͡° ͜ʖ ͡°)

I do still wonder why the media browser is not a global useable widget type in the whole of magento...

@naffers

This comment has been minimized.

Copy link

commented Feb 20, 2017

@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

@sashas777

This comment has been minimized.

Copy link

commented Apr 11, 2017

__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" }}

@amaddatu

This comment has been minimized.

Copy link

commented Sep 21, 2017

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.

@Yonn-Trimoreau

This comment has been minimized.

Copy link

commented Jan 8, 2018

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

@Tokipudi

This comment has been minimized.

Copy link

commented Jan 18, 2018

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 ?

@danrcoull

This comment has been minimized.

Copy link

commented Feb 19, 2018

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

@nsergo

This comment has been minimized.

Copy link

commented Mar 16, 2018

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;
@kevinruscoe

This comment has been minimized.

Copy link

commented Mar 16, 2018

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>

@matritix

This comment has been minimized.

Copy link

commented Sep 18, 2018

@sean-wcb

This comment has been minimized.

Copy link

commented Feb 16, 2019

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;
    }
}

@simonrl

This comment has been minimized.

Copy link

commented May 2, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.