画像の表示をカスタマイズする

このドキュメントは、テーマやブロックの作者のための、\Concrete\Core\Html\Image クラスの使い方の解説です。サイト編集者の方は、画像ブロックの使い方、及び記事ブロックの使い方のページをご覧ください。

さて、バージョン5.7からは、concrete5がレスポンシブ画像に対応したことで、画像を画面に出力する際に、source タグを含んだレスポンシブな picture タグか、もしくは通常の img タグのどちらかが使われ、どちらが使われるかはテーマによって異なるという仕様に変わりました。そのため、自動的にどちらを出力すべきかを判断し表示する汎用的な手段が用意されました。それが、\Concrete\Core\Html\Image クラスです。

\Concrete\Core\Html\Image クラスは画像ブロック、画像スライダーブロックページリストブロック紹介ブロックのテンプレートで使用されています。また、記事ブロックの表示にも内部的に使われています。

基本的な使い方

それでは、\Concrete\Core\Html\Image クラスの基本的な使い方を下記に示します。

コード例1:

$tag = Core::make('html/image', array($f))->getTag();
echo $tag;

変数 $f には、File クラスのオブジェクトが入ります。ページリストブロックのテンプレートでは $thumbnail という変数名で使われていますが、中身は同じ File クラスのオブジェクトです。ファイルIDを指定して File オブジェクトを取得するには、下記のように書くことができます。

コード例2:

$fID = 15;
$f = File::getByID($fID);

取得した画像タグを出力するには、単に echo 文で表示できます。レスポンシブ画像をサポートしたテーマでの、コード例1の出力結果は下記のようになります。

出力例1:

<picture><source srcset="http://example.com/application/files/thumbnails/large/1814/2903/2262/subway.jpg" media="(min-width: 900px)"><source srcset="http://example.com/application/files/thumbnails/medium/1814/2903/2262/subway.jpg" media="(min-width: 768px)"><source srcset="http://example.com/application/files/thumbnails/small/1814/2903/2262/subway.jpg"><img src="http://example.com/application/files/thumbnails/small/1814/2903/2262/subway.jpg" alt="#"></picture>

また、レスポンシブ画像をサポートしていないテーマでの、コード例1の出力結果は、次のようになります。

出力例2:

<img src="/application/files/1814/2903/2262/subway.jpg" alt="subway.jpg" width="1600" height="1067">

コード例1では単純に画像のURLのみが出力されていますが、さらに alt や title、class 属性を指定したい場合もあります。その場合は、次のように記述することで追加することができます。

コード例3:

$tag = Core::make('html/image', array($f))->getTag();
$tag->alt('altテキスト');
$tag->title('titleテキスト');
$tag->addClass('example class');
echo $tag;

テーマがレスポンシブ画像をサポートしている場合の、コード例3の出力結果です。

出力例3:

<picture><source srcset="http://example.com/application/files/thumbnails/large/1814/2903/2262/subway.jpg" media="(min-width: 900px)" alt="altテキスト" title="titleテキスト" class="example class"><source srcset="http://example.com/application/files/thumbnails/medium/1814/2903/2262/subway.jpg" media="(min-width: 768px)" alt="altテキスト" title="titleテキスト" class="example class"><source srcset="http://example.com/application/files/thumbnails/small/1814/2903/2262/subway.jpg" alt="altテキスト" title="titleテキスト" class="example class"><img src="http://example.com/application/files/thumbnails/small/1814/2903/2262/subway.jpg" alt="altテキスト" title="titleテキスト" class="example class"></picture>

同じく、テーマがレスポンシブ画像をサポートしていない場合のコード例3の出力結果です。

出力例4:

<img src="/application/files/1814/2903/2262/subway.jpg" alt="altテキスト" width="1600" height="1067" title="titleテキスト" class="example class">

属性を削除したい場合は、null を代入することで消すことができます。

コード例4:

$tag = Core::make('html/image', array($f))->getTag();
$tag->width = null;
$tag->height = null;
echo $tag;

出力例5:

<img src="/application/files/1814/2903/2262/subway.jpg" alt="subway.jpg">

picture タグを使用するかどうかを指定する

場合によっては、picture タグを使用したくない場合もあると思います。下記のように、配列で2つめの引数に false を渡すことで、picture タグの使用を無効にすることができます。逆に、true にすれば picture タグの使用を強制することもできます。

コード例5:

$tag = Core::make('html/image', array($f, false))->getTag();