Movable Typeでアイテム画像を編集できる「Pixenateプラグイン」

Movable Typeでアイテム画像を編集できる「Pixenateプラグイン」

Posted at February 17,2011 1:55 AM
Tag:[MovableType, Pixenate, Plugin]

Movable Typeにアップロードしたアイテム画像を編集できる「Pixenateプラグイン」を紹介します。

2011.08.10 MT5.1にも対応しました。

1.機能

Pixenateを利用して、アップロードした後でアイテム画像を編集することができます。Pixenateはオンラインで画像を編集できるサービスです。詳しくは「オンラインで画像を編集できる「Pixenate」」をご覧ください。

このプラグインを適用すると、アイテム一覧やアイテム編集画面に「Edit Image」というリンクを追加します。MT5.1ではアイテム一覧のサムネイルに編集画面へのリンクを設定します。

Edit Image

このリンクをクリックすれば、画像の編集画面がポップアップで表示されます。各アイコンの操作方法は「オンラインで画像を編集できる「Pixenate」」が参考になると思います。

Edit Image

このように回転させたりできます。

Edit Image

配布元のプラグインはMT4までしか対応していないので、次項でMT5用のカスタマイズも交えたインストール方法を紹介します。

2.ダウンロードとインストール

Pixenate Photo Editor for Movable Type」のページの一番上にある「files/mtplugin1_0.zip.」をクリック。

Edit Image

アーカイブを展開し、中にあるPixenateフォルダをpluginsディレクトリにアップロード。また、中にあるcmsフォルダをalt-tmplディレクトリにアップロード。

次に、リサイズした編集結果をアイテムに反映させるために、「Pixenateプラグインで画像をリサイズできない不具合の対処」を行ってください。

さらにMTのバージョンによって以下のカスタマイズを行ってください。

MT5.0xの場合

MT5.0用テンプレートファイルをダウンロードします。mt-plugin-pixenate-tmplのページからアーカイブをダウンロードし、アーカイブを展開した中にある、

  • alt-tmpl/cms/edit_asset.tmpl
  • alt-tmpl/cms/include/asset_table.tmpl
  • plugins/Pixenate/tmpl/Editor.tmpl

を、元のプラグインの同じディレクトリにあるファイルと差し替えてください。

MT5.1xの場合

MT5.0用テンプレートファイルをダウンロードします。

Pixenate_for_MT51.zip

アーカイブを展開した中にある、

  • alt-tmpl/cms/edit_asset.tmpl
  • plugins/Pixenate/tmpl/Editor.tmpl

を、元のプラグインの同じディレクトリにあるファイルと差し替えてください。また、元のプラグインの、

  • alt-tmpl/cms/include/asset_table.tmpl

は削除してください(配置したままでも問題ありません)。

さらに、元のプラグインのPixenateフォルダ配下にあるPixenate.plを任意のエディタで開き、以下の青色部分を追加してください。

…前略…
sub init_registry {
    my $plugin = shift;
    $plugin->registry({
          applications => {
                cms => {
                     methods => {
                          pixenate_edit_photo => \&edit_photo_mode,
                          pixenate_save_changes => \&save_changes_mode,
                     },
                },
          },
        callbacks => {
            'cms_filtered_list_param.asset' => \&add_edit_link,
        },
    });
}
sub add_edit_link {
    my $cb = shift;
    my ( $app, $res, $objs ) = @_;
    my $obj;
    my $class;
    my $id;
    my $url;
    my $counter = 0;
    my $script_url =  $app->base . $app->app_uri;
    for my $data (@{$res->{objects}}) {
        $obj = $objs->[$counter];
        $class = $obj->class;
        if ($class eq 'image') {
            $id  = $obj->id;
            $url = $obj->url;
            for my $d (@$data) {
                if ($d =~ /<span class="title">/) {
                    $d =~ s!<img (.*)/>!<a class="action-link mt-open-dialog" href="${script_url}?__mode=pixenate_edit_photo&amp;image=${url}&amp;id=${id}" title="edit image" onclick="return false;"><img $1/></a>!;
                }
            }
        }
        $counter++;
    }
}
sub get_filepath {
    my ($imageId) = @_;
    my $image = MT::Asset::Image->load($imageId);
    my $filepath = $image->file_path;
    return $filepath;
}
…後略…

MT5.1版については、上記の変更をすべてを盛り込んだものも以下において置きますのでご利用ください。

Pixenate_for_MT51_all.zip

いずれのバージョンについても、システム管理画面の「ツール」→「プラグイン」で「Pixenate Photo Editor~」が表示されていればインストール完了です。

プラグイン一覧

関連記事
トラックバックURL


コメント

お世話になっております、riatw と申します。

こちらのプラグインの件で1点質問したいことがあり、コメントを
させていただきました。

プラグインの方を使用させて頂いたところ、画像の加工は無事出来たのですが、加工後の画像の大きさがアセットの情報に反映されませんでした。

MTAssetPropatityでimage_width、image_heightを取得した処理を
書いており、そこで出来れば加工後の画像の大きさを取得したいと思っています。

テンプレート側、他プラグインとの併用等、色々と方法を考えてみましたが良い方法が思いつきませんでした。

お手数おかけしますが、何か良い方法を御存知でしたら情報をいただけると幸いです。

よろしくお願いいたします。

[1] Posted by riatw : March 5, 2011 9:14 AM

>riatwさん
こんばんは。
ご質問の件ですが保存されていないことは確認できました。配布元のプラグインでも部分は反映されていないようです。
PixenateのAPIを確認しましたが、変更後のサイズを取得するAPIがないようなので、何か方法がないか考えます。
それではよろしくお願い致します。

[2] Posted by yujiro logo : March 6, 2011 1:51 AM

こんにちは。

返信ありがとうございます。

なるほど、APIに変更後をサイズを取得するAPIが無いのですね…。

mtassetテーブルの画像の大きさの情報が、ファイルのアップロードのタイミングでしか反映されていないので、

何らかの方法で再取得が必要になりそうです。

#中の仕組みが分らないので、何とも確信に迫れないのですが-;


お手数おかけしますが、よろしくおねがいいたします。

[3] Posted by riatw : March 6, 2011 1:59 PM

>riatwさん
こんばんは。
なんとか対処できましたのでエントリー致しました。
http://www.koikikukan.com/archives/2011/03/07-005555.php
それではよろしくお願い致します。

[4] Posted by yujiro logo : March 7, 2011 12:34 AM

こんにちは。

さっそく試してみたいと思います。


無理を聞き入れていただき、ありがとうございます。

[5] Posted by riatw : March 7, 2011 3:23 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)