nlog(n): 挿入画像のサムネイルの幅をワンクリックで変更するハック

Mon October 17, 2011

挿入画像のサムネイルの幅をワンクリックで変更するハック

MT2 で，挿入画像のサムネイルの幅をワンクリックで変更するために，編集画面に幅指定のボタンを追加する。

■ ■ ■

動作環境

動作環境は Movable Type 2.661。

どんなハック?

WolaWola さんが公開されている挿入画像の幅を制限するMaxImageWidthプラグインを見て，「MT5 ではプラグインで全部できてしまうのね」と思ったり。

このブログはいまだに MT2 なので，色々するにはプラグインではなくてハックになる。このハックは，サムネイルの幅をワンクリックで変更するボタンを追加するもの。WolaWola さんのプラグインでは，サムネイルの幅をスライダで変更できるようになっている。このハックでは変更する値は，スライダなどで便利には設定できない。固定値になる。

「120」幅指定ボタンの追加

このハックを行うと，上の図のように，画像アップロード完了画面に「120」というボタンがつく。このボタンをクリックすると，サムネイルの幅が120に変更になり，高さがそれに合わせて変更される。

このブログでは，写真のサムネイルの幅を 120 ピクセルに固定しているので，このボタンがあるととても便利なのである。「1発で120ピクセルにしたい」という人向け。

テンプレートのハック

ボタンの追加

tmpl/cms/upload_complete.tmpl を編集して，120行目あたりに強調部分を追加する。

   <tr>
   <td rowspan="4"><img src="<TMPL_VAR NAME=STATIC_URI>images/spacer.gif" width="10" height="1"></td>
   <td valign="top" align="right"><font class="instructional"><MT_TRANS phrase="Width:"></font></td>
   <td valign="top"><input class="num4" name="thumb_width" value="<TMPL_VAR NAME=WIDTH>" onchange="adjustWidthHeight(this
.form, 1)"></td>
   <td valign="top"><select name="thumb_width_type" class="menu" onchange="adjustPixelsPct(this.form, 1)">
   <option value="pixels" selected><MT_TRANS phrase="Pixels">
   <option value="percent"><MT_TRANS phrase="Percent">
   </select></td>
   <td valign="top"><input type="button" value="120" onclick="thumb_width_px(this.form, 120)"></td>
   </tr>

ここで120ピクセルという値を指定している。この強調部分で呼ぶ関数はもとの MT にはないので，別に書いてやる必要がある。

関数の追加

同じファイル tmpl/cms/upload_complete.tmpl の 120行目あたりに，その上に書かれている adjustWidthHeight 関数を真似て，thumb_width_px 関数を新しく書く。

function thumb_width_px (f, pxt) {
   if (!f.constrain.checked) return;
   var w = f.thumb_width;
   var h = f.thumb_height;
   var wf = f.full_width.value;
   var hf = f.full_height.value;
   var wt = f.thumb_width_type;
   var ht = f.thumb_height_type;
   w.value = pxt;
   h.value = Math.floor(hf * w.value / wf);
   wt.value = "pixels";
   ht.value = "pixels";
   return true;
}

これで完了。

このハックにどのくらいのニーズがあるのかは不明である。