CODEWITHSUNDEEP
phpjavascriptjqueryajaxwordpress
codek
codek

Reputation: 343

Multiple divs with a repeater field of image

i´m trying to display multiple divs with the images of a repeater field (ACF plugins).

For example Div 1 with image 1 - Div 2 with image 2 - etc...

with this markup:

<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>

So, repeating it thru the html I displayed all the images, but now i´m integratin it in the wordpress and I have the following problem:

I´m using the repeater field to get all the images, so with this code:

<?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. ?>

I get the images of the repeater but it displays all into the same div, it doesn´t create a new div id=¨project". So it shows like this:

And the markup created on the page it´s like all the images are into the same 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>

What i´m doing wrong?

Upvotes: 0

Views: 814

Answers (1)

Udan
Udan

Reputation: 5609

<?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
           foreach($slides as $s) {  
                  echo '<div id="project_slider" class="item">';     
                  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. ?>

Upvotes: 1

Related Questions