Question

I’m using Magento 1.11.2.0 version and I want to add the option for the customers to upload their image on My account page.

I’ve added a new customer attribute of image file type in admin, and this works pretty fine. But it has only Maximum Image Width, Maximum Image Height options for the image. I would like to add two other inputs so I can specify the width and height for resizing the image when they upload their avatar.

Is there a way to do that? I’m also curios what module/class is used for the upload image attribute on customers.

Answer 1

There’s a few steps to the process. Firstly you need to create an attribute and add it to the default groups and attribute set. Here’s some code which can be added to a setup script to do so:

$installer = new Mage_Customer_Model_Entity_Setup('core_setup');

$installer->startSetup();

$vCustomerEntityType = $installer->getEntityTypeId('customer');
$vCustAttributeSetId = $installer->getDefaultAttributeSetId($vCustomerEntityType);
$vCustAttributeGroupId = $installer->getDefaultAttributeGroupId($vCustomerEntityType, $vCustAttributeSetId);

$installer->addAttribute('customer', 'avatar', array(
        'label' => 'Avatar Image',
        'input' => 'file',
        'type'  => 'varchar',
        'forms' => array('customer_account_edit','customer_account_create','adminhtml_customer','checkout_register'),
        'required' => 0,
        'user_defined' => 1,
));

$installer->addAttributeToGroup($vCustomerEntityType, $vCustAttributeSetId, $vCustAttributeGroupId, 'avatar', 0);

$oAttribute = Mage::getSingleton('eav/config')->getAttribute('customer', 'avatar');
$oAttribute->setData('used_in_forms', array('customer_account_edit','customer_account_create','adminhtml_customer','checkout_register'));
$oAttribute->save();

$installer->endSetup();

The key thing there is to set the input to file. This causes the system to display a file uploader on the back end, and look for an uploaded file when processing the form. The type is varchar, because a varchar attribute is used to store the file name.

Once the attribute has been created you’ll need to add an input element to the persistent/customer/form/register.phtml template. Some sample code to do this is as follows:

<label for="avatar"><?php echo $this->__('Avatar') ?></label>
<div class="input-box">
    <input type="file" name="avatar" title="<?php echo $this->__('Avatar') ?>" id="avatar" class="input-text" />
</div>

The main thing to note here also is that the id and name of the field should be the same as your attribute’s code. Also, don’t forget to add enctype="multipart/form-data" to the <form> tag.

This will allow the user to upload an Avatar image when they register. Subsequently when the image is displayed you’ll want to resize it to suitable dimensions for your site. The code Magento image helpers are designed to work with Product images, but this blog post will show you how to create helper functions which can resize an image, and cache the resized file. I’ve used these instructions before to resize a category image and they work well.