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