リピーターフィールド(ACFプラグイン)の画像で複数のdivを表示しようとしています。
たとえば、画像 1 の Div 1 - 画像 2 の Div 2 - など...
このマークアップで:
<div id="project" class="item">
<a href="#">
<img src="img/project1.jpg" alt="project1" width="240" height="173">
</a>
<div class="art_title">
<p>SWEET LIFE #1</p>
</div>
<div class="mask"></div>
</div>
だから、私はすべての画像を表示したHTMLを介してそれを繰り返しましたが、今はそれをワードプレスに統合しており、次の問題があります:
リピーター フィールドを使用してすべての画像を取得しているので、次のコードを使用します。
<?php $slides = get_field('project_thumbnails');
// Grabs the array
// Check if there is any data in the array before looping
if($slides) {
//we need to close this div
echo '<div id="project_slider" class="item">';
foreach($slides as $s) {
echo '<div class="aimagediv" >'; //adding the start tag of the div
echo '<a href="#">';
echo '<img src="'.$s['project_thumb'].'" alt="" />';
echo '</a>';
echo '</div>'; //CLOSING THE DIV JUST ADDED
}
echo '<div class="art_title">';
echo '<p>SWEET LIFE2</p>';
echo '</div>';
echo '<div class="mask">';
echo '</div>';
echo '</div>'; //closing the first div,not sure if you want this, its optional
}
?> <?php endwhile; // end of the loop. ?>
リピーターの画像を取得しますが、すべて同じ div に表示され、新しい div id=¨project は作成されません。したがって、次のように表示されます。
そして、ページ上に作成されたマークアップは、すべての画像が同じ div にあるようです。
<div id="project" class="item">
<a href="#">
<img src="img/project1.jpg" alt="project1" width="240" height="173">
<img src="img/project1.jpg" alt="project1" width="240" height="173">
</a>
<div class="art_title">
<p>SWEET LIFE #1</p>
</div>
<div class="mask"></div>
</div>
私は何を間違っていますか?