Smarty html_image 垂直对齐图像

Question

我们目前使用

{html_image file='pumpkin.jpg'}

来计算图像的宽度/高度。

我想做的是向函数添加一个额外的参数，以便您可以传入容器（父级）的高度。

插件将通过计算

margin-top

 来计算 

(container_height - image_height) / 2

：

目前我们正在通过 JS 执行此操作，并且由于图像是动态调整大小的，因此存在轻微的延迟。如果我们通过 Smarty 执行此操作，

margin-top

将被缓存。

例如，如果图像 [foo.jpg] 的高度为 50px，容器的高度为 100px：

{html_image file="images/foo.jpg" containerHeight=100}
<img src="images/foo.jpg" width="60" height="50" style="margin-top: 25px" alt="" />

http://www.smarty.net/docs/en/language.function.html.image.tpl

  <?php
    /**
     * Smarty plugin
     * 
     * @package Smarty
     * @subpackage PluginsFunction
     */

    /**
     * Smarty {html_image} function plugin
     * 
     * Type:     function<br>
     * Name:     html_image<br>
     * Date:     Feb 24, 2003<br>
     * Purpose:  format HTML tags for the image<br>
     * Examples: {html_image file="/images/masthead.gif"}
     * Output:   <img src="/images/masthead.gif" width=400 height=23>
     * 
     * @link http://smarty.php.net/manual/en/language.function.html.image.php {html_image}
     *      (Smarty online manual)
     * @author Monte Ohrt <monte at ohrt dot com> 
     * @author credits to Duda <[email protected]> 
     * @version 1.0
     * @param array $params parameters
     * Input:<br>
     *          - file = file (and path) of image (required)
     *          - height = image height (optional, default actual height)
     *          - width = image width (optional, default actual width)
     *          - basedir = base directory for absolute paths, default
     *                      is environment variable DOCUMENT_ROOT
     *          - path_prefix = prefix for path output (optional, default empty)
     * @param object $template template object
     * @return string 
     * @uses smarty_function_escape_special_chars()
     */
    function smarty_function_html_image($params, $template)
    {
        require_once(SMARTY_PLUGINS_DIR . 'shared.escape_special_chars.php');

        $alt = '';
        $file = '';
        $height = '';
        $width = '';
        $extra = '';
        $prefix = '';
        $suffix = '';
        $path_prefix = '';
        $server_vars = $_SERVER;
        $basedir = isset($server_vars['DOCUMENT_ROOT']) ? $server_vars['DOCUMENT_ROOT'] : '';
        foreach($params as $_key => $_val) {
            switch ($_key) {
                case 'file':
                case 'height':
                case 'width':
                case 'dpi':
                case 'path_prefix':
                case 'basedir':
                    $$_key = $_val;
                    break;

                case 'alt':
                    if (!is_array($_val)) {
                        $$_key = smarty_function_escape_special_chars($_val);
                    } else {
                        throw new SmartyException ("html_image: extra attribute '$_key' cannot be an array", E_USER_NOTICE);
                    } 
                    break;

                case 'link':
                case 'href':
                    $prefix = '<a href="' . $_val . '">';
                    $suffix = '</a>';
                    break;

                default:
                    if (!is_array($_val)) {
                        $extra .= ' ' . $_key . '="' . smarty_function_escape_special_chars($_val) . '"';
                    } else {
                        throw new SmartyException ("html_image: extra attribute '$_key' cannot be an array", E_USER_NOTICE);
                    } 
                    break;
            } 
        } 

        if (empty($file)) {
            trigger_error("html_image: missing 'file' parameter", E_USER_NOTICE);
            return;
        } 

        if (substr($file, 0, 1) == '/') {
            $_image_path = $basedir . $file;
        } else {
            $_image_path = $file;
        } 

        if (!isset($params['width']) || !isset($params['height'])) {
            if (!$_image_data = @getimagesize($_image_path)) {
                if (!file_exists($_image_path)) {
                    trigger_error("html_image: unable to find '$_image_path'", E_USER_NOTICE);
                    return;
                } else if (!is_readable($_image_path)) {
                    trigger_error("html_image: unable to read '$_image_path'", E_USER_NOTICE);
                    return;
                } else {
                    trigger_error("html_image: '$_image_path' is not a valid image file", E_USER_NOTICE);
                    return;
                } 
            } 
            if (isset($template->security_policy)) {
                if (!$template->security_policy->isTrustedResourceDir($_image_path)) {
                    return;
                } 
            } 

            if (!isset($params['width'])) {
                $width = $_image_data[0];
            } 
            if (!isset($params['height'])) {
                $height = $_image_data[1];
            } 
        } 

        if (isset($params['dpi'])) {
            if (strstr($server_vars['HTTP_USER_AGENT'], 'Mac')) {
                $dpi_default = 72;
            } else {
                $dpi_default = 96;
            } 
            $_resize = $dpi_default / $params['dpi'];
            $width = round($width * $_resize);
            $height = round($height * $_resize);
        } 

        return $prefix . '<img src="' . $path_prefix . $file . '" alt="' . $alt . '" width="' . $width . '" height="' . $height . '"' . $extra . ' />' . $suffix;
    } 

    ?>

Answer 1

尝试在插件函数

return

语句之前添加此：

if (isset($params['containerHeight'])) {
    $containerHeightAttr = ' style="margin-top: ' . intval(($params['containerHeight'] - $height) / 2) . 'px;"';
    $extra .= $containerHeightAttr;
} 

这里是完整文件：

http://pastebin.com/raw.php?i=V9eGsXVF

尝试一下，如果有错误请告诉我。我还没有测试过，但我来这里是为了最终解决问题。