Suporte » Desenvolvendo com WordPress » Galeria usando PHP

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

    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!

    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.