Magento. Add image to cms page.

mage_add_image_to_cms_page.md

Add image to cms page

1. Add new fields to cms_page table

Add new mysql4-install-1.0.0 if you create new module or mysql4-upgrade-x.x.x-x.x.x if you add it to existed module.

    /* @var $installer Mage_Core_Model_Resource_Setup */
    $installer = $this;

    $installer->startSetup();

    $table = $installer->getTable('cms_page');

    $installer->getConnection()
    ->addColumn($table, 'image',array(
        'type' => Varien_Db_Ddl_Table::TYPE_TEXT,
        'nullable'  => false,
        'length'    => 255,
        'after'     => null,
        'comment'   => 'Image'
    ));

    $installer->getConnection()
    ->addColumn($table, 'small_image',array(
        'type' => Varien_Db_Ddl_Table::TYPE_TEXT,
        'nullable'  => false,
        'length'    => 255,
        'after'     => null,
        'comment'   => 'Small Image'
    ));

    $installer->endSetup();

2. Change cms page edit form enctype

Add observer to adminhtml section in config.xml

    
    <adminhtml>
        <events>
            <adminhtml_block_html_before>
                <observers>
                    <{VENDOR_MODULE}_cms_page_edit_form_add_enctype>
                        <type>singleton</type>
                        <class>{MODEL ALIAS}/observer</class>
                        <method>addFormEnctype</method>
                    </{VENDOR_MODULE}_cms_page_edit_form_add_enctype>
                </observers>
            </adminhtml_block_html_before>
        </events>
    </adminhtml>

Add method to Observer.php

    /**
     * Set form enctype
     * 
     * @event adminhtml_block_html_before
     * @param Varien_Event_Observer $observer
     */
    public function addFormEnctype(Varien_Event_Observer $observer) 
    {
        try {
            $block = $observer->getEvent()->getBlock();
            
            if ($block instanceof Mage_Adminhtml_Block_Cms_Page_Edit_Form) {
                
                $form = $block->getForm();
                $form->setData('enctype', 'multipart/form-data');
                $form->setUseContainer(true);
            }
        } catch(Exception $e) {
            Mage::logException($e);
        }
    }

3. Add to cms page edit form (content) new fieldset and fields

Add observer to adminhtml section in config.xml

        
    <adminhtml>
        <events>
            <adminhtml_cms_page_edit_tab_content_prepare_form>
                <observers>
                    <{VENDOR_MODULE}_cms_page_edit_tab_content_add_fields>
                        <type>singleton</type>
                        <class>{MODEL ALIAS}/observer</class>
                        <method>addFields</method>
                    </{VENDOR_MODULE}_cms_page_edit_tab_content_add_fields>
                </observers>
            </adminhtml_cms_page_edit_tab_content_prepare_form>
        </events>
    </adminhtml>

Add method to Observer.php

    /**
     * Add new fields set and two fields for upload images
     * 
     * @event adminhtml_cms_page_edit_tab_content_prepare_form
     * @param Varien_Event_Observer $observer
     */
    public function addFields(Varien_Event_Observer $observer)
    {
        /* @var $model Mage_Cms_Model_Page */
        $model = Mage::registry('cms_page');
        
        /* @var $form Varien_Data_Form */
        $form = $observer->getForm();
        
        /* @var $form Varien_Data_Form_Element_Fieldset */
        $fieldset = $form->addFieldset(
                'images', 
                array(
                    'legend' => Mage::helper('cms')->__('Images'),
                    'class'  => 'fieldset-wide'
                )
            );
        
        $fieldset->addField('image', 'image', array(
            'name'      => 'image',
            'label'     => Mage::helper('cms')->__('Image'),
            'title'     => Mage::helper('cms')->__('Image'),
            'disabled'  => false,
            'value'     => $model->getImage(),
            'note'      => 'Use as content heading background.'
        ));
        
        $fieldset->addField('small_image', 'image', array(
            'name'      => 'small_image',
            'label'     => Mage::helper('cms')->__('Small Image'),
            'title'     => Mage::helper('cms')->__('Small Image'),
            'disabled'  => false,
            'value'     => $model->getSmallImage(),
            'note'      => 'Use as content heading background for mobile mobile devices.'
        ));
    }

4. Upload images

Add observer to adminhtml section in config.xml

    
    <adminhtml>
        <events>
            <cms_page_prepare_save>
                <observers>
                    <{VENDOR_MODULE}_cms_page_prepare_save>
                        <type>singleton</type>
                        <class>{MODEL ALIAS}/observer</class>
                        <method>beforeSave</method>
                    </{VENDOR_MODULE}_cms_page_prepare_save>
                </observers>
            </cms_page_prepare_save>
        </events>
    </adminhtml>

Add method to Observer.php

    
   /**
     * Upload images
     * 
     * @event cms_page_prepare_save 
     * @param Varien_Event_Observer $observer
     */
    public function beforeSave(Varien_Event_Observer $observer) 
    {
        try {
            /* @var $model Mage_Cms_Model_Page */
            $model = $observer->getEvent()->getPage();
            
            $request = $observer->getEvent()->getRequest();
            $data    = $request->getPost();
            
            $path = Mage::getBaseDir('media') . DS . self::MEDIA_DIR;
            if ( ! file_exists($path)) {
                mkdir($path, 0777, true);
            }
            
            $imagesAttributesNames = array('image', 'small_image');
            foreach($imagesAttributesNames as $imageAttributeName) {
                
                $uploadedImage = $_FILES[$imageAttributeName];
                if (isset($uploadedImage['name']) && $uploadedImage['name'] != '') {
                    
                    $uploader = new Varien_File_Uploader($imageAttributeName);
                    
                    $uploader->setAllowedExtensions(array('jpg', 'jpeg', 'gif', 'png', 'bmp'));
                    $uploader->setAllowRenameFiles(true);
                    $uploader->setFilesDispersion(false);
                    $uploader->save($path, $uploadedImage['name']);
                    
                    $model->setData($imageAttributeName, self::MEDIA_DIR . DS . $uploader->getUploadedFileName());
                } else {
                    if(isset($data[$imageAttributeName]['delete']) && $data[$imageAttributeName]['delete'] == 1) {
                        
                        $data[$imageAttributeName] = '';
                        $model->setData($imageAttributeName, $data[$imageAttributeName]);
                    } else {
                        
                        unset($data[$imageAttributeName]);
                        $model->setData($imageAttributeName, implode($request->getPost($imageAttributeName)));
                    }
                }
            }
            
        } catch(Exception $e) {
            Mage::logException($e);
        }
    }