¿Cómo puedo hacer que la imagen de vista previa sea más grande?

Question

Estoy haciendo un módulo que hará lo mismo con el Catálogo-> El gerente de producto Do. En mi módulo necesito cargar una imagen. Todo está bien hasta ahora. El problema es que no puedo encontrar una manera cuando he subido una imagen y voy a editar ese producto, la imagen es 22x22 PX.

Mi campo está en la forma es así:

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

       ));

Entonces, mi pregunta es de la imagen a continuación. ¿Cómo puedo hacer que esa imagen sea más grande? Cuando edito el CSS que Magento usa, cambia todas las imágenes de vista previa para todo el sitio.

Gracias de antemano por tu tiempo.

Answer 1

Puede agregar contenido HTML después de su elemento, use el siguiente:

$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'/> "
);

Aquí $imageUrl es un enlace a la imagen cargada, la obtengo de mi modelo, pero el tuyo puede ser diferente, puede obtenerlo usando la propia lógica. Y también agregue algunas reglas de CSS para some_class.

Answer 2

La imagen que ha declarado se agrega a través del Mage_Adminhtml_Block_Catalog_Product_Helper_Form_Image clase que a su vez usa el Varien_Data_Form_Element_Image

Si miras la función getElementHtml en Varien_Data_Form_Element_Image Verá la altura y el ancho codificados.

/**
 * 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;
}

Sugeriría que puedas reescribir el Mage_Adminhtml_Block_Catalog_Product_Helper_Form_Image clase y crear un getElementHtml función que establecerá el ancho y la altura que desee.

Alternativamente, podría usar el evento adminhtml_catalog_product_edit_element_types y crear un controlador de tipo personalizado. Luego necesitaría actualizar el tipo de campo al agregar desde image a algo como new_image.

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

Answer 3

He aceptado la respuesta de @mageuz y funciona, pero también descubrí esa solución que es más rápida y fácil, creo. Si agrega un archivo CSS dentro de Skin/Adminhtml/Default/Default/YourFile.css con eso, hace el truco:

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

ImageBook_Image está hecho por el nombre y el tipo de su columna. No he encontrado que nada se rompa.