While on dynamic carousel

Question

I am trying to display the images in the Bootstrap Carrousel with while.

I can access the array with all urls, but I’m not able to insert the img tag in while, I tried while with foreach to display the images but it’s not working.

Already the indicators are displaying correctly but with an extra indicator, as I do not count the 0?

<?php
            $this_post_id = get_the_ID();
            $urls =get_post_meta($this_post_id,'my-images', true);
            $totalUrls = count($urls);//conta urls no array
            $number = 0; 
        ?>      

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->

  <ol class="carousel-indicators">
    <?php while($number <= $totalUrls){ ?>
    <li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
    <?php } ?>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <?php 
  while($number <= $totalUrls){
     foreach($urls as $url){
        ?>
            <div class="item active"> // como deixar classe active apenas na imagem ativa
      <img src="<?php echo $url;?>"  class="img-responsive" />
      <div class="carousel-caption">
        ...
      </div>
    </div>
     <?php  $number++ 
       } //end foreach
   } //end while
?>
 </div>

Updated

<?php
            $this_post_id = get_the_ID();
            $urls =get_post_meta($this_post_id,'my-image-for-post', true);
            $totalUrls = count($urls);//count urls in array
            $number = 0; 

        ?>      


  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->

  <ol class="carousel-indicators">
    <?php while($number < $totalUrls){ ?>
    <li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
    <?php } ?>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <?php foreach($urls as $url){ ?>

    <div class="item active">
      <img src="<?php echo $url;?>"  class="img-responsive" />
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <?php } ?>

With the help of user Anderson Carlos Woss,

Fixed the conditional for: while $number be < that $totalUrls, that fixed the problem in the indicators.

I left the while only in the indicators, the foreach to display the images and I can see all pictures there if they have all with the class active in <div class="item active">

How do I leave only 1 image with the active class inside the foreach?

I appreciate help

Answer 1

_{Just formalizing the answer.}

Given the code:

<?php
    $this_post_id = get_the_ID();
    $urls =get_post_meta($this_post_id,'my-images', true);
    $totalUrls = count($urls);
    $number = 0; 
?>      

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <?php while($number <= $totalUrls){ ?>
        <li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
      <?php } ?>
    </ol>

    <div class="carousel-inner" role="listbox">
      <?php 
          while($number <= $totalUrls){
              foreach($urls as $url){
      ?>
        <div class="item active">
            <img src="<?php echo $url;?>"  class="img-responsive" />
            <div class="carousel-caption">
                ...
            </div>
        </div>
      <?php 
                  $number++ 
              }
          }
       ?>
     </div>
 </div>

First, we start with the list of indicators. When merging control PHP code with HTML code for markup, a practical way to do it, alternatively when using {} in the while is to use the Directives while: .. endwhile, in this way:

<ol class="carousel-indicators">
  <?php while($number <= $totalUrls): ?>
    <li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
  <?php endwhile; ?>
</ol>

So, if your HTML code is too long, it is clear which block of code is being closed in endwhile. Only with } could be any context block: for, while, function, class, etc..

Now, in the image lists. As I said in the comment, in this part you have two iteration loops, while and foreach. The first logic error is there, because the two iterate on the variable $urls and in this way you would be going through the list twice, which doesn’t seem to be purposeful. The second logic error is in using the variable $number as control in while, without reset its value. In the loop to set the indicators, you increase the value of $number from 0 to $totalUrls, remaining at this latter value, hence in the instruction while($number <= $totalUrls), the while would be executed only once (which explains why you used the foreach). To improve the code in this respect, just use the foreach:

<div class="carousel-inner" role="listbox">
  <?php foreach($urls as $url): ?>
    <div class="item active">
        <img src="<?php echo $url;?>"  class="img-responsive" />
        <div class="carousel-caption">
            ...
        </div>
    </div>
  <?php endforeach; ?>
</div>

Since you now want only the first item on the list to be active, your solution is functional but redundant. You repeat too much code just to write active the more. A way around this is:

<div class="carousel-inner" role="listbox">
  <?php foreach($urls as $i => $url): ?>
    <div class="item <?php echo ($i == 0)? "active" : ""; ?>">
        <img src="<?php echo $url;?>"  class="img-responsive" />
        <div class="carousel-caption">
            ...
        </div>
    </div>
  <?php endforeach; ?>
</div>

Notice the PHP code where the class would be active. I made the use of ternary operator to define whether it should be printed aclasse active or not. The logic is as follows: if $i for zero, print active, if not, print nothing. The value of $i comes from the loop foreach($urls as $i => $url), being the index of each url in the vector.

Answer 2

I managed to sort it out like this:

<?php
            $this_post_id = get_the_ID();
            $urls =get_post_meta($this_post_id,'my-image-for-post', true);
            $totalUrls = count($urls);//count urls in array
            $number = 0; 
            $initUrls = 0;

        ?>      


  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->

  <ol class="carousel-indicators">
    <?php while($number < $totalUrls){ ?>
    <li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
    <?php } ?>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <?php 

            while($initUrls < $totalUrls){
                foreach($urls as $url){
                if ($initUrls++ === 0) {
    ?>
                <div class="item active">
              <img src="<?php echo $url;?>"  class="img-responsive" />
              <div class="carousel-caption">
                ...
              </div>
            </div>  
        <?php }else{ ?>
            <div class="item">
              <img src="<?php echo $url;?>"  class="img-responsive" />
              <div class="carousel-caption">
                ...
              </div>
            </div>
        <?php   
            }

            }
        }
        ?>