小粋空間  -  a cheap joke and a play on words site

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

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

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

１．機能

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

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

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

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

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

２．ダウンロードとインストール

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

アーカイブを展開し、中にある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～」が表示されていればインストール完了です。