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