Change {{media url="wysiwyg/image.jpg"}} in frontend in custom module

Question

I'm building a custom module, a very simple blog. I already have everything working. The last thing I added, was de WYSIWYG image upload capability.

In the Admin, everything works fine. But in the fronted, I see the raw source code and the <img> tags are filled with: {{media url="wysiwyg/some_image.jpg"}}

If I navigate to /pub/media/wysiwyg/some_image.jpg, the jpg exists. But I can't figure out how to change this via some helper or function to get it right in the front end.

Answer 1

You can filter its using filter() function,

$content = 'This is test demo imgage, {{media url="wysiwyg/some_image.jpg"}}';
$om = \Magento\Framework\App\ObjectManager::getInstance();
$filterManager = $om->get('Magento\Cms\Model\Template\FilterProvider')->getPageFilter()->filter($content);
echo $filterManager;

Answer 2

You need declare this Class in constructor of Block:

Magento\Cms\Model\Template\FilterProvider $filterProvider

$content = '{{media url="wysiwyg/some_image.jpg"}}';
$contentGenerating = $this->_filterProvider->getPageFilter()->filter($content);
echo $contentGenerating; //Generate HTML <img src="http://baseUrl/pub/media/wysiwyg/some_image.jpg"/>

I hope it help you.

Answer 3

You need to add processor for WYSIWYG content to display on frontend. It will process all the variables used in the editor and display it with its values. If you have the content in a variable.

$content = $myContent;
echo Mage::helper('cms')->getPageTemplateProcessor()->filter($content);