- 2009-10-21 (水) 16:50
- MovableType
- さてと Image Cropper プラグイン
続けてプラグイン行きます。前エントリーは書き始めてから、新しくインストールしたプラグインが10本増えて、2本が削除されました。いい加減、短いエントリーにしようよ！
さて「Image Cropper - Endevver Consulting」です。GitHubは「byrnereese's mt-plugin-imagecropper at master - GitHub」になります。
思いっきり端折って説明すると、サムネイルを自分の好きな位置で切り出せる様にするプラグインです。口で言うより、オバマ大統領のサンプル見るとどういうものか解ると思います。
実は「Custom Header」は、これを試していて動作したので、「似たようなプラグインだからもしかしたら」と試してみて、動作するのを発見したのです。
以下はMT5上でImageCropperを動かすために、pluginをいじった結果です。インストールしたままだと、いろいろなところが違った表示になります。ただし、内部の機能的な部分はいじっていません。あくまで表示にかかわる部分の修正のみです。
サムネイルプロトタイプ設定は事前に作成しておく。
サムネイルの規定のサイズを名前をつけて作成しておきます。これはテンプレートセットに、CutomHeaderの様に書き込んでおく方法と、ブログ単位で管理画面から追加する方法があります。
テンプレートセット（config.yaml）に書いておくことで、デザインに密接に関連したサムネイルの運用が可能になります。MT4.3以降では関連付けられたアイテムが、必ずしもエントリー本文内に書かれていなくても良くなっています。これを応用して、エントリー全体を現すサムネイルを作っておく事も出来るし、デザイン上で色々な応用が利くと思います。
「config.yaml」には以下のように追加。
thumbnail_prototypes:
persona_thumb:
label: Persona
max_width: 40
max_height: 40
featured_thumb:
label: Thumbnail
max_width: 100
max_height: 100
featured_image:
label: Featured
max_width: 360
max_height: 240
この状態で「Thumbnail Prototypes」を表示させると、こんな感じの画面が表示されます。
「config.yaml」での設定が変更不可能な設定として表示されています。この画面で「Create Thumbnail Prototype」をクリックすると新規設定を追加登録するダイアログが表示されます。
追加すると、設定一覧の「Custom Thumbnail Prototypes」に表示されます。こちらは削除が可能になっています。色々テストした結果、追加で作成した設定は、なぜか出力する時に有効にならないようです。本来の正常な動作状態ではないので、それがバグかどうかは判断が付かないのですが。
アイテムをサムネイル設定で切り取る。
こうして設定したサムネイルサイズにしたがい、アイテムからサムネイルの切り出しが行えます。
切り出しアクションは、サムネイル処理したい画像アイテム編集画面の「アクション」内の「Generate Thumbnails」をクリックして起動します。
アクション部分にこの様に「Generate Thumbnails」が表示されます。リンクをクリックするとサムネイルの切り取りのための画面に移動します。
おなじみのエラーが発生してます。
こんな画面です。上に設定されているサムネイルのサイズ設定が並びます。下には作成されるサムネイルのフォーマット、画像の圧縮度、それから動作しなかったのですがキャプションを追加する設定が存在します。
設定するサムネイル設定の枠をクリックすると、切り取り画面に切り替わります。
妙な動きをしますが、画面上でドラッグしてエリアを指定します。
「Crop」ボタンをクリックすると、バックグラウンドで保存が行われるのですが、コールバックで画面遷移が行われません。冒頭のエラーが原因と思われます。しかし通信をモニターして完了したのを確認してから、リロードを行うと、この様に設定が行われたことが、画面上に表示されてわかるようになっています。
設定は各サムネイル設定毎に行えて、この様に表示されます。サムネイル部分にカーソルを当てると、設定を削除するための、ゴミ箱小アイコンが表示されます。クリックすると関連付けともに、切り出されたアイテム自体も削除されます。
切り取ったサムネイルアイテムは、この様にアイテムとして登録されています。もちろんアイテム間で関連付けが行われています。サムネイルアイテムの名称は、オリジナルのファイル名＋(設定名)となるようです。
切り取ったサムネイルを利用する。
このプラグインをインストールして使えるようになっているMTタグは「MTCroppedAsset」「MTDefaultCroppedImageText」です。「MTDefaultCroppedImageText」はキャプションに関するタグになります。「MTCroppedAsset」の方は、アイテムコンテクストの中で使用して、そのアイテムに対し「label」指定したサムネイル設定がされている時に、サムネイル設定されて切り出されたアイテムのコンテクストを作るタグになります。
<mt:Asset id="1062">
<mt:CroppedAsset label="Featured">
<img src="<$mt:AssetURL$>" />
<mt:Else>
<img src="<$mt:AssetThumbnailURL square="1" width="100"$>" />
</mt:CroppedAsset>
</mt:Asset>
このテンプレートはID1062のアイテムに、「Featured」というラベルのサムネイル設定による切り出しが行われているときに、その切り出されたアイテムを表示し、切り出しが行われていないときには、自動でサムネイルの作成をしてそちらを表示する内容になります。
エントリーごとに、キーとなる写真を表示するとか、「Featured Assets」プラグインでFeatureされたアイテムのサムネイルを表示するとか、色々な使い方が考えられると思います。
- Newer >: MT5でのTemplateShelf
- < Older: MT5・プラグインの皆さん動いてますか
ping a Trackback
- TrackBack URL for this entry.(1)
スクリプトの読み込みが完了していません。
メールフォーム（Javascriptを使用していません）や、
Twitter経由のCommentでもReplyいたします。ただし返信はブログのコメントとして行う事もあります。