画像のサムネイルを取得する(画像をリサイズする)

concrete5のファイルマネージャーにアップロードした画像の、サムネイル画像を取得する方法です。ページ属性にも「サムネイル」がありますが、ページのサムネイル画像ではなく、画像のサムネイルの取得についての解説です。用語が紛らわしいですが、ご注意ください。

画像のサムネイルの確認方法

ファイルマネージャーから確認したいファイルを探してメニューを開き、「設定」をクリックしてください。表示される画面内の詳細タブに、「サムネイル」の項目があります。

ファイルマネージャー / ファイルメニュー / 設定

サムネイルの鉛筆アイコンをクリックすると、作成されているサムネイル画像を一覧で確認することができます。

サムネイル画像

それぞれのサムネイル画像の「サムネイルを編集」ボタンをクリックすると、切り抜き位置を変更することもできます。

サムネイル画像を編集

サムネイル設定の確認方法

[管理画面→システムと設定→ファイル→サムネイル]画面にアクセスすると、システムに登録されているサムネイルサイズの設定を確認することができます。「ハンドル」はこのあと、各サイズのサムネイルを取得し表示するのに使います。

サムネイル

「タイプを追加」ボタンから、サムネイル設定を追加し、任意のサイズのサムネイル画像が作成されるようにできます。サムネイルタイプを追加しても、アップロード済の画像のサムネイルは、自動で作成されません。新しく追加したサムネイルを作成するには、ファイルマネージャーから「再スキャン」を実行してください。

再スキャン

サムネイル画像の取得方法

ハンドルが確認できたら、実際にサムネイル画像を取得してみましょう。下記はハンドルが「small」のサムネイル画像を取得する方法です。

コード例1:

$src = $f->getThumbnailURL('small');
echo \HtmlObject\Image::create($src)->alt('smallサイズサムネイル');

コード例1の出力結果は下記のようになります。

出力例1:

<img src="http://example.com/application/files/thumbnails/small/1814/2903/2262/subway.jpg" alt="smallサイズサムネイル">

コード例1の先頭に出てくる変数 $f は、File クラスのオブジェクトになります。ページ属性として指定されている場合は、次のように属性ハンドルを指定して、属性に設定された画像のオブジェクトを取得することができます。ページリストブロックのテンプレートで、ページ属性に設定されている画像のサムネイルを取得する場合は、次のように記述するべきでしょう。

コード例2:

<?php foreach ($pages as $page):

    // ページタイトルの取得
    $title = $th->entities($page->getCollectionName());

    // "thumbnail" というハンドルの属性の値を取得する
    $f = $page->getAttribute('thumbnail');
    // 属性に値がセットされているかどうか
    if ($f) {
        // "small" サイズの画像サムネイルを取得
        $src = $f->getThumbnailURL('small');
        // alt属性にページ名を指定して表示
        echo \HtmlObject\Image::create($src)->alt($title);
    }
<?php endforeach; ?>

サムネイルを使わないリサイズ

バージョン5.6までは画像ヘルパー( Loader::helper('image') )を用いて、ファイルマネージャーの画像を任意のサイズにリサイズして取得することができました。バージョン5.7でファイルの保存場所を外部サーバーに指定したりする機能が追加されましたが、画像ヘルパーはこの新機能に対応していません。そのため、画像ヘルパーはバージョン5.7でも後方互換性のために残されていますが(5.7.3.1時点)、非推奨としてアナウンスされており、将来的に削除される可能性があります。あらかじめサムネイルサイズを登録しておくのは不便ですが、画像ヘルパーではなく、上記の方法を使用するようにしてください。