web-dev-qa-db-ja.com

フロントエンドのポストプラグインを使って注目の画像をプレビューする

フロントエンドの投稿に Frontier Post プラグインを使用していますが、うまく機能しますが、次の機能を追加したいと思います。 imageすぐに表示されるようにし(新しいカバー画像をアップロードするときは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
jetgo

画像をサーバーに保存せずにそのURLを最初に取得せずに画像を表示したい場合は、画像タグに入れるローカルURLを生成する必要があります。それはJavaScriptを使用することを意味します。実際には、それは非常に単純です( 小道具 ):

画像を表示したい場所に、以下を挿入します。

<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])">

今、あなたはそれをFrontier Postと連携させる必要があるでしょう。プラグイン自体を変更したくないので、親プラグインの動作を変更する独自のプラグインを作成する必要があります。それは可能ですが、簡単ではなく、そして親プラグインの徹底的な分析を含みます。

1
cjbj