cancel
Showing results for 
Search instead for 
Did you mean: 

image in product description get broken on front end

image in product description get broken on front end

I am using Magento 2.2.2.

Right now I am adding products to the website.

When I wanted to add a picture in the description section of a product the inserted image will break in the frontend. when inspected the page, the code for the image was:

<img src="{{media url=" wysiwyg="" ednetcube.jpg"}}"="" width="800" height="400">

interesting enough when I went in the backend admin to check what happened, the image was there.

 

does anyone had this problem, or know a solution for it?

 

thanks

10 REPLIES 10

Re: image in product description get broken on front end

Hello @robertbits

 

As i can see i think the url in the image tag is not proper and that can be the reason for broken

image. Can u share the code with me.

 

 

ThankYou 

 

If problem solved Accept as solution and kudos!!

Re: image in product description get broken on front end

Hi @Surbhiagr

thanks for your reply.

 

I have found out that the problem is not with the defualt description tab, but an extra one that I have added via a module. I have folowed this method to create it:

1. First go to the admin panel of your Magento store and then navigate to Stores -> Product. Click on Add New Attribute and create new Attribute. (Set Attribute label DEMO and Attribute code demo) 

2. Now go to Stores -> Attribute Set and Add Attribute Set. 

3. Now click on your Attribute Set and dragged unassigned Attribute (which you have created in first step) to Product Details and click Save.

4. Now go to your product edit page in admin panel and change the attribute name and template name which you have created in first and second step.

5. In app/code/Test/ProductTabs/etc/module.xml paste this code. 
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Test_ProductTabs" setup_version="1.0.0"></module>
</config>

6. In app/code/Test/ProductTabs/registration.php, paste this code. 
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Test_ProductTabs',
__DIR__
);

7. In app/code/Test/ProductTabs/view/frontend/layout/catalog_product_view.xml, paste this code. 
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="product.info.details">
        <block class="Magento\Catalog\Block\Product\View" name="demo.tab" template="Test_ProductTabs::custom_tab.phtml" group="detailed_info" >
            <arguments>
                <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
            </arguments>
        </block>
    </referenceBlock>
</body>
</page>

8. Now in app/code/Test/ProductTabs/view/frontend/templates/custom_tab.phtml, paste this code. 
<?php 
$product = $block->getProduct();
?>
<h1 style="color: #00aeed"><?php echo $product->getData('demo'); ?></h1>

So the problem happens when I add an image in this WYSIWYG editor.

 

Re: image in product description get broken on front end

Hello @robertbits

 

Can u tell me what code is appearing wysiwyg editor after you insert image.

 

 

Thanks

Re: image in product description get broken on front end

@Surbhiagr

 

When I insert the image, the code is this:

<p><img src="{{media url="wysiwyg/ZZ290141_interface.jpg"}}" width="1000" height="931" /></p>

then when I go to front end, with inspect function the code is this:

<img src="{{media url=" wysiwyg="" zz290141_interface.jpg"}}"="" width="1000" height="931">

when it should be like this:

<img src="http://magento/pub/media/wysiwyg/ZZ290141_interface.jpg" width="1000" height="931">

 

Re: image in product description get broken on front end

Hello @robertbits

 

Are you trying to insert wysiwyg editor in the frontend or backend. According to what i think there can be problem in the way you are inserting the editor . You can follow this link for adding a wysiwyg editor.

 

https://webkul.com/blog/add-wysiwyg-editor-in-magento2-configuration-section/

https://webkul.com/blog/add-wysiwyg-editor-front-end-form-magento-2/

 

Thank You

 

Please accept as solution and kudo if it works for you Smiley Happy

Re: image in product description get broken on front end

@Surbhiagr

 

I wanted to create other TABs in Product Information page, along side details and review tabs.

 

To do this I created an attribute (with EYSIWYG Editor enabled) and added it into the defualt attribute set. Then created a module to link the attribute to theme.

 

When I typed text it worked fine, but when I add an image, the problem occurs.

The curoisity is that when I insert the image in the detials tab, it works fine. so the problem is with something I have created.

Re: image in product description get broken on front end

@robertbits

 

According to me when you created the attribute  you must have selected the Catalog Input Type for Store Owner as  text area.

 This is the reason it is working for text and not taking any images.

If you want to take the image you must select media instead of Text area.

When You will select media there will a option in product detail page in backend to select image.. Then there will be no need for the editor And you will get your work done  by that image.

 

When you had selected the text area the editor took the url as text not media url

Thanks

 

Hope it helped Smiley Happy

Re: image in product description get broken on front end

@Surbhiagr

I have made it as you guessed as TEXT AREA, but it is also text area the Magento description attribute. So I don't believe that that is the problem.

 

The thing is that I don't want to put only images, but also text, and if I understand correctly the Media Image, it accepts only images.

Re: image in product description get broken on front end

@Surbhiagr

I am starting to thing that I am missing something in the module that I have created. Below you can find the code for the module:

Folder Structure: 

CustomTab
   - registration.php
   -> Block
      - Display.php
   -> etc
      - module.xml
   -> view
      -> frontend
         -> layout
            - catalog_product_view.xml
         -> template
            - description.phtml

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Bitsbytes_CustomTab',
    __DIR__
);

Block\Display.php

<?php
namespace Bitsbytes\Bitsbytes_CustomTab\Block;

use Magento\Catalog\Model\Product;

class Display extends \Magento\Framework\View\Element\Template{

    /**
     * @var Product
     */
    protected $_product = null;

    /**
     * Core registry
     *
     * @var \Magento\Framework\Registry
     */
    protected $_coreRegistry = null;

    /**
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param \Magento\Framework\Registry $registry
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Framework\Registry $registry,
        array $data = []
    ) {
        $this->_coreRegistry = $registry;
        parent::__construct($context, $data);
    }

    /**
     * @return Product
     */
    public function getProduct()
    {
        if (!$this->_product) {
            $this->_product = $this->_coreRegistry->registry('product');
        }
        return $this->_product;
    }

}

etc\module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Bitsbytes_CustomTab" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

view\frontend\layout\catalog_product_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
         <referenceBlock name="product.info.details">
            <block class="Magento\Catalog\Block\Product\View" name="description.tab" as="description" template="Bitsbytes_CustomTab::description.phtml" group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Description TAB</argument>
                </arguments>
            </block>
        </referenceBlock>
   </body>
</page>

view\frontend\template\description.phtml

<?php // Get current product
$product = $block->getProduct();
?>
<?php echo $product->getData('tab_description'); ?>