0

I am trying to make a widget that allows creating a banner with multiple images and the number of images dynamic. This ideally would be with the Media browser utility.

What I have so far is a single image chooser as this (it is working):

enter image description here

Code for that widget:

  <widget id="images_banner" class="MyVendor\MyModule\Block\Widget\Imagesbanner">
      <label>Images Banner</label>
      </parameters>
           <parameter name="icon" xsi:type="block" visible="true" required="false">
                    <label translate="true">Image</label>
                    <block class="MyVendor\MyModule\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>

And the class for the image chooser:

<?php
namespace MyVendor\MyModule\Block\Adminhtml\Widget;

use Magento\Framework\Data\Form\Element\AbstractElement as Element;
use Magento\Backend\Block\Template\Context as TemplateContext;
use Magento\Framework\Data\Form\Element\Factory as FormElementFactory;
use Magento\Backend\Block\Template;


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

    /**
     * @param TemplateContext $context
     * @param FormElementFactory $elementFactory
     * @param array $data
     */
    public function __construct(
        TemplateContext $context,
        FormElementFactory $elementFactory,
        $data = []
    ) {
        $this->elementFactory = $elementFactory;
        parent::__construct($context, $data);
    }

    /**
     * Prepare chooser element HTML
     *
     * @param Element $element
     * @return Element
     */
    public function prepareElementHtml(Element $element)
    {
        $config = $this->_getData('config');
        $sourceUrl = $this->getUrl('cms/wysiwyg_images/index',
            ['target_element_id' => $element->getId(), 'type' => 'file']);

        /** @var \Magento\Backend\Block\Widget\Button $chooser */
        $chooser = $this->getLayout()->createBlock('Magento\Backend\Block\Widget\Button')
            ->setType('button')
            ->setClass('btn-chooser')
            ->setLabel($config['button']['open'])
            ->setOnClick('MediabrowserUtility.openDialog(\'' . $sourceUrl . '\', 0, 0, "MediaBrowser", {})')
            ->setDisabled($element->getReadonly());

        /** @var \Magento\Framework\Data\Form\Element\Text $input */
        $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()
            . "<script>require(['mage/adminhtml/browser']);</script>");

        return $element;
    }
}

But now what I need is to make it dynamic; in other words, to have the option of "Add New Image" and when the admin clicks there to make another image chooser appear and so on.

Any ideas to achieve this?

Thank you

  • Hi @paloma-martinez , did you manage to get this to work? – PauGNU Jul 14 at 9:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.