Magento 小部件中的图像

Question

我正在 Magento 社区版本 1.4.2 中为时尚客户开发一个网站，作为该项目的一部分，我需要一些定制的主页促销块来展示特定的产品或产品类别。为此，我想我应该编写自己的小部件，并且除了如何处理图像之外，在这方面已经取得了相当好的进展。我需要添加图片作为促销的一部分。在我的小部件定义文件中，我包含了以下参数

        <image>
            <label>Image</label>
            <description>Promotion image</description>
            <visible>1</visible>
            <type>image</type>
        </image>

，这起初似乎工作正常，在管理后端创建/编辑小部件时，小部件选项中包含文件上传字段，但是在保存表单时，图像似乎没有显示上传，或其详细信息保留在数据库中。还有其他人有在小部件中使用图像的经验吗？我可能做错了什么？

Answer 1

它不保存/上传图像有几个原因：

• 表单 enctype 需要为“multipart/form-data”才能上传文件
• 。如果您将表单 enctype 更改为“multipart/form-data”，您会注意到，如果您监视请求，它会被 POST 为“application/x” -www-form-urlencoded"这是因为它是通过ajax完成的，ajax本身无法处理文件上传，需要单独处理。

我已经成功实现了“插入图像”按钮，该按钮初始化媒体库对话框，您可以在其中浏览服务器中的图像和/或上传图像。

用户单击“插入文件”后，它会将完整图像 URL 插入小部件中的文本框中，以便它像普通字段一样传递到模板中。

这就是我实现它的方法：

在您的 widget.xml 中指定一个新节点：

<image translate="label">
    <label>Image</label>
    <visible>1</visible>
    <required>1</required>
    <type>label</type>
    <helper_block>
        <type>widgets/cms_wysiwyg_images_chooser</type>
        <data>
            <button translate="open">
                <open>Insert Image...</open>
            </button>
        </data>
    </helper_block>
</image>

辅助块类型 widgets/cms_wysiwyg_images_chooser 是一个自定义类，因此您可以将其更改为只要正确创建类/文件，您想要的任何东西都可以。

<?php
class Stackoverflow_Widgets_Block_Cms_Wysiwyg_Images_Chooser extends Mage_Adminhtml_Block_Template
{
public function prepareElementHtml(Varien_Data_Form_Element_Abstract $element)
{
    $config = $this->getConfig();
    $chooseButton = $this->getLayout()->createBlock('adminhtml/widget_button')
        ->setType('button')
        ->setClass('scalable btn-chooser')
        ->setLabel($config['button']['open'])
        ->setOnclick('MediabrowserUtility.openDialog(\''.$this->getUrl('*/cms_wysiwyg_images/index', array('target_element_id' => $element->getName())).'\')')
        ->setDisabled($element->getReadonly());
    $text = new Varien_Data_Form_Element_Text();
    $text->setForm($element->getForm())
        ->setId($element->getName())
        ->setName($element->getName())
        ->setClass('widget-option input-text');
    if ($element->getRequired()) {
        $text->addClass('required-entry');
    }
    if ($element->getValue()) {
        $text->setValue($element->getValue());
    }
    $element->setData('after_element_html', $text->getElementHtml().$chooseButton->toHtml());
    return $element;
}
}
?>

就是这样！现在，您的小部件选项中应该有一个名为“图像”的新字段，其中包含一个文本框和一个按钮，您可以在其中插入服务器上图像的 url 并从模板中显示它。

对其工作原理的快速说明：

创建一个具有 onclick 函数的按钮，该函数通过调用 MediabrowserUtility.openDialog() 来调用 Media Library 对话框> 其中传递了参数 target_element_id，该参数告诉媒体库在用户单击“Insert File”后要在哪个元素中设置值，因此我们只需传递 id 小部件中的文本框，用于接收用户选择的图像的 url。

希望这对某人有帮助，因为我找不到任何资源来解释如何做到这一点，所以我花了很长时间挖掘 Magento 来解决所有问题:)

我将来想做的就是拥有它，这样它就可以了。在小部件中选择图像后显示图像，并将 url 存储在隐藏字段中，但是当值设置为 js/ 中的元素时，不会触发 onchange 绑定mage/adminhtml/browser.js 在 insert 函数中，因此在不更改核心文件的情况下很难做到这一点。我考虑过在媒体库关闭或计时器关闭后表单再次获得焦点时进行尝试（相当狡猾，但会起作用），但我还有其他事情要做，可能会回到它之后！

更新：

媒体库生成的URL如下所示：

http://www.yourwebsite.com/index.php/admin/cms_wysiwyg/directive/ ___指令/e3ttZWRpYSB1cmw9Ind5c2l3eWcvd2lkZ2V0cy9iYW5uZXIvaG9tZXBhZ2UvZm9yZWdyb3VuZC9maXNoLXRhbmsucG5nIn19/key/e8167e3884e40b97d8985e7b84e7cbc7 875f134e5f7e5946c9c2a482d0279762/

这是缓存的图像，仅当用户是管理员时才有效。愚蠢的？是的。如果您在生成输出 html 时将相同的图像插入 CMS 页面，它会将其转换为服务器上可通过 /media/wysiwyg/path/to/file/photo.jpg。我们需要向用户显示原始网址，因此我们可以做的是挂钩生成小部件 html 的函数（当您单击“插入小部件”时）并查找 /admin/cms_wysiwyg/directive/___directive/ 并将其替换为图像的原始 URL，就像 CMS 页面一样。

在您的自定义小部件的 config.xml 中：

<global>
    <models>
        <widget>
            <rewrite>
                <widget>Stackoverflow_Widgets_Model_Widget</widget>
            </rewrite>
        </widget>
    </models>
</global>

然后创建模型小部件 code\local\Stackoverflow\Widgets\Model\Widget.php：

<?php
class Stackoverflow_Widgets_Model_Widget extends Mage_Widget_Model_Widget
{
    public function getWidgetDeclaration($type, $params = array(), $asIs = true)
    {
        foreach($params as $k => $v){
            if(strpos($v,'/admin/cms_wysiwyg/directive/___directive/') !== false){
                $parts = explode('/',parse_url($v, PHP_URL_PATH));
                $key = array_search('___directive', $parts);
                if($key !== false){
                    $directive = $parts[$key+1];
                    $src = Mage::getModel('core/email_template_filter')->filter(Mage::helper('core')->urlDecode($directive));
                    if(!empty($src)){
                        $params[$k] = parse_url($src, PHP_URL_PATH);
                    }
                }
            }
        }
        return parent::getWidgetDeclaration($type, $params, $asIs);
    }
}

它会覆盖 getWidgetDeclaration 函数，每次为 textarea/wysiwyg 生成小部件输出时都会调用该函数，并查看所有参数，如果找到链接到管理缓存的图像，它将找出原始图像并覆盖数组中的变量并使用参数调用原始函数。

如果未找到缓存的图像，该功能将正常工作。

更新：13/09/2012

正如 Jonathan Day 指出的，如果您希望它在 Widget 实例中工作，您也必须覆盖 Mage_Widget_Model_Widget_Instance 。

直到现在，我还不需要通过小部件实例将图像添加到小部件，并且很困惑为什么我的功能不起作用，直到我调查并意识到“弹出”小部件实例使用 Mage_Widget_Model_Widget 并且在“窗口小部件选项”选项卡（无弹出窗口）上使用的窗口小部件实例是 Mage_Widget_Model_Widget_Instance，并且不会扩展 Mage_Widget_Model_Widget，因此不会继承该功能。

要将功能添加到 Mage_Widget_Model_Widget_Instance，只需将行 Petbarn_Widgets_Model_Widget_Instance 添加到您的 config.xml 中即可，如下所示：

<global>
    <models>
        <widget>
            <rewrite>
                <widget>Stackoverflow_Widgets_Model_Widget</widget>
                <widget_instance>Stackoverflow_Widgets_Model_Widget_Instance</widget_instance>
            </rewrite>
        </widget>
    </models>
</global>

然后创建模型实例code\local\Stackoverflow\Widgets\Model\Widget\Instance.php：

<?php
class Petbarn_Widgets_Model_Widget_Instance extends Mage_Widget_Model_Widget_Instance
{
    protected function _beforeSave()
    {
        if (is_array($this->getData('widget_parameters'))) {
            $params = $this->getData('widget_parameters');
            foreach($params as $k => $v){
                if(strpos($v,'/cms_wysiwyg/directive/___directive/') !== false){
                    $parts = explode('/',parse_url($v, PHP_URL_PATH));
                    $key = array_search('___directive', $parts);
                    if($key !== false){
                        $directive = $parts[$key+1];
                        $src = Mage::getModel('core/email_template_filter')->filter(Mage::helper('core')->urlDecode($directive));
                        if(!empty($src)){
                            $params[$k] = parse_url($src, PHP_URL_PATH);
                        }
                    }
                }
            }
            $this->setData('widget_parameters', $params);
        }
        return parent::_beforeSave();
    }
}

这次我们修改widget_parameters开头的数据code>_beforeSave() 函数，以便在保存之前修复 url。

您还必须确保包含 /js/mage/adminhtml/browser.js javascript 文件（在我的例子中没有包含）才能获取 MediabrowserUtility 功能。

为了确保它被包含在内，最简单的方法是将它包含在所有管理员中（没有花太多时间更好地瞄准它）。

为 adminhtml 布局创建一个 local.xml（如果您还没有）： app\design\adminhtml\default\default\layout\local.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addJs"><script>mage/adminhtml/browser.js</script></action>
        </reference>
    </default>
</layout>

这将使 Magento 在管理的每个页面上包含 js/mage/adminhtml/browser.js ，以便 MediabrowserUtility 始终可用。

注意：我使用的是 Magento Enterprise 1.11.2.0，所以我不确定它在其他版本上的表现如何。

Answer 2

我通过为小部件创建自定义字段类型解决了这个用例：

<image>
    <label>Image</label>
    <description>Promotion image</description>
    <visible>1</visible>
    <type>widgetimagechooser/chooser</type>
</image>

我实现了一个块 Aijko_WidgetImageChooser_Block_Chooser 来触发标准 Magento 图像选择器元素。

为了解决图像文件 URL 不清晰的问题，我实现了一个自定义控制器 Aijko_WidgetImageChooser_Adminhtml_Cms_Wysiwyg_Images_ChooserController 来处理 Magento 标准图像选择器的返回值。

该值将添加到小部件中的文本框中。然后可以使用该图像的相对 url 在前端显示图像。

请随意尝试 Github 上提供的扩展或直接使用 Magento 连接。

Answer 3

谢谢克鲁斯的回答！我找到了一种更好的方法来解决缓存图像 URL 的问题。我什至不得不这样做，因为您覆盖 Widget 模型的解决方案不适用于 Magento 1.7.0.2。

因此，我所做的就是将新的 GET 参数 use_file_url 添加到用于选择器块的 URL：

$url    = $this->getUrl(
    '*/cms_wysiwyg_images/index',
    array(
        'target_element_id' => $element->getName(),
        'use_file_url' => 1
    )
);

这会将 GET 参数传递到媒体浏览器。下一步是将此参数传递给 Mage_Adminhtml_Cms_Wysiwyg_ImagesController 的 onInsertAction。为此，您必须重写 Mage_Adminhtml_Block_Cms_Wysiwyg_Images_Content 块的 getOnInsertUrl() 函数：

public function getOnInsertUrl()
{
    $useFileUrl = (int)$this->getRequest()->getParam('use_file_url', 0);
    return $this->getUrl('*/*/onInsert', array('use_file_url' => $useFileUrl));
}

然后您需要在 Mage_Adminhtml_Cms_Wysiwyg_ImagesController 中处理新参数控制器：

public function onInsertAction()
{
    $useFileUrl = (int)$this->getRequest()->getParam('use_file_url', 0) == 1 ? true : false;
    $helper     = Mage::helper('cms/wysiwyg_images');
    $storeId    = $this->getRequest()->getParam('store');
    $filename   = $this->getRequest()->getParam('filename');
    $filename   = $helper->idDecode($filename);
    $asIs       = $this->getRequest()->getParam('as_is');

    Mage::helper('catalog')->setStoreId($storeId);
    $helper->setStoreId($storeId);

    if ($useFileUrl == false) {
        $image = $helper->getImageHtmlDeclaration($filename, $asIs);
    } else {
        $image = $helper->getImageMediaUrl($filename);
    }

    $this->getResponse()->setBody($image);
}

最后一步是覆盖 Mage_Cms_Helper_Wysiwyg_Images 帮助器并添加 getImageMediaUrl() 函数：

public function getImageMediaUrl($filename)
{
    return $this->getCurrentUrl() . $filename;
}

我认为这是一个非常漂亮的方法，即使您必须 ovverride 4 个类。但传递 GET 参数似乎比解析缓存的 URL 更安全。

Answer 4

小部件没有文件上传。要解决这个问题，您可以使用 magento 媒体浏览器并像所见即所得编辑器一样选择图像，但还有其他问题，媒体浏览器不返回图像的清晰 url。

Answer 5

从 Magento 版本 1.9.2.0 开始，您还需要将以下内容添加到 adminhtml 布局文件中：

lib/flex.js
lib/FABridge.js
mage/adminhtml/flexuploader.js

Answer 6

Magento 的图像自定义属性通常不会出现在扩展选项卡中，您必须转到“目录”>“产品”>“扩展”选项卡。用于分配此属性的图像。但通过一些自定义编码，您可以实现这一目标。