How can i make the preview image bigger?

Question

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.

Thanks in advance for your time.

Answer 1

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();

$field->setAfterElementHtml(
    "<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.

Answer 2

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> ';
    }
    $this->setClass('input-file');
    $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');
$response->setTypes($types);

Answer 3

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.