Magento – Adding an extra text area in product images tab backend

1. Extend Table catalog_product_entity_media_gallery_value with a setup Script

$installer = Mage::getResourceModel('catalog/setup', 'catalog_setup');
$installer->startSetup();

$installer->getConnection()->addColumn(
    $installer->getTable('catalog_product_entity_media_gallery_value'),
    'YOURFIELD',
    array(
        'type'     => Varien_Db_Ddl_Table::TYPE_TEXT,
        'nullable' => true,
        'default'  => null,
        'comment'  => 'YOUR FIELD',
        'after'    => 'label'
    )
);

$installer->endSetup();

2. Rewrite Ressource Model

Rewrite Method _getLoadGallerySelect() in Class Mage_Catalog_Model_Resource_Product_Attribute_Backend_Media to add your new Field to both Joins

->joinLeft(
    array('value' => $this->getTable(self::GALLERY_VALUE_TABLE)),
    $adapter->quoteInto('main.value_id = value.value_id AND value.store_id = ?', (int)$storeId),
    array('label','position', 'YOURFIELD', 'disabled')
)
->joinLeft( // Joining default values
    array('default_value' => $this->getTable(self::GALLERY_VALUE_TABLE)),
    'main.value_id = default_value.value_id AND default_value.store_id = 0',
    array(
        'label_default' => 'label',
        'position_default' => 'position',
        'disabled_default' => 'disabled',
        'YOURFIELD_default' => 'YOURFIELD'
    )
)

3. Rewrite Model

Rewrite Method afterLoad() and updateImage() in Class Mage_Catalog_Model_Product_Attribute_Backend_Media to add your new Field to Arrays

$localAttributes = array('label', 'position', 'disabled', 'YOURFIELD');

and

$fieldsMap = array(
    'label'    => 'label',
    'YOURFIELD'=> 'YOURFIELD',
    'position' => 'position',
    'disabled' => 'disabled',
    'exclude'  => 'disabled'
);

4. Change Adminhtml Template

You habe to replace the Template with your version where you add your textarea app/design/adminhtml/default/default/template/catalog/product/helper/gallery.phtml

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2006-2016 X.commerce, Inc. and affiliates (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php
/**
 * Template for block Mage_Adminhtml_Block_Catalog_Product_Helper_Form_Gallery_Content
 */
?>
<?php
$_block = $this;
/* @var $_block Mage_Adminhtml_Block_Catalog_Product_Helper_Form_Gallery_Content */
?>
<div id="<?php echo $_block->getHtmlId() ?>" >
<ul class="messages">
    <li class="notice-msg">
        <ul>
            <li>
            <?php echo Mage::helper('catalog')->__('Image type and information need to be specified for each store view.'); ?>
            </li>
        </ul>
    </li>
</ul>
<div class="grid">
<table cellspacing="0" class="data border" id="<?php echo $_block->getHtmlId() ?>_grid" width="100%">
    <col width="25%" />
    <col width="25%"/>
    <col width="25%" />
    <col/>
    <?php foreach ($_block->getImageTypes() as $typeId=>$type): ?>
    <col />
    <?php endforeach; ?>
    <col width="70" />
    <col width="70" />
    <thead>
        <tr class="headings">
            <th><?php echo Mage::helper('catalog')->__('Image') ?></th>
            <th><?php echo Mage::helper('catalog')->__('Label') ?></th>
            <th><?php echo Mage::helper('catalog')->__('Alt text') ?></th>
            <th><?php echo Mage::helper('catalog')->__('Sort Order') ?></th>
            <?php foreach ($_block->getImageTypes() as $typeId=>$type): ?>
            <th><?php echo $type['label'] ?></th>
            <?php endforeach; ?>
            <th><?php echo Mage::helper('catalog')->__('Exclude') ?></th>
            <th class="last"><?php echo Mage::helper('catalog')->__('Remove') ?></th>
        </tr>
    </thead>
    <tbody id="<?php echo $_block->getHtmlId() ?>_list">
        <tr id="<?php echo $_block->getHtmlId() ?>_template" class="template no-display">
                <td class="cell-image"><div class="place-holder" onmouseover="<?php echo $_block->getJsObjectName(); ?>.loadImage('__file__')"><span><?php echo Mage::helper('catalog')->__('Roll Over for preview') ?></span></div><img src="<?php echo $this->getSkinUrl('images/spacer.gif')?>" width="100" style="display:none;" alt="" /></td>
                <td class="cell-label"><input type="text" <?php if($_block->getElement()->getReadonly()):?> disabled="disabled"<?php endif;?> class="input-text" onkeyup="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" onchange="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" /></td>
                <td class="cell-alttext"><input type="text" <?php if($_block->getElement()->getReadonly()):?> disabled="disabled"<?php endif;?> class="input-text" onkeyup="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" onchange="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" /></td>
                <td class="cell-position"><input type="text" <?php if($_block->getElement()->getReadonly()):?> disabled="disabled"<?php endif;?> class="input-text validate-number" onkeyup="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" onchange="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" /></td>
                <?php foreach ($_block->getImageTypes() as $typeId=>$type): ?>
                <td class="cell-<?php echo $typeId ?> a-center"><input <?php if($_block->getElement()->getAttributeReadonly($typeId)) :?> disabled="disabled" <?php endif;?> type="radio" name="<?php echo $type['field'] ?>" onclick="<?php echo $_block->getJsObjectName(); ?>.setProductImages('__file__')" value="__file__" /></td>
                <?php endforeach; ?>
                <td class="cell-disable a-center"><input type="checkbox" <?php if($_block->getElement()->getReadonly()):?> disabled="disabled"<?php endif;?> onclick="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" /></td>
                <td class="cell-remove a-center last"><input type="checkbox" <?php if($_block->getElement()->getReadonly()):?> disabled="disabled"<?php endif;?> onclick="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" /></td>
        </tr>
        <?php if($_block->hasUseDefault()): ?>
        <tr id="<?php echo $_block->getHtmlId() ?>_default">
                <td><?php echo Mage::helper('catalog')->__('Use Default Value') ?></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <?php foreach ($_block->getMediaAttributes() as $_attribute): ?>
                <td class="a-center">
                <?php if($_block->getElement()->canDisplayUseDefault($_attribute)): ?>
                <input class="default-checkbox" name="use_default[]" type="checkbox" <?php if($_block->getElement()->getAttributeReadonly($_attribute->getAttributeCode())):?> disabled="disabled" <?php endif;?>  onclick="<?php echo $_block->getJsObjectName(); ?>.updateUseDefault()"
<?php if($_block->getElement()->usedDefault($_attribute)): ?>checked<?php endif; ?> value="<?php echo $_attribute->getAttributeCode() ?>" />
                <?php endif ?>
                </td>
                <?php endforeach; ?>
                <td>&nbsp;</td>
                <td class="last">&nbsp;</td>
        </tr>
    <?php endif ?>
        <tr id="<?php echo $_block->getHtmlId() ?>-image-0">
                <td class="cell-image"><?php echo Mage::helper('catalog')->__('No image') ?></td>
                <td class="cell-label"><input type="hidden" />&nbsp;</td>
                <td class="cell-alttext"><input type="hidden" />&nbsp;</td>
                <td class="cell-position"><input type="hidden" />&nbsp;</td>
                <?php foreach ($_block->getImageTypes() as $typeId=>$type): ?>
                <td class="cell-<?php echo $typeId ?> a-center"><input type="radio" <?php if($_block->getElement()->getAttributeReadonly($typeId)) :?> disabled="disabled" <?php endif;?> name="<?php echo $type['field'] ?>" onclick="<?php echo $_block->getJsObjectName(); ?>.setProductImages('no_selection')" value="no_selection" /></td>
                <?php endforeach; ?>
                <td class="cell-disable"><input type="hidden" />&nbsp;</td>
                <td class="cell-remove last"><input type="hidden" />&nbsp;</td>
        </tr>
    </tbody>
<?php if (!$_block->getElement()->getReadonly()):?>
    <tfoot>
        <tr>
            <td colspan="100" class="last" style="padding:8px">
                <?php echo Mage::helper('catalog')->__('Maximum width and height dimension for upload image is %s.', Mage::getStoreConfig(Mage_Catalog_Helper_Image::XML_NODE_PRODUCT_MAX_DIMENSION)); ?>
                <?php echo $_block->getUploaderHtml() ?>
            </td>
        </tr>
    </tfoot>
<?php endif;?>
</table>
</div>
</div>
<input type="hidden" id="<?php echo $_block->getHtmlId() ?>_save" name="<?php echo $_block->getElement()->getName() ?>[images]" value="<?php echo $_block->escapeHtml($_block->getImagesJson()) ?>" />
<input type="hidden" id="<?php echo $_block->getHtmlId() ?>_save_image" name="<?php echo $_block->getElement()->getName() ?>[values]" value="<?php echo $_block->escapeHtml($_block->getImagesValuesJson()) ?>" />
<script type="text/javascript">
//<![CDATA[
var <?php echo $_block->getJsObjectName(); ?>;
(function(){
    jQuery(function(){
        // overwrite updateVisulatisation from product.js
        Product.Gallery.prototype.updateVisualisation = function (file) {
            var image = this.getImageByFile(file);
            this.getFileElement(file, 'cell-label input').value = image.label;
            this.getFileElement(file, 'cell-alttext input').value = (image.alttext ? image.alttext : '') ;
            this.getFileElement(file, 'cell-position input').value = image.position;
            this.getFileElement(file, 'cell-remove input').checked = (image.removed == 1);
            this.getFileElement(file, 'cell-disable input').checked = (image.disabled == 1);
            $H(this.imageTypes)
                .each(
                function (pair) {
                    if (this.imagesValues[pair.key] == file) {
                        this.getFileElement(file,
                            'cell-' + pair.key + ' input').checked = true;
                    }
                }.bind(this));
            this.updateState(file);
        };

        // overwrite updateImage from product.js
        Product.Gallery.prototype.updateImage = function (file) {
            var index = this.getIndexByFile(file);
            this.images[index].label = this.getFileElement(file, 'cell-label input').value;
            this.images[index].alttext = this.getFileElement(file, 'cell-alttext input').value;
            this.images[index].position = this.getFileElement(file, 'cell-position input').value;
            this.images[index].removed = (this.getFileElement(file, 'cell-remove input').checked ? 1 : 0);
            this.images[index].disabled = (this.getFileElement(file, 'cell-disable input').checked ? 1 : 0);
            this.getElement('save').value = Object.toJSON(this.images);
            this.updateState(file);
            this.container.setHasChanges();
        };

        <?php echo $_block->getJsObjectName(); ?> = new Product.Gallery('<?php echo $_block->getHtmlId() ?>', <?php echo $_block->getImageTypesJson() ?>);
    })
})();

//]]>
</script>

There is a lot of Javascript at the bottom the render the correct fields. In our project is jQuery included. If you don't have jQuery in your adminhtml you have to refactor the javascript part

5 Save Data

Now you can register an Observer an listen on the Event catalog_product_save_after. You get the Data via the Observer

$images = $observer->getEvent()->getProduct()->getData('media_gallery');

You have to foreach through every image and save the field in the Gallery