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

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.

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.

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

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

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

Output:

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. Share this tutorial with your friends, and stay updated with us for more such tutorials.

Happy Coding!