Imanageアドオン(画像管理・サムネイル) | Addons

Imanageアドオン を使用すると画像の保存やサムネイル表示を簡単に行うことができます。
* 当アドオンを使用するには ImageMagick および imagick拡張 が必要です。

画像アップロード

まず、下記のようなファイルアップロードフォームを設置します。
<form action="<?php echo uri('a: upload') ?>" method="post" enctype="multipart/form-data">
  <fieldset>
    <input type="file" name="image" />
    <input type="submit" value="upload" />
  </fieldset>
</form>
ファイルを受け取るuploadアクションは下記のようになります。バリデーションに関してはこちらを参照してください。なお、Imanageアドオンをロードするとコントローラに "imanage" という名前で Imanageオブジェクト がセットされます。コントローラ内では $this->imanage で、テンプレート内では $imanage でアクセスすることができます。
class Index_Controllers_MyController extends Sabel_Controller_Page
{
  public function upload()
  {
    $validator = new Validator();
    $validator->setDisplayName("image", "画像");
    $validator->add("image", "required");
    $validator->add("image", "image('100K')");
    
    $image = $this->request->getFile("image");
    
    if ($validator->validate(array("image" => $image))) {
      $fileName = $this->imanage->save($image);
    } else {
      // error
    }
  }
}
アップロードされたファイルに問題がなければ(形式・ファイルサイズなど)、imanageオブジェクトのsaveメソッドに画像データを渡してください。
なお、ここではファイルオブジェクト(Sabel_Request_File)を渡していますが、file_get_contents() などで取得したバイナリデータを渡すことも可能です。save()メソッド の返り値は、ランダムな名前で保存されたファイル名となります。画像データはファイル名の先頭2文字を使用したディレクトリ内に保存されます。これは1つのディレクトリに大量のファイルが溜まると厄介なためです。
例えばファイル名が abcdefg.jpeg だとすると、画像は public/images/data/a/b/abcdefg.jpeg に保存されます。

サムネイル画像の表示

サムネイルを表示するには、imgTag()メソッドを使用します。$alt が渡され $title が省略された場合、$alt が $title としても使用されます。
string imgTag($filename, $height, $width, $alt = "", $class = "", $id = "", $title = "")
例えば次のように使用します。
<?php echo $imanage->imgTag("abcdefg.jpeg", 90, 90, "sample image") ?>
上記のコードで書き出されるimgタグは下記のようになります。90ピクセルx90ピクセルのサムネイル画像が表示されます。
<img src="/images/thumbnail/90x90/a/b/abcdefg.jpeg" alt="sample image" title="sample image" />
一度サムネイルを表示すると、サムネイル用ディレクトリに新しくファイルが作成されていることが確認できます。
例: public/images/thumbnail/90x90/a/b/abcdefg.jpeg

これは画像(ファイル)が存在しない場合にPHP(Sabel)が実行され、Imanageアドオンが元データからサムネイル画像を作成し、サムネイル用ディレクトリに保存するためです。1度作成されたらそれ以降はPHPが実行されないため高速です。

また、サムネイルは縦か横のどちらかに0を指定することが可能で、0を指定された方はそうでない方の縮小比を用いて自動計算されます。例えば縦240ピクセル・横180ピクセルの画像の、$height = 0、$width = 120 で imgTag()メソッド を実行した場合、縦160ピクセル・横120ピクセルのサムネイルが作成されます。デザイン上、どちらかのサイズだけ固定できれば良い場合に便利です。
<?php echo $imanage->imgTag("abcdefg.jpeg", 0, 120) ?>
サムネイルをクリックすると大きな画像(元のサイズ)で表示することはよくあると思います。その場合は次のようにしてください。
<a href="<?php echo $imanage->getUrl("abcdefg.jpeg") ?>">
  <?php echo $imanage->imgTag("abcdefg.jpeg", 90, 90, "sample image") ?>
</a>
なお、$height と $width を両方0にすると、元の画像サイズで表示するimgタグが書き出されます。
<?php echo $imanage->imgTag("abcdefg.jpeg", 0, 0) ?>

設定

Imanageアドオンでは保存先ディレクトリや、ランダムなファイル名生成のための関数を、設定で変更することができます。
addon/imanage/Config.php

class Imanage_Config implements Sabel_Config
{
  public function configure()
  {
    $images_dirname = "images";
    
    $pub_dir = RUN_BASE . DS . "public";
    
    $image_dir = DS . $images_dirname  . DS . "data";
    $thumbnail_dir = DS . $images_dirname  . DS . "thumbnail";
    
    return array(
      "base_dir"        => $pub_dir . DS . $images_dirname,
      "image_dir"       => $pub_dir . $image_dir,
      "thumbnail_dir"   => $pub_dir . $thumbnail_dir,
      "image_uri"       => str_replace(DS, "/", $image_dir),
      "thumbnail_uri"   => str_replace(DS, "/", $thumbnail_dir),
      "hash_func"       => "md5hash",
      "thumbnail_sizes" => array(),
    );
  }
}
  • base_dir - 画像保存ベースディレクトリ
  • image_dir - 元画像保存ディレクトリ
  • thumbnail_dir - サムネイル保存ディレクトリ
  • image_uri - 元画像表示ベースURL
  • thumbnail_uri - サムネイル画像表示ベースURL
  • hash_func - ファイル名生成ハッシュ関数
  • thumbnail_sizes - 作成可能サムネイルサイズ
例えば、大量の画像をアプリケーションを扱うためにmd5では衝突が不安な場合は、"hash_func" に "sha1hash" を指定すると良いでしょう。

"thumbnail_sizes" は作成可能なサムネイルサイズを固定するために使用します。デフォルトの未指定の状態では縦横1px単位で自由なサムネイルが作成でき便利ですが、例えば下記のようにリクエストされると開発者や運営者が意図しない大量のサムネイルが作成されてしまいます。
/images/thumbnail/90x90/a/b/abcdefg.jpeg
/images/thumbnail/91x91/a/b/abcdefg.jpeg
/images/thumbnail/92x92/a/b/abcdefg.jpeg
/images/thumbnail/93x93/a/b/abcdefg.jpeg
...
この問題を回避するために、"thumbnail_sizes" に有効なサムネイルサイズ(縦 x 横)を列挙します。
addon/imanage/Config.php

class Imanage_Config implements Sabel_Config
{
  public function configure()
  {
    ...
    
    return array(
      ...
      
      "thumbnail_sizes" => array("60x60", "90x90", "120x120"),
    );
  }
}