一覧画面でのサムネイル画像表示

一覧画面へのサムネイル画像の表示について。 画面表示についてはvmファイルに記述する。詳細画面に関する画面表示のためajax-test-detail.vmファイルに下記コードを記述。他のテンプレートに習い、<td>タグで全体を囲う。

<td><a href="$!result.Detail.Url"><img src="https://hacknote.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif" width="200" height="300" /></a></td>

<a href="$!result.Detail.Url">

の部分はHTMLを心得ているならばお馴染み、リンクである。HTMLに馴染みがない人のためにも解説を入れると、このリンクが実装されていることによりタグで囲われている範囲をクリックするとリンク先へジャンプする。なお、通常http://から始まるURLだが今回はテンプレートを記述しているため$!result.Detail.Urlとなっている。

src="http://capture.heartrails.com/free?$!result.Detail.Url

これは画像の場所を示すsrc属性で今回のサムネイル画像は http://capture.heartrails.com/ というところでリンク先URLを利用したサムネイルを作成しているため、URLの前半部分はhttp://capture.heartrails.com/free?で固定にしている。後半部分はURLによって作成する画像を変えたいのでテンプレートの$!result.Detail.Urlを使用した。そうすることによりどんなURLを使用してもhttp://capture.heartrails.com/がURLに対応したサムネイルを作成し、表示してくれる。 今回は画像を表示させるために必要なhref属性とsrc属性、width、heightのみを属性値として指定した。通常のHTMLタグで画像を挿入し、テンプレートで画像の生成を動的にしていることに注目したい。