0

Estou tentando exibir as imagens no carrousel Bootstrap com o while.

Consigo acessar o array com todas urls, mas não estou conseguindo inserir na tag img no while, tentei while com foreach para exibir as imagens mas não esta funcionando.

Já os indicadores estão exibindo corretamente mas com um indicador a mais, como faço pra não contar o 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>

Atualizado

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

Com ajuda do usuario Anderson Carlos Woss,

Corrigi a condicional para: enquanto $number ser < que $totalUrls, isso corrigiu o problema nos indicadores.

Deixei o while apenas nos indicadores, o foreach para exibir as imagens e consigo ver todas imagens lá se tiverem todas com a classe active na <div class="item active">

Como faço para deixar apenas 1 imagem com a classe active dentro do foreach?

Agradeço ajuda

3
  • 1
    Com o while e foreach, você estaria percorrendo a lista duas vezes, isso se o valor de $number estivesse correto, que não me parece. No primeiro while, você incrementa o valor de $number, então no segundo while, $number já chega com um valor superior à $totalUrls, não entrando no laço. Comece tentando tirar o segundo while.
    – Woss
    Commented 4/02/2017 às 14:06
  • Muito obrigada @AndersonCarlosWoss consegui resolver as repetições, atualizei minha pergunta, só falta deixa uma unica imagem com a classe "active"
    – Gislef
    Commented 4/02/2017 às 14:40
  • Obrigada @AndersonCarlosWoss resolvido, coloquei uma resposta
    – Gislef
    Commented 4/02/2017 às 15:49

2 Respostas 2

1

Apenas formalizando a resposta.

Dado o código:

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

Primeiro, começamos com a lista de indicadores. Quando for mesclar códigos PHP de controle com códigos HTML para marcação, uma maneira prática de se fazer, em alternativa ao utilizar os {} no while é utilizar as diretivas while: .. endwhile, desta forma:

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

Pois assim, caso seu código HTML seja muito extenso, fica claro qual é o bloco de código que está sendo fechado em endwhile. Apenas com } poderia ser qualquer bloco de contexto: for, while, function, class, etc.

Agora, na listas de imagens. Como disse no comentário, nesta parte você possui dois laços de iteração, while e foreach. O primeiro erro de lógica está aí, pois os dois iteram sobre a variável $urls e, desta forma, você estaria percorrendo a lista duas vezes, o que não parece ser proposital. O segundo erro de lógica está em utilizar a variável $number como controle no while, sem resetar seu valor. No laço para definir os indicadores, você incrementa o valor de $number de 0 até $totalUrls, permanecendo neste último valor, logo, na instrução while($number <= $totalUrls), o while seria executado apenas uma vez (o que explica o porque utilizou o foreach). Para melhorar o código nesse aspecto, basta utilizar apenas o 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>

Visto, agora, que deseja que apenas o primeiro item da lista esteja ativo, sua solução é funcional, porém redundante. Você repete muito código apenas para escrever active a mais. Uma forma de contornar isso é:

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

Perceba o código PHP onde estaria a classe active. Fiz o uso do operador ternário para definir se deve ser impresso aclasse active ou não. A lógica é a seguinte: se $i for zero, imprima active, se não, imprima nada. O valor de $i vem do laço foreach($urls as $i => $url), sendo o índice de cada url no vetor.

1
  • Muito obrigada Anderson, super didática sua resposta eu até tinha esquecido da existência do operador ternário, muito obrigada novamente
    – Gislef
    Commented 15/02/2017 às 2:00
0

Consegui resolver assim:

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

            }
        }
        ?>
1
  • marque a resposta Commented 14/02/2017 às 1:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .