How to Add Image Field on CMS Page in Magento 2?

 Steps to Add Image Field on CMS Page in Magento 2:

Step 1: In the first step, we need to create a db_schema.xml file inside the extension at the following path.

{{magento_root}}/app/code/Vendor/Module/etc/db_schema.xml

Now add the code as follows.

<?xml version="1.0"?>

<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">

    <table name="cms_page" resource="default" engine="innodb" comment="Cms Page">

        <column length="255" name="custom_image" nullable="false" xsi:type="varchar"/>

    </table>

</schema>

Step 2: After that, we need to create a cms_page_form.xml to define the CMS page form with the image field File inside the extension at the following path.

{{magento_root}}/app/code/Vendor/Module/view/adminhtml/ui_component/cms_page_form.xml

Then include the below-mentioned code

<?xml version="1.0" encoding="UTF-8"?>

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">

    <fieldset name="content">

        <field name="custom_image" formElement="imageUploader">

            <argument name="data" xsi:type="array">

                <item name="config" xsi:type="array">

                    <item name="dataType" xsi:type="string">string</item>

                    <item name="label" xsi:type="string" translate="true">Page Image</item>

                    <item name="formElement" xsi:type="string">imageUploader</item>

                    <item name="source" xsi:type="string">page</item>

                    <item name="sortOrder" xsi:type="number">30</item>

                    <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>

                    <item name="required" xsi:type="boolean">false</item>

                </item>

            </argument>

        </field>

    </fieldset>

</form>

Step 3: After that, we need to register the observer in the event.xml file in the observer File inside the extension at the following path.

{{magento_root}}/app/code/Vendor/Module/etc/events.xml

And add the below piece of code

<?xml version="1.0" encoding="UTF-8"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">

    <event name="cms_page_prepare_save">

        <observer name="custom_cms_image" instance="Vendor\Module\Observer\SaveCustomImage" />

    </event>

</config>

Step 4: Finally, we need to Save that uploaded image in the observer File inside the extension at the following path.

{{magento_root}}/app/code/Vendor/Module/Observer/SaveCustomImage.php

Now add the code as mentioned below

<?php

namespace Vendor\Module\Observer;

 

use Magento\Framework\Event\ObserverInterface;

use Magento\Framework\App\Request\DataPersistorInterface;

use Magento\Framework\Filesystem;

use Magento\MediaStorage\Model\File\UploaderFactory;

 

class SaveCustomImage implements ObserverInterface

{

    protected $dataPersistor;

    protected $uploaderFactory;

    protected $filesystem;

 

    public function __construct(

        DataPersistorInterface $dataPersistor,

        UploaderFactory $uploaderFactory,

        Filesystem $filesystem)

    {

        $this->dataPersistor = $dataPersistor;

        $this->uploaderFactory = $uploaderFactory;

        $this->filesystem = $filesystem;

    }

 

    public function execute(\Magento\Framework\Event\Observer $observer)

    {

        $data = $this->dataPersistor->get('cms_page');

        if (!$data) {

            return;

        }

 

        $image = $data['custom_image'] ?? null;

        if ($image) {

            $uploader = $this->uploaderFactory->create(['fileId' => 'custom_image']);

            $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);

            $uploader->setAllowRenameFiles(true);

            $uploader->setFilesDispersion(true);

            $mediaDirectory = $this->filesystem->getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);

            $result = $uploader->save($mediaDirectory->getAbsolutePath('custom_cms_images'));

            $data['custom_image'] = 'custom_cms_images' . $result['file'];

        }

 

        $observer->getPage()->addData($data);

    }

}