如何使预览图像更大？

Question

我正在制作一个模块，该模块几乎可以与目录 - >产品经理这样做。在我的模块中，我需要上传图像。到目前为止，一切都很好。问题在于，当我上传图像并去编辑该产品时，我找不到方法，图像为22x22 px。

我的领域是这样的：

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

       ));

因此，我的问题是从下面的图像中。我如何使该图像更大？当我编辑Magento使用的CSS时，请更改所有网站的所有预览图像。

在此先感谢您的时间。

Answer 1

您可以在元素之后添加HTML内容，使用以下方式：

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

这里 $imageUrl 是指向上传图像的链接，我从模型中获取它，但是您的模型可能有所不同，您可以使用自己的逻辑获得它。并添加一些CSS规则 some_class.

Answer 2

您所说的图像是通过 Mage_Adminhtml_Block_Catalog_Product_Helper_Form_Image 依次使用的类 Varien_Data_Form_Element_Image

如果您查看功能 getElementHtml 上 Varien_Data_Form_Element_Image 您将看到硬编码的高度和宽度。

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

我建议您可以重写 Mage_Adminhtml_Block_Catalog_Product_Helper_Form_Image 上课并创建一个 getElementHtml 功能将设置所需的宽度和高度。

另外，您可以使用该事件 adminhtml_catalog_product_edit_element_types 并创建一个自定义类型处理程序。然后，您需要在添加时更新字段类型 image 像这样的东西 new_image.

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

Answer 3

我已经接受了@mageuz的答案，它起作用了，但是我发现该解决方案更快，更容易。如果您在Skin/adminhtml/default/default/yourfile.css中添加CSS文件，则可以使其成为技巧：

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

ImageBook_image由您的列名和类型制作。我没有发现任何要破坏的东西。