I am making a module that will pretty much do the same with the catalog->product manager do. In my module i need to upload an image.Everything is fine so far.The problem is that i can't find a way when i have upload an image and go to edit that product, the image is 22x22 px.

My field is in the form is like that:

$fieldset->addField('imagebook', 'image', array(
          'label'     => Mage::helper('books')->__('Image'),
          'required'  => false,
          'name'      => 'imagebook',


So my question is from the image below.How can i make that image bigger?When i edit the css that magento uses it change all the preview images for all the site.

Preview image

Thanks in advance for your time.

  • doesnt your body-element have a specific class regarding your module you can tie the changes to? Commented Jan 17, 2014 at 12:58

3 Answers 3


You can add html content after your element, use following:

$field = $fieldset->addField('imagebook', 'image', array(
    'label' => Mage::helper('books')->__('Image'),
    'required' => false,
    'name' => 'imagebook',

$imageUrl = Mage::registry('model')->getImageUrl();

    "<img src='$imageUrl' class='some_class'/> "

Here $imageUrl is link to uploaded image, I get it from my model, but yours may be differ, you can get it using own logic. And also add some css rules for some_class.


The image that you have stated is added via the Mage_Adminhtml_Block_Catalog_Product_Helper_Form_Image class which in turn uses the Varien_Data_Form_Element_Image

If you look into the function getElementHtml on Varien_Data_Form_Element_Image you will see the hard coded height and width.

 * Return element html code
 * @return string
public function getElementHtml()
    $html = '';

    if ((string)$this->getValue()) {
        $url = $this->_getUrl();

        if( !preg_match("/^http\:\/\/|https\:\/\//", $url) ) {
            $url = Mage::getBaseUrl('media') . $url;

        $html = '<a href="' . $url . '"'
            . ' onclick="imagePreview(\'' . $this->getHtmlId() . '_image\'); return false;">'
            . '<img src="' . $url . '" id="' . $this->getHtmlId() . '_image" title="' . $this->getValue() . '"'
            . ' alt="' . $this->getValue() . '" height="22" width="22" class="small-image-preview v-middle" />'
            . '</a> ';
    $html .= parent::getElementHtml();
    $html .= $this->_getDeleteCheckbox();

    return $html;

I would suggest that you could rewrite the Mage_Adminhtml_Block_Catalog_Product_Helper_Form_Image class and create a getElementHtml function that will set the width and height you want.

Alternatively you could use the event adminhtml_catalog_product_edit_element_types and create a custom type handler. You would then need to update the field type when adding from image to something like new_image.

$response = $observer->getEvent()->getResponse();
$types = $response->getTypes();
$types['new_image'] = Mage::getConfig()->getBlockClassName('new_image/element_image');

I have accepted the answer of @mageUz and it works but I also found that solution which is faster and easier I think. If you add a css file inside skin/adminhtml/default/default/yourfile.css with that it makes the trick:

#imagebook_image {
display: block;
max-width: 200px;
max-height: 200px;
width: auto;
height: auto;
padding-bottom: 10px;

imagebook_image is made by your column name and type.I haven't found anything to be broken.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.