Galeria usando PHP

(@rlopes2)

Bom dia.

Estou construindo um site utilizando o wordpress, mas sou iniciante em php ainda e estou com uma dúvida, eu instalei o plugin Advanced Custom Field, e criei um custom post type chamado produto, e neste post coloquei um campo chamado galeria do advanced custom field, e implementei um slider do bootstrap para mostrar todas imagens desta galeria, porém só o primeiro item do slider precisa der a classe active, os outros não, e não consigo implementar algo em php, que faça uma leitura e quando for o primeiro item da galeria ele coloque a classe active
segue o código:


<?php 
  $posts_slides = new WP_Query(array(
  'post_type' => 'produto',
  'posts_per_page' => 9,
  'orderby' => 'rand'
));
while ($posts_slides -> have_posts()) : $posts_slides -> the_post();
?>
<div class="col-md-4 item-imagens_promocoes">
  <?php 
     $images = get_field('imagens-produtos');
       if( $images ): ?>
         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
             <?php foreach( $images as $image ): ?>
                 <div class="carousel-inner" role="listbox">
                    <div class="item active">
                       <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                      </div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
    </div>
<?php endforeach; ?>
  </div>
   <?php  endif; ?>
</div>
 <?php   endwhile; wp_reset_postdata(); ?>

Se alguém conseguir me ajuda, muito obrigado

Visualizando 2 respostas - 1 até 2 (de um total de 2)

Moderador

Felipe Elia

(@felipeelia)

7 anos, 2 meses atrás

Oi @rlopes2,

Você pode alcançar esse objetivo da seguinte forma:

– Depois de onde você testa se existem imagens if( $images ): você deverá criar uma variável que se alterará a cada iteração do foreach, isto é, depois do if você deve colocar $i = 0;
– Troque a linha
<div class="item active">
por
<div class="item<?php echo ( 0 == $i++ ) ? ' active' : ''; ?>">

Dessa forma o php testará se $i é igual a 0 e logo depois do teste irá somar um ao valor atual de $i. Da primeira vez $i realmente será 0 e, por isso, o elemento terá a classe active. Da segunda vez em diante $i já terá valor maior e, portanto, não terá a classe adicional.

Não esqueça de voltar para dizer se ficou com alguma dúvida e, se for o caso, marcar seu tópico como resolvido, ok? Boa sorte!

Criador do tópico

rlopes2

(@rlopes2)

7 anos, 2 meses atrás

Bom dia @felipeelia muito obrigado pela sua ajuda, acho que funcionou, porém ele ta retornando só uma imagem, não sei se tem algo errado no if será que consegue me ajudar?


<?php 
              $posts_slides = new WP_Query(array(
                'post_type' => 'produto',
                'posts_per_page' => 9,
                'orderby' => 'rand'
                   
            ));
              
            while ($posts_slides -> have_posts()) : $posts_slides -> the_post();
            ?>

        <div class="col-md-4 item-imagens_promocoes">
          <?php 

            $images = get_field('imagens-produtos');
            
            if( $images ): $i = 0;?>
              <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                
                    <?php foreach( $images as $image ): ?>

                      <div class="carousel-inner" role="listbox">
                          <div <div class="item<?php echo ( 0 == $i++ ) ? ' active' : ''; ?>">
                            <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                          </div>
                            <!-- Controls -->
                            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                              <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                              <span class="sr-only">Next</span>
                            </a>
                            </div>

                    <?php  endforeach; ?>
              
              </div>
            <?php endif; ?>
</div>
 <?php  endwhile; wp_reset_postdata(); ?>

Visualizando 2 respostas - 1 até 2 (de um total de 2)

O tópico ‘Galeria usando PHP’ está fechado para novas respostas.

Tags de tópico

Visualizações