使用前端发布插件预览特色图片

时间:2016-08-29 作者:jetgo

我正在使用Frontier Post 用于前端发布的插件,效果很好,但我想添加以下内容:当用户上传/选择一幅特色图片时,我希望它立即显示出来(有点像你上传新封面图片时的facebook),而不必等到提交后再显示。

以下是插件中的相关代码:

  if ( fp_get_option_bool("fps_show_feat_img") )
    {
        //force grid view
        //update_user_option( get_current_user_id(), \'media_library_mode\', \'grid\' );
        //set iframe size for image upload
        if ( wp_is_mobile() )
            {
                $i_size     = "&width=240&height=320";
                $i_TBsize   = "&TB_width=240&TB_height=320";
            }
        else
            {
                $i_size     = "&width=640&height=400";
                $i_TBsize   = "&TB_width=640&TB_height=400";
            }
        ?>

        <fieldset class="frontier_post_fieldset_tax frontier_post_fieldset_tax_featured">

        <?php
        $FeatImgLinkHTML = \'<a title="ADD COVER IMAGE" href="\'.site_url(\'/wp-admin/media-upload.php\').\'?post_id=\'.$post_id.$i_TBsize.\'&amp;tab=library&amp;mode=grid&amp;type=image&amp;TB_iframe=1\'.$i_size.\'" id="set-post-thumbnail" class="thickbox">\';

        if (has_post_thumbnail($post_id)) 
            $FeatImgLinkHTML = $FeatImgLinkHTML.get_the_post_thumbnail($post_id, \'thumbnail\').\'<br>\';


        $FeatImgLinkHTML = $FeatImgLinkHTML.\'<br>\'.__("ADD COVER IMAGE", "frontier-post").\'</a>\';

        echo $FeatImgLinkHTML."<br>";

        echo \'</fieldset>\';
    }
我不知道WordPress是否能够做到这一点,但我尝试添加了创建缩略图的功能。

    function make_thumb($src, $desired_width) {

        /* read the source image */
        $source_image = imagecreatefromjpeg($src);
        $width = imagesx($source_image);
        $height = imagesy($source_image);

        /* find the "desired height" of this thumbnail, relative to the desired width  */
        $desired_height = floor($height * ($desired_width / $width));

        /* create a new, "virtual" image */
        $virtual_image = imagecreatetruecolor($desired_width, $desired_height);

        /* copy source image at a resized size */
        imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $width, $height);

        /* create the physical thumbnail image to its destination */
        imagejpeg($virtual_image);
        }

        $thumb = fopen(the_post_thumbnail_url(post-thumbnail), "r");
        $desired_width = 300;
        make_thumb($thumb, $desired_width);
当我将其添加到if (has_post_thumbnail($post_id)) 我收到一条警告,说fopen中的变量为空。当我把它移到if 声明什么都没发生。

我想做的事情可能吗?如果可能的话,最好的方法是什么?

谢谢

注意:我向插件开发人员提出了我的问题,但没有收到任何回应。

1 个回复
SO网友:cjbj

如果您想在不将图像存储到服务器并首先检索该url的情况下显示图像,则需要生成一个本地url以放入图像标记中。这意味着使用javascript。其实很简单(props):

在要显示图像的位置,插入:

<img id="temporary-id" alt="your image" max-width="640px" max-height="400px" />
然后以如下形式修改文件上载字段:

<input type="file" onchange="document.getElementById(\'temporary-id\').src = window.URL.createObjectURL(this.files[0])">
现在你需要在边防哨所工作。由于您不想修改插件本身,因此需要编写自己的插件来修改父插件的行为。这是可能的,但并不简单,需要对父插件进行彻底的分析。