以下のテンプレートにて
template/default/Product/detail.twig
商品画像が1枚目が大きく、その他の画像が下に数枚段になって表示されているのを1枚目の画像だけの表示にしたいのですが、どのようにすれば良いか教えていただけませんでしょうか
初期状態:
<!-- ▼item_detail▼ -->
<div id="item_detail">
<div id="detail_wrap" class="row">
<!--★画像★-->
<div id="item_photo_area" class="col-sm-6">
<div id="detail_image_box__slides" class="slides">
{% if Product.ProductImage|length > 0 %}
{% for ProductImage in Product.ProductImage %}
<div id="detail_image_box__item--{{ loop.index }}"><img src="{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}"/></div>
{% endfor %}
{% else %}
<div id="detail_image_box__item"><img src="{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"/></div>
{% endif %}
</div>
</div>
これを、以下の赤い部分をどのように1枚目の指定だけすればよいかがわかりませんでした。
グレーの部分は排除を考えています
<!-- ▼item_detail▼ -->
<div id="item_detail">
<div id="detail_wrap" class="row">
<!--★画像★-->
<div id="item_photo_area" class="col-sm-6">
<div id="detail_image_box__slides" class="slides">
{% if Product.ProductImage|length > 0 %}
{% for ProductImage in Product.ProductImage %}
<div id="detail_image_box__item--{{ loop.index }}"><img src="{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}"/></div>
{% endfor %}
{% else %}
<div id="detail_image_box__item"><img src="{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"/></div>
{% endif %}
</div>
</div>
EC-CUBE 3.0.10
DBサーバー MySQL 5.5.45
WEBサーバー Apache
PHP 5.6.22
----------------