ver.1サポートサイト

一覧表で、画像型フィールドに登録した画像のオリジナル画像を表示

最終更新日:2020年11月20日

スパイラルの一覧表で画像型フィールドに登録した画像を表示する場合、初期状態ではサムネイル画像が表示されており、画像をクリックするとオリジナル画像が表示されます。
当ページでは、オリジナル画像を直接表示する方法をご案内いたします。

変更前の設定

サンプル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>

変更手順

  1. 一覧表のXSLソースにて、画像を表示している部分(<img>)を確認します。ここが変更対象です。
  2. サンプルXMLを表示し、画像の差し替えキーワードで検索すると、上記のサンプルXMLの部分を確認できます。
  3. XPathで属性の値を取得するのは、「要素/@属性」なので、オリジナル画像のURLを取得するのは、「usr_xxxxxxxx/@original」となります。
  4. XSLソースのimg要素のsrc属性の値を書き換えます。

変更後の設定

変更後のXSL

変更後のXSLは以下の通りです。

<img src="{usr_xxxxxxxx/@original}" alt="{usr_xxxxxxxx/@title}" title="{usr_xxxxxxxx/@title}" />

HTMLソース

ブラウザで一覧表のHTMLソースを表示した場合、変更後は以下の通りです。

<img src="オリジナル画像のパス" alt="画像ファイル名" title="画像ファイル名" />