一覧表で、画像型フィールドに登録した画像のオリジナル画像を表示
最終更新日:2023年03月08日
スパイラルの一覧表で画像型フィールドに登録した画像を表示する場合、初期状態ではサムネイル画像が表示されており、画像をクリックするとオリジナル画像が表示されます。
当ページでは、オリジナル画像を直接表示する方法をご案内いたします。
変更前の設定
サンプルXML
一覧表のソースデザイン画面にて、サンプルXMLは以下の通りです。
<usr_xxxxxxxx original="javascript:void('image-original-url')">
/img/web/table/table_sample.jpg
</usr_xxxxxxxx>元のXSL
一覧表の作成直後、ソースデザイン画面にて、XSLは以下の通りに設定されています。
<a href="{usr_xxxxxxxx/@original}" target="_self">
<xsl:if test="string(usr_xxxxxxxx) = ''">
<img src="{usr_xxxxxxxx}" alt="{usr_xxxxxxxx/@title}" title="{usr_xxxxxxxx/@title}" />
</xsl:if>
</a>HTMLソース
ブラウザで一覧表のHTMLソースを表示した場合、以下の通りです。
<a href="オリジナル画像のパス" target="_self">
<img src="サムネイル画像のパス" alt="画像ファイル名" title="画像ファイル名" />
</a>変更手順
- 一覧表のXSLソースにて、画像を表示している部分（<img>）を確認します。ここが変更対象です。
- サンプルXMLを表示し、画像の差し替えキーワードで検索すると、上記のサンプルXMLの部分を確認できます。
- XPathで属性の値を取得するのは、「要素/@属性」なので、オリジナル画像のURLを取得するのは、「usr_xxxxxxxx/@original」となります。
- XSLソースのimg要素のsrc属性の値を書き換えます。
変更後の設定
変更後のXSL
変更後のXSLは以下の通りです。
<img src="{usr_xxxxxxxx/@original}" alt="{usr_xxxxxxxx/@title}" title="{usr_xxxxxxxx/@title}" />HTMLソース
ブラウザで一覧表のHTMLソースを表示した場合、変更後は以下の通りです。
<img src="オリジナル画像のパス" alt="画像ファイル名" title="画像ファイル名" />