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
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!!
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.
Hello @robertbits
Can u tell me what code is appearing wysiwyg editor after you insert image.
Thanks
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">
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
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.
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
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.
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'); ?>