Created
January 14, 2016 02:40
-
-
Save cedricblondeau/6174911fb4bba6cb4943 to your computer and use it in GitHub Desktop.
Image Chooser for Magento2 widgets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:That will force the Media Browser to generate static links related to the website root (starting from
/media
).