FuelPHPで外部ファイル・画像をAssetで読み込む

FuelPHP では Assetクラスを利用して外部ファイルや画像を読み込む。

1.ビューファイルについて

ビューファイルは html が記述されたファイルのことで、MVCにおけるインターフェース担当。
APPPATH/views/ に配置し、コントローラから呼び出される(FuelPHPのコントローラからビューへ変数を渡す)。

ただ、ビューファイルは、それ単体で利用されるわけでなく、画像やCSS,JavaScriptといった外部ファイルも読み込まれる。

しかし、ビューは画像やCSS, JavaScriptと同じディレクトリに配置することはできない。
ビュー内に<img src=”./title.png” />とあり、ビューの表示URLがexample/top の場合、ブラウザはこの”./title.png”という相対パスをexample/title.pngにリクエストを送信するため。

FuelPHPでは、この読み込み部分に Assetクラスを使う。

2.Assetクラスで外部ファイル読み込み

Assetクラスは、pupblic/assets/ディレクトリ内にある画像やCSS, Jvascriptを、ページに読み込むための「タグ」を生成する。

画像を読み込みたい場合は Asset::img()メソッドで使う(画像はassets/img/ におく)。
画像ファイル名を第1引数として渡し、第2引数に設定したい属性を配列で渡す。

<?php echo Asset::img(‘title.png’、array(‘width’=>’179′,’height’=>’45’,’alt’=>’タイトル画像’)); ?>

こんなコードが生成される。

<img src=”http://example.com/assets/img/title.png” width=”179″ height=”45″ alt=>”タイトル画像” />

cssを読み込みたい場合はAsset::css()メソッドを使う(CSS は assets/css/ におく)。

<?php echo Asset::css(‘bootstrap.css’); ?>

こんなコードが生成される。

<link type=”text/css” rel=”stylesheet” href=”http://example.com/assets/css/bootstrap.css?1384334227″ />

javascriptの場合は、Asset::js()メソッドを使う(JavaScriptは assets/js/ におく)。使い方はcssと同じ。

MVC のビュー内に相対URL を書くのは難しい。
同様に<a>タグ(アンカータグ)も注意する。それは次回

参考

Asset 設定 – クラス – FuelPHP ドキュメント

Asset 使い方 – クラス – FuelPHP ドキュメント

コメント

タイトルとURLをコピーしました