Skip to content

How to replace upload image field with a Page Builder area in admin?

I need the ability to add two different images as the “category image” in the categories section: one image for desktop and another for mobile.

Currently, Magento 2 only allows for one image to be used across all screen types. I’d like to add another upload image field, or possibly a simpler solution: a textarea or pagebuilder field where I can add an HTML element like this:

enter image description here

I’ve never done this before, so here’s what I’ve managed to code so far:

  • I overrode this file:

vendor/magento/module-catalog/view/adminhtml/ui_component/category_form.xml

inside my own module like this:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="content" sortOrder="10">
        <field name="category_image_html" template="ui/form/field" sortOrder="50" formElement="wysiwyg">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="height" xsi:type="string">100px</item>
                        <item name="add_variables" xsi:type="boolean">false</item>
                        <item name="add_widgets" xsi:type="boolean">false</item>
                        <item name="add_images" xsi:type="boolean">true</item>
                        <item name="add_directives" xsi:type="boolean">true</item>
                    </item>
                    <item name="source" xsi:type="string">category_image_html</item>
                </item>
            </argument>
            <settings>
                <label translate="true">category_image_html</label>
                <notice translate="true">Note: Keyboard shortcut to activate editor help : Alt + 0 (Windows) or &#x2325;0 (MacOS)</notice>
                <dataScope>category_image_html</dataScope>
            </settings>
            <formElements>
                <wysiwyg class="MagentoCatalogUiComponentCategoryFormElementWysiwyg">
                    <settings>
                        <rows>8</rows>
                        <wysiwyg>true</wysiwyg>
                    </settings>
                </wysiwyg>
            </formElements>
        </field>
    </fieldset>
</form>

With this, I can see the PageBuilder element in the admin section. However, the image uploader is still present, and I don’t know how to remove it. Additionally, if I try to add content and save the page, there are no errors, but the content does not get saved.

Can anyone help? I’m not sure what to do next.