---
title: "How to Add Image Field on CMS Page in Magento 2?"
url: "https://magecomp.com/blog/add-image-field-on-cms-page-magento-2/"
date: "2023-07-31T15:02:41+00:00"
modified: "2025-02-13T11:53:22+00:00"
author:
  name: "Dhiren Vasoya"
  url: "https://magecomp.com/"
categories:
  - "How To"
  - "Magento 2"
word_count: 732
reading_time: "4 min read"
summary: "Hello Magento Friends,"
description: "Customize the backend CMS page section of your Magento 2 store by adding an image field. Learn more"
keywords: "How To, Magento 2"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Magento 2: What is difference between Cache Clean & Cache Flush?"
    url: "https://magecomp.com/blog/magento-2-difference-between-cache-clean-cache-flush/"
  - title: "How to pre-open “Apply Voucher Code” in the Checkout page of Magento 2"
    url: "https://magecomp.com/blog/pre-open-apply-voucher-code-checkout-page-magento-2/"
  - title: "How to hide product page Add to Cart Button for Guest Users in Magento 2"
    url: "https://magecomp.com/blog/hide-product-page-add-cart-button-guest-users-magento-2/"
---

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

_Published: July 31, 2023_  
_Author: Dhiren Vasoya_  

![How to Add Image Field on CMS Page in Magento 2](https://magecomp.com/blog/wp-content/uploads/2023/07/How-to-Add-Image-Field-on-CMS-Page-in-Magento-2-1024x512.webp)

**Hello Magento Friends,**

In this blog, I will guide you through the steps to add an image field to a CMS page in Magento 2.
[![hyva theme development](https://magecomp.com/blog/wp-content/uploads/2025/02/hyva-theme-development-CTA-2.webp)](https://magecomp.com/services/hyva-theme-development/)

In Magento 2, the CMS (Content Management System) plays a vital role in managing static pages, such as homepages, about us pages, and contact pages. By default, Magento 2 provides text fields for content editing on CMS pages. However, in some cases, you might want to include images to enrich the content and provide a visually appealing experience for your customers.
Let’s look at the steps for how to add an image field on the 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="VendorModuleObserverSaveCustomImage" />
    </event>
</config>
```

[![Hire Magento Programmer](https://magecomp.com/blog/wp-content/uploads/2025/02/Hire-Magento-Programmer-CTA-2.webp)](https://magecomp.com/services/hire-magento-programmer/)

**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 VendorModuleObserver;

use MagentoFrameworkEventObserverInterface;
use MagentoFrameworkAppRequestDataPersistorInterface;
use MagentoFrameworkFilesystem;
use MagentoMediaStorageModelFileUploaderFactory;

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(MagentoFrameworkEventObserver $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(MagentoFrameworkAppFilesystemDirectoryList::MEDIA);
            $result = $uploader->save($mediaDirectory->getAbsolutePath('custom_cms_images'));
            $data['custom_image'] = 'custom_cms_images' . $result['file'];
        }

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

**Output:**

[![Image field on CMS page](https://magecomp.com/blog/wp-content/uploads/2023/07/Image-field-on-CMS-page.png)](https://magecomp.com/blog/wp-content/uploads/2023/07/Image-field-on-CMS-page.png)

## Conclusion:
You have successfully added an image field to your CMS page in Magento 2. You can also [**Add Custom Button in Backend CMS Page Section in Magento 2**](https://magecomp.com/blog/magento-2-add-custom-button-in-backend-cms-page/). Share this tutorial with your friends, and stay updated with us for more such tutorials.
[![Magento version upgrade](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-2-Version-Upgrade-CTA-2-2.webp)](https://magecomp.com/services/magento-upgrade-services/)

**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/add-image-field-on-cms-page-magento-2/](https://magecomp.com/blog/add-image-field-on-cms-page-magento-2/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-05 20:36:38 UTC_