├── README.md
├── app
    ├── code
    │   └── community
    │   │   └── JR
    │   │       └── AttributeOptionImage
    │   │           ├── Block
    │   │               └── Catalog
    │   │               │   └── Product
    │   │               │       └── Attribute
    │   │               │           └── Edit
    │   │               │               └── Tab
    │   │               │                   └── Options.php
    │   │           ├── Helper
    │   │               ├── Cms
    │   │               │   └── Wysiwyg
    │   │               │   │   └── Images.php
    │   │               └── Data.php
    │   │           ├── Model
    │   │               ├── Catalog
    │   │               │   └── Resource
    │   │               │   │   └── Eav
    │   │               │   │       └── Mysql4
    │   │               │   │           └── Attribute.php
    │   │               ├── Eav
    │   │               │   ├── Entity
    │   │               │   │   └── Attribute
    │   │               │   │   │   └── Source
    │   │               │   │   │       └── Table.php
    │   │               │   └── Mysql4
    │   │               │   │   └── Entity
    │   │               │   │       └── Attribute
    │   │               │   │           └── Option.php
    │   │               └── Observer.php
    │   │           ├── controllers
    │   │               └── Cms
    │   │               │   └── Wysiwyg
    │   │               │       └── ImagesController.php
    │   │           ├── etc
    │   │               └── config.xml
    │   │           └── sql
    │   │               └── jr_attributeoptionimage_setup
    │   │                   ├── mysql4-install-1.0.0.php
    │   │                   └── mysql4-upgrade-1.0.0-1.0.1.php
    ├── design
    │   └── adminhtml
    │   │   └── default
    │   │       └── default
    │   │           └── template
    │   │               └── jr
    │   │                   └── catalog
    │   │                       └── product
    │   │                           └── attribute
    │   │                               └── options.phtml
    └── etc
    │   └── modules
    │       └── JR_AttributeOptionImage.xml
├── composer.json
└── modman


/README.md:
--------------------------------------------------------------------------------
 1 | # Add images/icons to attribute options of your Magento products
 2 | 
 3 | ![Attribute Option Image](http://i.imgur.com/VB2W5.jpg)
 4 | 
 5 | ## Features
 6 | 
 7 | * Associate image/icon to attribute options
 8 | * Specify relative/external url or pick an image from Magento Media Gallery
 9 | 
10 | ## Installation
11 | 
12 | ### Magento CE 1.5.x, 1.6.x
13 | 
14 | Install with [modgit](https://github.com/jreinke/modgit):
15 | 
16 |     $ cd /path/to/magento
17 |     $ modgit init
18 |     $ modgit clone attr-opt-img https://github.com/jreinke/magento-attribute-option-image.git
19 | 
20 | or download package manually:
21 | 
22 | * Download latest version [here](https://github.com/jreinke/magento-attribute-option-image/downloads)
23 | * Unzip in Magento root folder
24 | * Clean cache
25 | 
26 | ## Usage
27 | 
28 | 1. Go to *Catalog > Attributes > Manage Attributes*, choose an attribute with options and associate an image/icon to each option
29 | 2. In frontend templates, retrieve image src like this `Mage::helper('attributeoptionimage')->getAttributeOptionImage($optionId);` where `$optionId` could be something like `$product->getColor()`
30 | 
31 | ## Full overview
32 | 
33 | I wrote an article on my blog for full extension overview, [click here](http://www.johannreinke.com/en/2012/02/05/magento-add-images-to-product-attribute-options/).
34 | 


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/Block/Catalog/Product/Attribute/Edit/Tab/Options.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class JR_AttributeOptionImage_Block_Catalog_Product_Attribute_Edit_Tab_Options extends Mage_Adminhtml_Block_Catalog_Product_Attribute_Edit_Tab_Options
 4 | {
 5 |     public function __construct()
 6 |     {
 7 |         parent::__construct();
 8 |         $this->setTemplate('jr/catalog/product/attribute/options.phtml');
 9 |     }
10 | 
11 |     public function getOptionValues()
12 |     {
13 |         $attributeType = $this->getAttributeObject()->getFrontendInput();
14 |         $defaultValues = $this->getAttributeObject()->getDefaultValue();
15 |         if ($attributeType == 'select' || $attributeType == 'multiselect') {
16 |             $defaultValues = explode(',', $defaultValues);
17 |         } else {
18 |             $defaultValues = array();
19 |         }
20 | 
21 |         switch ($attributeType) {
22 |             case 'select':
23 |                 $inputType = 'radio';
24 |                 break;
25 |             case 'multiselect':
26 |                 $inputType = 'checkbox';
27 |                 break;
28 |             default:
29 |                 $inputType = '';
30 |                 break;
31 |         }
32 | 
33 |         $values = $this->getData('option_values');
34 |         if (is_null($values)) {
35 |             $values = array();
36 |             $optionCollection = Mage::getResourceModel('eav/entity_attribute_option_collection')
37 |                 ->setAttributeFilter($this->getAttributeObject()->getId())
38 |                 ->setPositionOrder('desc', true)
39 |                 ->load();
40 | 
41 |             foreach ($optionCollection as $option) {
42 |                 $value = array();
43 |                 if (in_array($option->getId(), $defaultValues)) {
44 |                     $value['checked'] = 'checked="checked"';
45 |                 } else {
46 |                     $value['checked'] = '';
47 |                 }
48 | 
49 |                 $value['intype'] = $inputType;
50 |                 $value['id'] = $option->getId();
51 |                 $value['sort_order'] = $option->getSortOrder();
52 |                 $value['image'] = $option->getImage();
53 |                 $value['thumb'] = $option->getThumb();
54 |                 foreach ($this->getStores() as $store) {
55 |                     $storeValues = $this->getStoreOptionValues($store->getId());
56 |                     if (isset($storeValues[$option->getId()])) {
57 |                         $value['store'.$store->getId()] = htmlspecialchars($storeValues[$option->getId()]);
58 |                     }
59 |                     else {
60 |                         $value['store'.$store->getId()] = '';
61 |                     }
62 |                 }
63 |                 $values[] = new Varien_Object($value);
64 |             }
65 |             $this->setData('option_values', $values);
66 |         }
67 | 
68 |         return $values;
69 |     }
70 | }


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/Helper/Cms/Wysiwyg/Images.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class JR_AttributeOptionImage_Helper_Cms_Wysiwyg_Images extends Mage_Cms_Helper_Wysiwyg_Images
 4 | {
 5 |     public function isUsingStaticUrlsAllowed()
 6 |     {
 7 |         if (Mage::getSingleton('adminhtml/session')->getStaticUrlsAllowed()) {
 8 |             return true;
 9 |         }
10 | 
11 |         return parent::isUsingStaticUrlsAllowed();
12 |     }
13 | }


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/Helper/Data.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class JR_AttributeOptionImage_Helper_Data extends Mage_Core_Helper_Abstract
 4 | {
 5 |     public function getAttributeOptionImage($optionId)
 6 |     {
 7 |         $images = $this->getAttributeOptionImages();
 8 |         $image = array_key_exists($optionId, $images) ? $images[$optionId] : '';
 9 |         if ($image && (strpos($image, 'http') !== 0)) {
10 |             $image = Mage::getDesign()->getSkinUrl($image);
11 |         }
12 | 
13 |         return $image;
14 |     }
15 | 
16 |     public function getAttributeOptionImages()
17 |     {
18 |         $images = Mage::getResourceModel('eav/entity_attribute_option')->getAttributeOptionImages();
19 | 
20 |         return $images;
21 |     }
22 |     
23 |     public function getAttributeOptionThumb($optionId)
24 |     {
25 |         $images = $this->getAttributeOptionThumbs();
26 |         $image = array_key_exists($optionId, $images) ? $images[$optionId] : '';
27 |         if ($image && (strpos($image, 'http') !== 0)) {
28 |             $image = Mage::getDesign()->getSkinUrl($image);
29 |         }
30 | 
31 |         return $image;
32 |     }
33 |     
34 |     public function getAttributeOptionThumbs()
35 |     {
36 |         $images = Mage::getResourceModel('eav/entity_attribute_option')->getAttributeOptionThumbs();
37 | 
38 |         return $images;
39 |     }
40 | }


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/Model/Catalog/Resource/Eav/Mysql4/Attribute.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class JR_AttributeOptionImage_Model_Catalog_Resource_Eav_Mysql4_Attribute extends Mage_Catalog_Model_Resource_Eav_Mysql4_Attribute
 4 | {
 5 |     protected function _saveOption(Mage_Core_Model_Abstract $object)
 6 |     {
 7 |         $option = $object->getOption();
 8 |         if (is_array($option)) {
 9 |             $write = $this->_getWriteAdapter();
10 |             $optionTable        = $this->getTable('attribute_option');
11 |             $optionValueTable   = $this->getTable('attribute_option_value');
12 |             $stores = Mage::getModel('core/store')
13 |                 ->getResourceCollection()
14 |                 ->setLoadDefault(true)
15 |                 ->load();
16 | 
17 |             if (isset($option['value'])) {
18 |                 $attributeDefaultValue = array();
19 |                 if (!is_array($object->getDefault())) {
20 |                     $object->setDefault(array());
21 |                 }
22 | 
23 |                 foreach ($option['value'] as $optionId => $values) {
24 |                     $intOptionId = (int) $optionId;
25 |                     if (!empty($option['delete'][$optionId])) {
26 |                         if ($intOptionId) {
27 |                             $condition = $write->quoteInto('option_id=?', $intOptionId);
28 |                             $write->delete($optionTable, $condition);
29 |                         }
30 | 
31 |                         continue;
32 |                     }
33 | 
34 |                     if (!$intOptionId) {
35 |                         $data = array(
36 |                            'attribute_id'  => $object->getId(),
37 |                            'sort_order'    => isset($option['order'][$optionId]) ? $option['order'][$optionId] : 0,
38 |                            'image'         => isset($option['image'][$optionId]) ? $option['image'][$optionId] : '',
39 |                            'thumb'         => isset($option['thumb'][$optionId]) ? $option['thumb'][$optionId] : '',
40 |                         );
41 |                         $write->insert($optionTable, $data);
42 |                         $intOptionId = $write->lastInsertId();
43 |                     }
44 |                     else {
45 |                         $data = array(
46 |                            'sort_order'    => isset($option['order'][$optionId]) ? $option['order'][$optionId] : 0,
47 |                            'image'         => isset($option['image'][$optionId]) ? $option['image'][$optionId] : '',
48 |                            'thumb'         => isset($option['thumb'][$optionId]) ? $option['thumb'][$optionId] : '',
49 |                         );
50 |                         $write->update($optionTable, $data, $write->quoteInto('option_id=?', $intOptionId));
51 |                     }
52 | 
53 |                     if (in_array($optionId, $object->getDefault())) {
54 |                         if ($object->getFrontendInput() == 'multiselect') {
55 |                             $attributeDefaultValue[] = $intOptionId;
56 |                         } else if ($object->getFrontendInput() == 'select') {
57 |                             $attributeDefaultValue = array($intOptionId);
58 |                         }
59 |                     }
60 | 
61 | 
62 |                     // Default value
63 |                     if (!isset($values[0])) {
64 |                         Mage::throwException(Mage::helper('eav')->__('Default option value is not defined.'));
65 |                     }
66 | 
67 |                     $write->delete($optionValueTable, $write->quoteInto('option_id=?', $intOptionId));
68 |                     foreach ($stores as $store) {
69 |                         if (isset($values[$store->getId()]) && (!empty($values[$store->getId()]) || $values[$store->getId()] == "0")) {
70 |                             $data = array(
71 |                                 'option_id' => $intOptionId,
72 |                                 'store_id'  => $store->getId(),
73 |                                 'value'     => $values[$store->getId()],
74 |                             );
75 |                             $write->insert($optionValueTable, $data);
76 |                         }
77 |                     }
78 |                 }
79 | 
80 |                 $write->update($this->getMainTable(), array(
81 |                     'default_value' => implode(',', $attributeDefaultValue)
82 |                 ), $write->quoteInto($this->getIdFieldName() . '=?', $object->getId()));
83 |             }
84 |         }
85 |         return $this;
86 |     }
87 | }


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/Model/Eav/Entity/Attribute/Source/Table.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class JR_AttributeOptionImage_Model_Eav_Entity_Attribute_Source_Table extends Mage_Eav_Model_Entity_Attribute_Source_Table
 4 | {
 5 |     public function getOptionImage($value)
 6 |     {
 7 |         $options = Mage::getResourceModel('eav/entity_attribute_option_collection')
 8 |             ->setPositionOrder('asc')
 9 |             ->setAttributeFilter($this->getAttribute()->getId())
10 |             ->setStoreFilter($this->getAttribute()->getStoreId())
11 |             ->load()
12 |             ->toArray();
13 |         foreach ($options['items'] as $item) {
14 |             if ($item['option_id'] == $value) {
15 |                 return $item['image'];
16 |             }
17 |         }
18 |         return false;
19 |     }
20 |     
21 |     public function getOptionThumb($value)
22 |     {
23 |         $options = Mage::getResourceModel('eav/entity_attribute_option_collection')
24 |             ->setPositionOrder('asc')
25 |             ->setAttributeFilter($this->getAttribute()->getId())
26 |             ->setStoreFilter($this->getAttribute()->getStoreId())
27 |             ->load()
28 |             ->toArray();
29 |         foreach ($options['items'] as $item) {
30 |             if ($item['option_id'] == $value) {
31 |                 return $item['thumb'];
32 |             }
33 |         }
34 |         return false;
35 |     }
36 | }


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/Model/Eav/Mysql4/Entity/Attribute/Option.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class JR_AttributeOptionImage_Model_Eav_Mysql4_Entity_Attribute_Option extends Mage_Eav_Model_Mysql4_Entity_Attribute_Option
 4 | {
 5 |     public function getAttributeOptionImages()
 6 |     {
 7 |         $select = $this->getReadConnection()
 8 |             ->select()
 9 |             ->from($this->getTable('eav/attribute_option'), array('option_id', 'image'));
10 | 
11 |         return $this->getReadConnection()->fetchPairs($select);
12 |     }
13 |     
14 |     public function getAttributeOptionThumbs()
15 |     {
16 |         $select = $this->getReadConnection()
17 |             ->select()
18 |             ->from($this->getTable('eav/attribute_option'), array('option_id', 'thumb'));
19 | 
20 |         return $this->getReadConnection()->fetchPairs($select);
21 |     }
22 | }


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/Model/Observer.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class JR_AttributeOptionImage_Model_Observer
 4 | {
 5 |     public function updateLayout()
 6 |     {
 7 |         $layout = Mage::getSingleton('core/layout');
 8 |         $layout->getBlock('head')
 9 |             ->setCanLoadExtJs(true)
10 |             ->addJs('mage/adminhtml/variables.js')
11 |             ->addJs('mage/adminhtml/wysiwyg/widget.js')
12 |             ->addJs('lib/flex.js')
13 |             ->addJs('lib/FABridge.js')
14 |             ->addJs('mage/adminhtml/flexuploader.js')
15 |             ->addJs('mage/adminhtml/browser.js')
16 |             ->addJs('prototype/window.js')
17 |             ->addItem('js_css', 'prototype/windows/themes/default.css')
18 |             ->addItem('js_css', 'prototype/windows/themes/magento.css');
19 |     }
20 | }


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/controllers/Cms/Wysiwyg/ImagesController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require_once 'Mage/Adminhtml/controllers/Cms/Wysiwyg/ImagesController.php';
 4 | 
 5 | class JR_AttributeOptionImage_Cms_Wysiwyg_ImagesController extends Mage_Adminhtml_Cms_Wysiwyg_ImagesController
 6 | {
 7 |     public function indexAction()
 8 |     {
 9 |         if ($this->getRequest()->getParam('static_urls_allowed')) {
10 |             $this->_getSession()->setStaticUrlsAllowed(true);
11 |         }
12 |         parent::indexAction();
13 |     }
14 | 
15 |     public function onInsertAction()
16 |     {
17 |         parent::onInsertAction();
18 |         $this->_getSession()->setStaticUrlsAllowed();
19 |     }
20 | }


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/etc/config.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <config>
 3 |     <modules>
 4 |         <JR_AttributeOptionImage>
 5 |             <version>1.0.1</version>
 6 |         </JR_AttributeOptionImage>
 7 |     </modules>
 8 |     <global>
 9 |         <resources>
10 |             <jr_attributeoptionimage_setup>
11 |                 <setup>
12 |                     <module>JR_AttributeOptionImage</module>
13 |                 </setup>
14 |             </jr_attributeoptionimage_setup>
15 |         </resources>
16 |         <models>
17 |              <jr_attributeoptionimage>
18 |                 <class>JR_AttributeOptionImage_Model</class>
19 |              </jr_attributeoptionimage>
20 |             <catalog_resource_eav_mysql4>
21 |                 <rewrite>
22 |                     <attribute>JR_AttributeOptionImage_Model_Catalog_Resource_Eav_Mysql4_Attribute</attribute>
23 |                 </rewrite>
24 |             </catalog_resource_eav_mysql4>
25 |             <eav>
26 |                 <rewrite>
27 |                     <entity_attribute_source_table>JR_AttributeOptionImage_Model_Eav_Entity_Attribute_Source_Table</entity_attribute_source_table>
28 |                 </rewrite>
29 |             </eav>
30 |             <eav_mysql4>
31 |                 <rewrite>
32 |                     <entity_attribute_option>JR_AttributeOptionImage_Model_Eav_Mysql4_Entity_Attribute_Option</entity_attribute_option>
33 |                 </rewrite>
34 |             </eav_mysql4>
35 |         </models>
36 |         <blocks>
37 |             <adminhtml>
38 |                 <rewrite>
39 |                     <catalog_product_attribute_edit_tab_options>JR_AttributeOptionImage_Block_Catalog_Product_Attribute_Edit_Tab_Options</catalog_product_attribute_edit_tab_options>
40 |                 </rewrite>
41 |             </adminhtml>
42 |         </blocks>
43 |         <helpers>
44 |             <attributeoptionimage>
45 |                 <class>JR_AttributeOptionImage_Helper</class>
46 |             </attributeoptionimage>
47 |             <cms>
48 |                 <rewrite>
49 |                     <wysiwyg_images>JR_AttributeOptionImage_Helper_Cms_Wysiwyg_Images</wysiwyg_images>
50 |                 </rewrite>
51 |             </cms>
52 |         </helpers>
53 |     </global>
54 |     <admin>
55 |         <routers>
56 |             <adminhtml>
57 |                 <args>
58 |                     <modules>
59 |                         <JR_AttributeOptionImage before="Mage_Adminhtml">JR_AttributeOptionImage</JR_AttributeOptionImage>
60 |                     </modules>
61 |                 </args>
62 |             </adminhtml>
63 |         </routers>
64 |     </admin>
65 |     <adminhtml>
66 |         <events>
67 |             <controller_action_layout_render_before_adminhtml_catalog_product_attribute_edit>
68 |                 <observers>
69 |                     <update_layout>
70 |                         <class>jr_attributeoptionimage/observer</class>
71 |                         <method>updateLayout</method>
72 |                     </update_layout>
73 |                 </observers>
74 |             </controller_action_layout_render_before_adminhtml_catalog_product_attribute_edit>
75 |         </events>
76 |     </adminhtml>
77 | </config>


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/sql/jr_attributeoptionimage_setup/mysql4-install-1.0.0.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $installer = $this;
 4 | /* @var $installer Mage_Core_Model_Resource_Setup */
 5 | 
 6 | $tableOption = $this->getTable('eav_attribute_option');
 7 | $installer->startSetup();
 8 | 
 9 | $installer->run("
10 | ALTER TABLE `{$tableOption}`
11 |     ADD `image` TEXT CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL;
12 | ");
13 | 
14 | $installer->endSetup();
15 | 


--------------------------------------------------------------------------------
/app/code/community/JR/AttributeOptionImage/sql/jr_attributeoptionimage_setup/mysql4-upgrade-1.0.0-1.0.1.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $installer = $this;
 4 | /* @var $installer Mage_Core_Model_Resource_Setup */
 5 | 
 6 | $tableOption = $this->getTable('eav_attribute_option');
 7 | $installer->startSetup();
 8 | 
 9 | $installer->run("
10 | ALTER TABLE `{$tableOption}`
11 |     ADD `thumb` TEXT CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL;
12 | ");
13 | 
14 | $installer->endSetup();
15 | 


--------------------------------------------------------------------------------
/app/design/adminhtml/default/default/template/jr/catalog/product/attribute/options.phtml:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * Magento Enterprise Edition
  4 |  *
  5 |  * NOTICE OF LICENSE
  6 |  *
  7 |  * This source file is subject to the Magento Enterprise Edition License
  8 |  * that is bundled with this package in the file LICENSE_EE.txt.
  9 |  * It is also available through the world-wide-web at this URL:
 10 |  * http://www.magentocommerce.com/license/enterprise-edition
 11 |  * If you did not receive a copy of the license and are unable to
 12 |  * obtain it through the world-wide-web, please send an email
 13 |  * to license@magentocommerce.com so we can send you a copy immediately.
 14 |  *
 15 |  * DISCLAIMER
 16 |  *
 17 |  * Do not edit or add to this file if you wish to upgrade Magento to newer
 18 |  * versions in the future. If you wish to customize Magento for your
 19 |  * needs please refer to http://www.magentocommerce.com for more information.
 20 |  *
 21 |  * @category    design
 22 |  * @package     default_default
 23 |  * @copyright   Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
 24 |  * @license     http://www.magentocommerce.com/license/enterprise-edition
 25 |  */
 26 | ?>
 27 | <?php
 28 | /**
 29 |  * Attribute otions control
 30 |  *
 31 |  * @see Mage_Adminhtml_Block_Catalog_Product_Attribute_Edit_Tab_Options
 32 |  */
 33 | ?>
 34 | <div>
 35 | <ul class="messages">
 36 |     <li class="notice-msg">
 37 |         <ul>
 38 |             <li><?php echo Mage::helper('catalog')->__('If you do not specify an option value for a specific store view then the default (Admin) value will be used.') ?></li>
 39 |         </ul>
 40 |     </li>
 41 | </ul>
 42 | </div>
 43 | 
 44 | <div class="entity-edit">
 45 |     <div class="entry-edit-head">
 46 |         <h4 class="icon-head head-edit-form fieldset-legend"><?php echo Mage::helper('catalog')->__('Manage Titles (Size, Color, etc.)') ?></h4>
 47 |     </div>
 48 |     <div class="box">
 49 |             <div class="hor-scroll">
 50 |             <table class="dynamic-grid" cellspacing="0" id="attribute-labels-table">
 51 |                 <tr>
 52 |                 <?php foreach ($this->getStores() as $_store): ?>
 53 |                     <th><?php echo $_store->getName() ?></th>
 54 |                 <?php endforeach; ?>
 55 |                 </tr>
 56 |                 <tr>
 57 |                     <?php $_labels = $this->getLabelValues() ?>
 58 |                     <?php foreach ($this->getStores() as $_store): ?>
 59 |                     <td>
 60 |                         <input class="input-text<?php if($_store->getId()==0): ?> required-option<?php endif; ?>" type="text" name="frontend_label[<?php echo $_store->getId() ?>]" value="<?php echo $this->htmlEscape($_labels[$_store->getId()]) ?>"<?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif;?>/>
 61 |                     </td>
 62 |                     <?php endforeach; ?>
 63 |                 </tr>
 64 |             </table>
 65 |             </div>
 66 |     </div>
 67 | </div>
 68 | <br/>
 69 | <div class="entity-edit" id="matage-options-panel">
 70 |     <div class="entry-edit-head">
 71 |     <h4 class="icon-head head-edit-form fieldset-legend"><?php echo Mage::helper('catalog')->__('Manage Options (values of your attribute)') ?></h4>
 72 |     </div>
 73 |     <div class="box">
 74 |         <div class="hor-scroll">
 75 |             <table class="dynamic-grid" cellspacing="0"  cellpadding="0">
 76 |                 <tr id="attribute-options-table">
 77 |                     <?php foreach ($this->getStores() as $_store): ?>
 78 |                         <th><?php echo $_store->getName() ?></th>
 79 |                     <?php endforeach; ?>
 80 |                         <th><?php echo Mage::helper('catalog')->__('Position') ?></th>
 81 |                         <th class="nobr a-center"><?php echo Mage::helper('catalog')->__('Is Default') ?></th>
 82 |                         <th class="nobr"><?php echo Mage::helper('catalog')->__('Image') ?></th>
 83 |                         <th class="nobr"><?php echo Mage::helper('catalog')->__('Thumbnail') ?></th>
 84 |                         <th>
 85 |                             <?php if (!$this->getReadOnly()):?>
 86 |                                 <?php echo $this->getAddNewButtonHtml() ?>
 87 |                             <?php endif;?>
 88 |                         </th>
 89 |                     </tr>
 90 |                     <tr class="no-display template" id="row-template">
 91 |                         <?php foreach ($this->getStores() as $_store): ?>
 92 |                         <td><input name="option[value][{{id}}][<?php echo $_store->getId() ?>]" value="{{store<?php echo $_store->getId() ?>}}" class="input-text<?php if($_store->getId()==0): ?> required-option<?php endif; ?>" type="text" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif;?>/></td>
 93 |                         <?php endforeach; ?>
 94 |                         <td class="a-center"><input class="input-text" type="text" name="option[order][{{id}}]" value="{{sort_order}}" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif;?>/></td>
 95 |                         <td><input class="input-radio" type="radio" name="default[]" value="{{id}}" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif;?>/></td>
 96 |                         <td class="a-left">
 97 |                             <input type="hidden" class="delete-flag" name="option[delete][{{id}}]" value="" />
 98 |                             <?php if (!$this->getReadOnly()):?>
 99 |                                 <?php echo $this->getDeleteButtonHtml() ?>
100 |                             <?php endif;?>
101 |                         </td>
102 |                     </tr>
103 |             </table>
104 |         </div>
105 |         <input type="hidden" id="option-count-check" value="" />
106 |     </div>
107 | </div>
108 | <script type="text/javascript">
109 | //<![CDATA[
110 | var optionDefaultInputType = 'radio';
111 | 
112 | // IE removes quotes from element.innerHTML whenever it thinks they're not needed, which breaks html.
113 | var templateText =
114 |         '<tr class="option-row">'+
115 | <?php foreach ($this->getStores() as $_store): ?>
116 |             '<td><input name="option[value][{{id}}][<?php echo $_store->getId() ?>]" value="{{store<?php echo $_store->getId() ?>}}" class="input-text<?php if($_store->getId()==0): ?> required-option<?php endif; ?>" type="text" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif;?>/><\/td>'+
117 | <?php endforeach; ?>
118 |             '<td><input class="input-text" type="text" name="option[order][{{id}}]" value="{{sort_order}}" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif;?>/><\/td>'+
119 |             '<td class="a-center"><input class="input-radio" type="{{intype}}" name="default[]" value="{{id}}" {{checked}} <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif;?>/><\/td>'+
120 |             '<td class="nobr"><input id="option_image_{{id}}" type="text" name="option[image][{{id}}]" value="{{image}}" class="attribute_option_image" style="width:300px;" /><button id="add_image_{{id}}" class="scalable" type="button" onclick="MediabrowserUtility.openDialog(\'<?php echo Mage::getSingleton('adminhtml/url')->getUrl('*/cms_wysiwyg_images/index', array('static_urls_allowed' => 1)) ?>target_element_id/option_image_{{id}}/\');"><span>...</span></button></td>'+
121 |             '<td class="nobr"><input id="option_thumb_{{id}}" type="text" name="option[thumb][{{id}}]" value="{{thumb}}" class="attribute_option_image" style="width:200px;" /><button id="add_thumb_{{id}}" class="scalable" type="button" onclick="MediabrowserUtility.openDialog(\'<?php echo Mage::getSingleton('adminhtml/url')->getUrl('*/cms_wysiwyg_images/index', array('static_urls_allowed' => 1)) ?>target_element_id/option_thumb_{{id}}/\');"><span>...</span></button></td>'+
122 |             '<td class="a-left">'+
123 |                 '<input type="hidden" class="delete-flag" name="option[delete][{{id}}]" value="" />'+
124 |                 <?php if (!$this->getReadOnly()):?>
125 |                     '<?php echo $this->getDeleteButtonHtml() ?>'+
126 |                 <?php endif;?>
127 |             '<\/td>'+
128 |         '<\/tr>';
129 | 
130 | var attributeOption = {
131 |     table : $('attribute-options-table'),
132 |     templateSyntax : /(^|.|\r|\n)({{(\w+)}})/,
133 |     templateText : templateText,
134 |     itemCount : 0,
135 |     totalItems : 0,
136 |     add : function(data) {
137 |         this.template = new Template(this.templateText, this.templateSyntax);
138 |         if(!data.id){
139 |             data = {};
140 |             data.id  = 'option_'+this.itemCount;
141 |         }
142 |         if (!data.intype)
143 |             data.intype = optionDefaultInputType;
144 | 
145 |         Element.insert(this.table, {after: this.template.evaluate(data)});
146 |         this.bindRemoveButtons();
147 |         this.itemCount++;
148 |         this.totalItems++;
149 |         this.updateItemsCountField();
150 |     },
151 |     remove : function(event){
152 |         var element = $(Event.findElement(event, 'tr')); // !!! Button already
153 |                                                                // have table parent in safari
154 |         // Safari workaround
155 |         element.ancestors().each(function(parentItem){
156 |            if (parentItem.hasClassName('option-row')) {
157 |                element = parentItem;
158 |                throw $break;
159 |            } else if (parentItem.hasClassName('box')) {
160 |                throw $break;
161 |            }
162 |         });
163 | 
164 | 
165 |         if(element){
166 |             var elementFlags = element.getElementsByClassName('delete-flag');
167 |             if(elementFlags[0]){
168 |                 elementFlags[0].value=1;
169 |             }
170 | 
171 |             element.addClassName('no-display');
172 |             element.addClassName('template');
173 |             element.hide();
174 |             this.totalItems--;
175 |             this.updateItemsCountField();
176 |         }
177 |     },
178 |     updateItemsCountField: function() {
179 |         if (this.totalItems > 0) {
180 |             $('option-count-check').value = '1';
181 |         } else {
182 |             $('option-count-check').value = '';
183 |         }
184 |     },
185 |     bindRemoveButtons : function(){
186 |         var buttons = $$('.delete-option');
187 |         for(var i=0;i<buttons.length;i++){
188 |             if(!$(buttons[i]).binded){
189 |                 $(buttons[i]).binded = true;
190 |                 Event.observe(buttons[i], 'click', this.remove.bind(this));
191 |             }
192 |         }
193 |     }
194 | 
195 | }
196 | if($('row-template')){
197 |     $('row-template').remove();
198 | }
199 | attributeOption.bindRemoveButtons();
200 | 
201 | if($('add_new_option_button')){
202 |     Event.observe('add_new_option_button', 'click', attributeOption.add.bind(attributeOption));
203 | }
204 | Validation.addAllThese([
205 |     ['required-option', '<?php echo Mage::helper('catalog')->__('Failed') ?>', function(v) {
206 |         return !Validation.get('IsEmpty').test(v);
207 | }]]);
208 | Validation.addAllThese([
209 |     ['required-options-count', '<?php echo Mage::helper('catalog')->__('Options is required') ?>', function(v) {
210 |         return !Validation.get('IsEmpty').test(v);
211 | }]]);
212 | <?php foreach ($this->getOptionValues() as $_value): ?>
213 |     attributeOption.add(<?php echo $_value->toJson() ?>);
214 | <?php endforeach; ?>
215 | //]]>
216 | </script>
217 | 


--------------------------------------------------------------------------------
/app/etc/modules/JR_AttributeOptionImage.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <config>
 3 |     <modules>
 4 |         <JR_AttributeOptionImage>
 5 |             <active>true</active>
 6 |             <codePool>community</codePool>
 7 |         </JR_AttributeOptionImage>
 8 |     </modules>
 9 | </config>
10 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name":"aligent/magento-attribute-option-image",
 3 |     "type":"magento-module",
 4 |     "license":"OSL-3.0",
 5 |     "homepage":"https://github.com/aligent/magento-attribute-option-image.git",
 6 |     "description":"Add images/icons to attribute options of your Magento products",
 7 |     "require":{
 8 |         "magento-hackathon/magento-composer-installer":"*"
 9 |     }
10 | }
11 | 


--------------------------------------------------------------------------------
/modman:
--------------------------------------------------------------------------------
1 | # JReinke Magento Attribute Option Image deploy instructions
2 | app/code/community/JR app/code/community/JR
3 | app/design/adminhtml/default/default/template/jr app/design/adminhtml/default/default/template/jr
4 | app/etc/modules/JR_AttributeOptionImage.xml app/etc/modules/JR_AttributeOptionImage.xml
5 | 


--------------------------------------------------------------------------------