Campo Galería ACF: Guía de uso y visualización

El campo Galería ACF es un tipo de campo del plugin Advanced Custom Fields (ACF). El campo Galería ACF le permite seleccionar múltiples imágenes para un único campo desde la Biblioteca Multimedia de WordPress (a diferencia del campo Imagen ACF, que sólo admite una única imagen). Los desarrolladores suelen utilizarlo para todo tipo de galerías, o cuando necesitan mostrar un conjunto personalizado de imágenes en una página.

Una limitación importante es la extensión del archivo. Sólo puedes subir archivos con las extensiones permitidas. Para imágenes se permiten .jpg, .jpeg, .png, .gif, y .ico. Puede encontrar la lista de extensiones permitidas para todos los tipos de archivo en la página relacionada de wordpress.org. Si quieres permitir subir por ejemplo .svg, tendrás que usar ganchos especiales.

Por lo tanto, si desea conocer los nombres de los ganchos para añadir otra extensión de imagen que la indicada anteriormente, le proporcionamos un fragmento de código que permite cargar .svg en su sitio web. Puede modificarlo para su extensión de destino o utilizarlo tal cual para .svg. El código puede añadirse a su functions.php.

<?php
         add_filter('upload_mimes', function ($mimes) {
            $mimes['svg'] = 'image/svg+xml';

            return $mimes;
        });

        add_filter('wp_check_filetype_and_ext', function ($data, $file, $filename, $mimes) {
            $filetype = wp_check_filetype($filename, $mimes);

            return [
                'ext' => $filetype['ext'],
                'type' => $filetype['type'],
                'proper_filename' => $data['proper_filename']
            ];
        }, 10, 4);

El campo Galería ACF tiene 3 formatos de retorno diferentes: Matriz de imágenes, URL de imagen e ID de imagen. Que es exactamente igual que el campo Imagen, pero la respuesta es siempre un array. Con un array, los elementos tienen un tipo relacionado con el Formato de Retorno elegido. Esto no afecta al aspecto del campo ni a las opciones para el administrador del sitio. Porque el Formato de Retorno de la Galería controla los datos que se obtienen en el código. Nos referimos aquí a cuando se solicita el campo Galería ACF a la base de datos de WordPress mediante la función get_field.

Nuestra sugerencia sería utilizar la opción 'Image ID', ya que es la opción preferida con el mejor rendimiento. Evite utilizar la opción "URL de la imagen", a menos que la necesite por una razón específica. Ya que no le permite recibir ningún detalle sobre la imagen, sólo la URL, que no es suficiente en la mayoría de los casos.

El campo Galería ACF actúa exactamente igual que el campo Imagen ACF , con una diferencia importante, almacena una matriz de IDs de imagen en el Meta Post de la página o elemento del post, cuando el campo Imagen almacena sólo un ID de imagen.

De este modo, el campo Galería ACF funciona como mediador entre la Mediateca y usted. Proporciona una interfaz de usuario intuitiva para elegir varias imágenes de la biblioteca multimedia. Pero en realidad no almacena las imágenes por separado. Utiliza una especie de marca para "adjuntar" o "relacionar" las imágenes (o archivos adjuntos, si lo prefiere) de la biblioteca multimedia con la página o la entrada.

Ahora, le mostraré cómo mostrar un campo Galería ACF utilizando un shortcode.

Podemos solucionarlo utilizando los famosos shortcodes de WordPress. Tienen el mismo aspecto, también tienen palabras en inglés entre corchetes: [some-name]. Además, pueden aceptar "argumentos" y entre bastidores WordPress asocia cada shortcode con una función PHP.

Hoy no es necesario codificar, lo que significa que tampoco escribiremos ninguna función PHP. En su lugar, utilizaremos un gran plugin gratuito, llamado ACF Views. Proporciona la funcionalidad para mostrar un campo de Galería ACF utilizando shortcodes auto-generados.

El plugin soporta todos los campos ACF y también permite mostrar entradas por defecto y entradas personalizadas en las páginas. Pero por ahora nos centraremos en el campo Galería ACF. Lea cómo mostrar campos ACF sin codificación para conocer todos los beneficios del enfoque shortcode.

A continuación adjuntamos un vídeo tutorial que muestra cómo mostrar los campos ACF en una sola página utilizando el método shortcode. El vídeo es común para todos los tipos de campo ACF. Más tutoriales en vídeo en el canal oficial de YouTube.

Pero no dude en saltarse el vídeo, ya que a continuación le ofrecemos una guía completa paso a paso exactamente para el campo Galería ACF.

Para seguir la guía tendrá que instalar el plugin ACF Views en su sitio web WordPress, no olvide activarlo. También necesitará el plugin ACF (gratuito) instalado y activo. A continuación, continúe con los siguientes pasos.

Tan pronto como haya activado el plugin ACF Views, aparecerá una nueva pestaña en su menú de administración, llamada "ACF Views", haga clic en ella.

Haga clic en el botón "Añadir nuevo" para crear una Vista.

Nota: El término "Vista" es el nombre dado al Post Type especial que proporciona el plugin. Cada Vistatiene asignada una lista de campos ACF, por lo que es posible crear muchas Vistas que muestren diferentes campos (o un conjunto de campos) para diferentes entradas/páginas.

Nombra tu Vista, debe ser corto y descriptivo ya que este es también el nombre que se mostrará en la Lista de Vistaspara que sea más fácil de encontrar. Hemos llamado a nuestra Vista "Galería de páginas".

Al asignar nuevos campos en su Vista Haga clic en el botón "Añadir campo" y seleccione su "Grupo" en el desplegable. En mi caso, el grupo se llama "Campos de página". Ahora selecciona el Campo de destino en el desplegable, nosotros hemos seleccionado "Galería de páginas".

Nota: El tipo de campo se muestra entre paréntesis para facilitar su identificación. Así podrá conocer fácilmente el tipo de cualquier campo del desplegable.

En este caso, debería ver "(galería)". Continúa seleccionando un "Tamaño de imagen" en el desplegable, nosotros hemos elegido "Completa".

Si utilizas la versión Pro del plugin, también dispondrás de las opciones Masonry y Lightbox. Vea la captura de pantalla a continuación.

Cada Vistaadmite una cantidad ilimitada de campos ACF, pero en nuestro caso, sólo asignaremos un único campo.

Haga clic en el botón "Publicar" para guardar y publicar su Vista. Cuando su Vistaesté publicada notará que los Códigos Cortos fueron generados y están disponibles en un bloque a la derecha de su Vistapantalla de edición. Cada Vistatiene su propio shortcode con un ID único (la estructura del shortcode es la misma para todas las Vistas, pero los argumentos son únicos).

[acf_views view-id="xxxx" name="x"]

Pulse el botón 'Copiar al portapapeles' para el primer shortcode.

Ya casi hemos terminado, ahora que todo está preparado estamos listos para mostrar el campo Galería ACF.

Visite su página de destino que tiene el campo Galería ACF, (asegúrese de adjuntar algunas imágenes), a continuación, pegue el código corto copiado en cualquier lugar que desee en el contenido de la página. Puedes pegar el shortcode utilizando el editor de Gutenberg, haz clic en el botón más y elige el bloque "Shortcode" de la lista. Pega tu shortcode en el bloque y haz clic en el botón "Actualizar" para guardar tu publicación/página.

Abra la página para ver el resultado, en el caso de que todo se haya hecho correctamente debería ver todas las imágenes adjuntas del campo Galería ACF mostradas.

En caso de que no veas tu galería, entonces tendrás que volver atrás y editar la página. Confirme que ha adjuntado algunas imágenes al campo Galería ACF y, a continuación, vuelva a cargar la página. Si por alguna razón sigue sin ver nada, entonces vuelva a editar su Vista y confirme que ha seleccionado el campo correcto "Grupo" de la lista.

Para mostrar el campo Galería necesitamos convertir las imágenes seleccionadas del campo en etiquetas img.

El código será diferente dependiendo del Tipo de Retorno seleccionado. A continuación proporcionamos ejemplos, que le ayudarán a crear la salida. Pero tenga en cuenta que para convertirlo en una galería interactiva tendrá que escribir su propio código CSS/JavaScript.

1. Código PHP para mostrar el campo Galería con el "ID" Formato de retorno:

<?php

// don't forget to replace 'gallery' with your field name
$images = get_field('gallery');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';
if ($images) {
    foreach ($images as $imageId) {
        echo wp_get_attachment_image($imageId, $size);
    }
}

2. Código PHP para mostrar el campo Galería con el "Array" Formato de retorno:

<?php

// don't forget to replace 'gallery' with your field name
$images = get_field('gallery');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';
if ($images) {
    foreach ($images as $imageData) {
        // displays the image. Each %s in the string will be replaced with the related argument
        printf("<img src='%s' alt='%s'>",
            esc_url($imageData['sizes'][$size]), esc_attr($imageData['alt']));
    }
}

3. Código PHP para mostrar el campo Galería con la "URL" Formato de retorno:

<?php

// don't forget to replace 'gallery' with your field name
$images = get_field('gallery');
if ($images) {
    foreach ($images as $imageURL) {
        // displays the image. Each %s in the string will be replaced with the related argument
        printf("<img src='%s'>",
            esc_url($imageURL));
    }
}

Con el formato de retorno "URL" no podemos controlar el tamaño de la imagen y no podemos obtener ninguna información adicional aparte de la URL. Debe evitar esta opción, es mejor elegir siempre el Formato de Retorno "ID".

Para obtener más detalles, puede ver el vídeo que figura a continuación y leer el artículo oficial de la ACF.

Le hemos mostrado cómo utilizar el campo Galería ACF, sus opciones y dos formas de mostrarlo. Así que ahora puede utilizar fácilmente el campo en cualquier lugar.

No olvide que una Vista en el plugin ACF Views soporta todos los tipos de campo y puede dar estilo a la salida añadiendo algunas reglas CSS dentro de la Vista (vea el campo de código CSS en la pestaña "Avanzado"). Lo bueno de esto es que el CSS sólo se carga en las páginas en las que se utiliza el shortcode.

En la misma pestaña, puedes añadir código JS, que también es súper útil como en el caso de las galerías. Con la versión Básica, tendrás que usar tu propio CSS (y probablemente JavaScript) para convertir el aspecto por defecto en una galería interactiva. Con la versión Pro, las opciones Masonry y Lightbox estarán disponibles desde el principio, es decir, sin codificación alguna.

Esperamos que este artículo le haya resultado útil. Para obtener más información sobre el plugin ACF Views, visite el sitio web oficial.