画像を使ったメニュー

2011年02月14日 11:26

flyingjunk.NETのホームページ上にある仕事紹介用画像はこれまで単なる画像だったので、ボタンとして動作するようにWayfinderのスニペットコールに置き換えた。
テンプレートは&outerTplと&rowTplだけで、パラメータも&level=`1` &hideSubMenu=`TRUE`だけの簡単なもの。画像は<li>要素で括り、float:leftで配置。


画像の表示にはテンプレート変数を使用。
仕事の紹介用ページで使うテンプレートに画像用のテンプレート変数[*paletteimg*]を登録し、仕事ページの編集画面でそれぞれのページに応じた画像を指定する。


&rowTplの記述

<li><a href="[+wf.link+]" title="[+wf.description+]">[+paletteimg+]</li>



ここでしばらく悩む。
上のコードには<img src="~" />の記述がなく、テンプレート変数[+paletteimg+]だけ書かれている。

Wayfinderのスニペットコール内でテンプレート変数を使う場合[*テンプレート変数名*]ではなく[+テンプレート変数名+]と記述する。これは"almost Complete Guide~"で確認。

&rowTpl内に<img>要素を書かないのは、テンプレート変数の設定時にウィジェット(出力フィルタ)を"image"と設定しているため。
画像用として出力するように規定すると、当然<img>要素として出力すると判断されるようだ。

出力フィルタを空欄にしておくと&rowTplには<img src="[+テンプレート変数名" />と記述しなければならない。出力形式をHyperLinkにした場合なども同様に働くと思われる。

実はこのような動作をすることは「MODxでつくる! 最強のCMSサイト」のP282~283について書かれていて、そこも目を通していたのだが、単に読んだだけで全然理解できていなかったことが発覚。f(^_^;


出力フィルタをimageにした場合、alternate textなども設定できる。
ただしここで[*pagetitle*]などと指定しても、各ページ(flyingjunk.NETの場合は、仕事紹介のページ)のページタイトルを取得するわけではなく、実際にスニペットコールが書かれているページ(flyingjunk.NETの場合は、ホームページ)のタイトルを取得する。

つまり同じテンプレート変数を使って出力した画像には共通の代替テキストが割り当てられる。



さすがにそろそろ改訂版がほしい・・・。
スポンサーサイト


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://flyingjunk.blog25.fc2.com/tb.php/347-37cd1f3b
    この記事へのトラックバック


    最近の記事

    オンラインアルバム