Magento – Custom widget image is not showing on frontend Magento 2

imagemagento2widget

I have a custom widget with an image uploader. Backend is working perfectly, but uploaded image path is showing like this http://db7005.web49.ixl.nu/achterkant/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvZHJ3LWNvbGxlY3RpZS5qcGcifX0,/key/41232ece1b5fc0b9dda248a7e185407a69cbda1f653169244448d6c38e0abdcc/

My image is not showing on frontend. Can anyone please help me to solve this issue.

enter image description here

Cookiecode\WidgetBlock\etc\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="cc_custom_widget" class="Cookiecode\WidgetBlock\Block\Widget\CustomWidget" placeholder_image="Cookiecode_WidgetBlock::images/widget_block.png">
        <label translate="true">Cookiecode - Custom block widget</label>
        <description>Cookiecode - Demo Block widget</description>
        <parameters>
            <parameter name="cc_text1" xsi:type="text" visible="true" required="true" sort_order="0" >
                <label translate="true">Text1</label>
            </parameter>
            <parameter name="cc_text2" xsi:type="text" visible="true" required="true" sort_order="0" >
                <label translate="true">Text2</label>
            </parameter>
            <parameter name="cc_text3" xsi:type="text" visible="true" required="true" sort_order="0" >
                <label translate="true">Text3</label>
            </parameter>
            <parameter name="cc_text4" xsi:type="text" visible="true" required="true" sort_order="0" >
                <label translate="true">Text4</label>
            </parameter>
            <parameter name="image1" xsi:type="block" required="true" visible="true" sort_order="10">
                <label translate="true">Image1</label>
                <block class="Cookiecode\WidgetBlock\Block\Adminhtml\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter name="image2" xsi:type="block" required="true" visible="true" sort_order="10">
                <label translate="true">Image2</label>
                <block class="Cookiecode\WidgetBlock\Block\Adminhtml\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter name="image3" xsi:type="block" required="true" visible="true" sort_order="10">
                <label translate="true">Image3</label>
                <block class="Cookiecode\WidgetBlock\Block\Adminhtml\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter name="image4" xsi:type="block" required="true" visible="true" sort_order="10">
                <label translate="true">Image4</label>
                <block class="Cookiecode\WidgetBlock\Block\Adminhtml\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter name="cc_url1" xsi:type="text" visible="true" sort_order="30">
                <label translate="true">URL1</label>
            </parameter>
            <parameter name="cc_url2" xsi:type="text" visible="true" sort_order="31">
                <label translate="true">URL2</label>
            </parameter>
            <parameter name="cc_url3" xsi:type="text" visible="true" sort_order="32">
                <label translate="true">URL3</label>
            </parameter>
            <parameter name="cc_url4" xsi:type="text" visible="true" sort_order="33">
                <label translate="true">URL4</label>
            </parameter>
        </parameters>
    </widget>
</widgets>

Cookiecode\WidgetBlock\Block\Adminhtml\Widget\ImageChooser.php

<?php
namespace Cookiecode\WidgetBlock\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;
    }
}

app\code\Cookiecode\WidgetBlock\view\frontend\templates\widget\custom_widget.phtml

<div class="cc-custom-widget">
        <?php $cc_url1 = $this->getData('cc_url1') ?>
        <?php $cc_text1 = $this->getData('cc_text1') ?>
        <?php $cc_image = $this->getData('image2') ?>
</div>
<div class="row">
    <div class="medium-up-4" data-equalizer="">
        <div class="column drw-home text-center">
            <div class="wrapper"><a href="<?php echo $cc_url1 ?>"><span data-equalizer-watch=""><img src="<?php echo $cc_image ?>"/><?php echo $cc_text1 ?></span></a></div>
        </div>
    </div>
</div>

Best Answer

It seems your problem is that there is a backend url to the image used in the frontend.

As a workaround you could manually convert the url to a direct link to the image as shown in this interceptor

Related Topic