<div class="ec-role"> <div class="custom-heading"> <div class="custom-heading__row"> <img src="/html/user_data/ContentImg/siopanda.png" alt="Logo" class="custom-heading__logo"> <div class="custom-heading__text"> <span class="custom-heading__ja">{{ 'ギャラリー'|trans }}</span> <span class="custom-heading__en">{{ 'gallery'|trans }}</span> </div> </div> </div> <div style="text-align: center"> <a href="https://www.instagram.com/iseyabread/" target="_blank"><img src="{{ asset('/html/user_data/ContentImg/instagram-logo.png', 'user_data') }}" alt="お店の外観" style="width:120px;"></a> </div> <div class="ec-role"> <div class="ec-newItemRole" style="padding:10px 0;" > <div class="ec-newItemRole__list" id="gallery-container"> {# 大きめの範囲で連番生成し、JavaScriptで存在チェック #} {% for i in 1..10 %} <div class="ec-newItemRole__listItem gallery-item" data-image="Gallery-Img{{ i }}.jpg" style="display: none;"> <img src="/html/user_data/GalleryImg/Gallery-Img{{ i }}.jpg" alt="ギャラリー画像 {{ i }}" onload="this.parentElement.style.display='block';" onerror="this.parentElement.remove();"> </div> {% endfor %} </div> </div> </div></div><style> </style>