While on dynamic carousel

0

I'm trying to display the images in the Bootstrap carousel with the while.

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

Already the indicators are displaying correctly but with one more indicator, how do I 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,

I fixed the conditional for: while $ number is < than $ totalUrls, this fixed the problem in the pointers.

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

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

Thank you for your help

    
asked by anonymous 04.02.2017 / 14:47

2 answers

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 begin with the list of indicators. When merging PHP code tags with HTML tags for tagging, a practical way to do this instead of using {} in while is to use the while: .. endwhile directives, like this:

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

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

Now, in the list of images. As I said in the comment, in this part you have two iteration loops, while and foreach . The first logical error is there, because the two are about the variable $urls and, in this way, you would be traversing the list twice, which does not seem to be purposeful. The second logic error is to use the variable $number as the control in while , without reset its value. In the loop to set the indicators, you increment the value of $number from 0 to $totalUrls , remaining in this last value, so in the while($number <= $totalUrls) statement, the while would be executed only once (which explains why used foreach ). To improve the code in this respect, just use 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 in the list to be active, your solution is functional but redundant. You repeat a lot of code just to write active more. One 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 active class would be. I made use of the ternary operator to define whether to print aclasse active or not. The logic is as follows: if $i is zero, print active , otherwise print nothing. The value of $i comes from the foreach($urls as $i => $url) loop, the index of each url in the vector.

    
07.02.2017 / 12:33
0

I was able to solve 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   
            }

            }
        }
        ?>
    
04.02.2017 / 16:37