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

Hello magento friends todays im share a post How to Add Image Field on CMS Page in Magento 2.

to lets get started

To add an image field on a CMS page in Magento 2, you'll need to create a custom module that extends the core functionality. Here's a step-by-step guide on how to achieve this:

Step 1: Create the custom module folder structure

Create the following folders and files in your Magento 2 installation:

app/code/YourVendor/YourModule/

├── registration.php

├── etc/

│   ├── module.xml

│   └── di.xml

└── Setup/

    └── InstallSchema.php

Step 2: Define the module in registration.php

In the registration.php file, declare the module:

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(

    ComponentRegistrar::MODULE,

    'YourVendor_YourModule',

    __DIR__

);

Step 3: Define the module in module.xml

In the module.xml file, specify the module's basic information:

<?xml version="1.0"?>

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

    <module name="YourVendor_YourModule" setup_version="1.0.0">

        <sequence>

            <module name="Magento_Cms"/>

        </sequence>

    </module>

</config>

Step 4: Create di.xml to declare the block and form elements

In the di.xml file, define a new block and form element for the image field:

<?xml version="1.0"?>

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

    <type name="Magento\Cms\Model\Page\DataProvider">

        <arguments>

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

                <item name="your_custom_image_field" xsi:type="object">YourVendor\YourModule\Model\Cms\Page\AddImageFieldToPage</item>

            </argument>

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

                <item name="your_custom_image_field" xsi:type="object">YourVendor\YourModule\Model\Cms\Page\AddImageFieldToPage</item>

            </argument>

        </arguments>

    </type>

</config>

Step 5: Create InstallSchema.php to add a new column to the cms_page table

In the InstallSchema.php file, define a new column for the image field:

<?php

namespace YourVendor\YourModule\Setup;

use Magento\Framework\Setup\InstallSchemaInterface;

use Magento\Framework\Setup\ModuleContextInterface;

use Magento\Framework\Setup\SchemaSetupInterface;

use Magento\Framework\DB\Ddl\Table;

class InstallSchema implements InstallSchemaInterface

{

    public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)

    {

        $setup->startSetup();

        $setup->getConnection()->addColumn(

            $setup->getTable('cms_page'),

            'custom_image_field',

            [

                'type' => Table::TYPE_TEXT,

                'nullable' => true,

                'comment' => 'Custom Image Field',

            ]

        );

        $setup->endSetup();

    }

}

Step 6: Create the block to add the image field

Create the block file AddImageFieldToPage.php under app/code/YourVendor/YourModule/Model/Cms/Page/:

<?php

namespace YourVendor\YourModule\Model\Cms\Page;

use Magento\Cms\Model\Page\DataProvider;

class AddImageFieldToPage

{

    public function __construct(DataProvider $dataProvider)

    {

        $dataProvider->addFieldModifier(

            'custom_image_field',

            \Magento\Ui\Component\Form\Element\DataType\Text::NAME,

            \Magento\Ui\Component\Form\Element\DataType\Text::NAME,

            [],

            'Custom Image Field'

        );

    }

}

Step 7: Run the setup upgrade and clear cache

Finally, run the following commands from your Magento 2 root directory:

php bin/magento setup:upgrade

php bin/magento cache:flush

Now, when you edit a CMS page in the admin panel, you should see a new field named "Custom Image Field" where you can add the image path or URL. Please note that this is a basic example, and you might need to enhance it further according to your specific requirements.