3

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>
0

Did you manage to solve this? 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: https://magento.stackexchange.com/a/135233/44090

0

Now Magento has a system configuration to enable static url for media content uploaded by WYSIWYG editor.

Set Stores -> Configuration -> General -> Content Management -> WYSIWYG Options -> Use Static URLs for Media Content in WYSIWYG to 'Yes' to fix this issue.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.