Cómo utilizar el campo Galería de Advanced Custom Fields

En este post mostraremos como utilizar el campo galería en nuestra web. lo primero que debemos hacer es crear nuestro Custom Post Type, luego creamos nuestro campos con Advanced Custom Fields y le asignamos el CPT que acabamos de crear, en un próximo post mostraremos como crear lo antes descrito.

Veamos el campo Galeria una interfaz simple e intuitiva para manejar una colección de imágenes. Se pueden añadir múltiples imágenes, editarlas y ordenarlas de una manera sencilla.

veamos una demostración:

Configuraciones

  • Minimun selection: la cantidad de imágenes mínima a subir. por defecto es 0.
  • Maximun selection: la cantidad máxima de imágenes a subir. por defecto es 0.
  • Preview Size: el tamaño que tendrá la imágen al ser editar. por defecto es thumbnail.

¿Cómo usar la galería en un template?

El campo galería retornará un array de imágenes. Cada imágen contiene su propio array con información como título, alt, descripción, url y más.

Verás por cada imágen algo como esto:

Array (
    [ID] => 2822
    [alt] => 
    [title] => Hot-Air-Balloons-2560x1600
     => 
    [description] => 
    [mime_type] => image/jpeg
    [type] => image
    [url] => http://acf5/wp-content/uploads/2014/06/Hot-Air-Balloons-2560x1600.jpg
    [width] => 2560
    [height] => 1600
    [sizes] => Array (
        [thumbnail] => http://acf5/wp-content/uploads/2014/06/Hot-Air-Balloons-2560x1600-150x150.jpg
        [thumbnail-width] => 150
        [thumbnail-height] => 150
        [medium] => http://acf5/wp-content/uploads/2014/06/Hot-Air-Balloons-2560x1600-300x187.jpg
        [medium-width] => 300
        [medium-height] => 187
        [large] => http://acf5/wp-content/uploads/2014/06/Hot-Air-Balloons-2560x1600-1024x640.jpg
        [large-width] => 604
        [large-height] => 377
        [post-thumbnail] => http://acf5/wp-content/uploads/2014/06/Hot-Air-Balloons-2560x1600-604x270.jpg
        [post-thumbnail-width] => 604
        [post-thumbnail-height] => 270
    )
)

Listar las imágenes de una manera básica

Este ejemplo muestra como recorrer el loop de los campos dela galería y mostrar un listado de ellas. Este ejemplo usa la función wp_get_attachment_image().

<?php $images = get_field('gallery'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $images ): ?>
    

    <ul>
        <?php foreach( $images as $image ): ?>
            
            <li>
                <?php echo wp_get_attachment_image( $image['ID'], $size ); ?>
            </li>

        <?php endforeach; ?>
    </ul>

<?php endif; ?>

Crear un Slider

Este ejemplo muestra como mostrar la galería usando Flexslider de Woothemes

<?php $images = get_field('gallery'); if( $images ): ?>
    

    <div id="slider" class="flexslider">
        
       <ul class="slides">
            <?php foreach( $images as $image ): ?>
               
             <li>
               <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                <?php echo $image['caption']; ?>
             </li>

            <?php endforeach; ?>
        </ul>
    </div>


     <div id="carousel" class="flexslider">
        

         <ul class="slides">
            <?php foreach( $images as $image ): ?>
                
           <li>
              <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
           </li>

            <?php endforeach; ?>
        </ul>

    </div>

<?php endif; ?

Crear una galería WordPress

El siguiente extracto de código utiliza unos parámetros extra en la función get_field().  además puedes incluir el efecto fancybox en tus imágenes con sólo añadir lo siguiente al shortcode:

link="file"

Una vez añadido esto, debes proceder a instalar el siguiente plugin  Easy Fancy Box.

Sólo queda usar  el shortcode de la galeria de la siguiente manera:

<?php $image_ids = get_field('gallery', false, false); 
$shortcode = '[' . 'gallery ids="' . implode(',', $image_ids) . '" link="file"]'; 
echo do_shortcode( $shortcode ); ?>

 

Leave a reply:

Your email address will not be published.

Site Footer