はじめまして。
初心者ですが、何卒よろしくお願いいたします。

ご質問内容ですが、

例えば、
管理画面で登録した商品画像が4枚あったとしまして、
それぞれの画像をピンポイントで呼び出すような記述方法はありますでしょうか？

初期のテンプレート【detail.twig】では、
スライダーで表示している画像箇所では、

{% if Product.ProductImage|length > 0 %}
{% for ProductImage in Product.ProductImage %}
<div><img src="{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}"/></div>
{% endfor %}

これを、
上記のようなループ処理ではなく、

<img id="zoom1" src="{{ 1番目に登録した画像 }}" data-zoom-image="{{ 2番目に登録した画像 }}">
<img id="zoom2" src="{{ 3番目に登録した画像 }}" data-zoom-image="{{ 4番目に登録した画像 }}">

のように、登録した画像をナンバリング？ID？などで指定が出来て、
ピンポイントで画像を指定表示する事は出来ないのかなと思いまして。
（いろいろ調べてはみたのですが、わかりませんでした。）

上記のイメージは、２種類の画像がぞれぞれ大小ありまして、
小の画像を最初に表示していて、画像にマウスオーバーするとdata-zoom-imageで呼び出される大の画像を表示するイメージです。
※アマゾンの商品にマウスオーバーすると、拡大画像が表示されるイメージ。
（登録画像は４枚ですが、画面上に表示される画像は２種類）

ご教授いただけますと幸いです。

以上、
よろしくお願いいたします。

noraneko 様

引用：

インデックスで指定するのであれば、下記のような感じで指定できると思います。

----------------

karinさま

ご回答いただき、ありがとうございます。
教えて頂いた内容で、指定の画像を表示出来ました！

{% if Product.ProductImage|length > 0 %}
<li class="thum_bpc"><img id="zoom1" src="{{ app.config.image_save_urlpath }}/{{Product.ProductImage[0]|no_image_product}}" width="100%" data-zoom-image="{{ app.config.image_save_urlpath }}/{{Product.ProductImage[2]}}"></li>
<li class="thum_bpc"><img id="zoom2" src="{{ app.config.image_save_urlpath }}/{{Product.ProductImage[1]|no_image_product}}" width="100%" data-zoom-image="{{ app.config.image_save_urlpath }}/{{Product.ProductImage[3]}}"></li>
{% else %}
<li class="thum_bpc"><img src="{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}" width="100%" ></li>
{% endif %}

「|no_image_product」はそのまま入れておいて良いのかわかりませんでしたが、
上記で希望通りの見た目で動作しました。

本当にありがとうございました。

//対応状況を解決済みにしたのですが反映されませんでした。

noraneko 様

「|no_image_product」はたしか左辺で指定した画像ファイルが空だった場合に代替画像を表示する為のものだったと思います。

----------------

karinさま

引用：

なるほどですね。
では、そのまま入れていて問題ないと言う事ですね。

ご教授、ありがとうございました！

お礼までにて失礼いたします。