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

El tipo de campo Imagen es uno de los muchos tipos de campo posibles en el plugin Advanced Custom Fields (ACF). El campo Imagen le permite seleccionar cualquier imagen de la biblioteca multimedia de WordPress o subir una nueva.

Aunque las Entradas y Páginas de WordPress tienen incorporado un campo de Imagen Destacada, este campo sólo permite una única imagen para toda la entrada/página, lo cual es limitante. Con los campos de imagen ACF puede "adjuntar" varias imágenes a su entrada/página o incluso a la página de opciones.

Pero tenga en cuenta, que un campo Imagen permite seleccionar sólo una imagen. Así que para añadir una nueva imagen a su página necesita crear un nuevo campo. Si desea seleccionar y almacenar varias imágenes en un campo, utilice el campo Galería ACF, que está diseñado para ello.

Otra 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 related wordpress.org. Si quieres permitir subir por ejemplo .svg, tendrás que usar ganchos especiales.

No hay forma de cargar archivos que no sean imágenes en el campo Imagen del ACF. Por ejemplo, no puede cargar .doc, o .pdf ni siquiera con los ganchos. Para ello, debe utilizar el campo Archivo ACF, que está diseñado para ello.

Por lo tanto, si desea conocer los nombres de gancho para añadir otra extensión de imagen que la enumerada anteriormente, le proporcionamos un fragmento de código, que permite .svg cargar 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 tipo de campo Imagen tiene 3 formatos de retorno diferentes: Matriz de imágenes, URL de imagen e ID de imagen. Esto no afectará al aspecto del campo ni a las opciones para los administradores del sitio. Sin embargo, el Formato de Retorno de Imagen controla qué datos recibe en el código cuando solicita esta imagen desde la Base de Datos de WordPress usando la función get_field.

Le sugiero que elija la opción 'Image ID', ya que es la mejor opción para el rendimiento. Evita la opción "URL de la imagen" (a menos que la necesites por una razón específica), ya que no te permitirá obtener ningún detalle sobre la imagen, sólo la URL, que realmente no es suficiente.

He aquí un vistazo entre bastidores. Cuando eliges una imagen se guarda un ID de la imagen seleccionada en el Post Meta de la Página actual (o Post/CPT item). Así puedes seleccionar la misma imagen en muchas páginas diferentes y no se crearán duplicados de esa imagen.

Cuando añade una nueva imagen utilizando cualquier campo de imagen, ACF sube físicamente esa imagen a su instalación de WordPress (a la carpeta wp-content/uploads). A continuación, crea un nuevo archivo adjunto (con esta imagen), y guarda el ID del archivo adjunto a la actual Post/Page meta.

El ID de una imagen se guarda en la base de datos independientemente de la opción 'Formato de retorno'. Así que la opción 'Formato de retorno' sólo controla los datos que se reciben en código. Pero en cualquier caso, sólo el ID de una imagen (adjunto) se guardará en la base de datos. Por eso he recomendado usar el Formato de Retorno 'ID', ya que se ajusta al formato de la base de datos y no requiere trabajo extra del plugin ACF para recuperarlo.

Así que cada nueva subida crea un nuevo archivo adjunto en su biblioteca multimedia. WordPress no puede comparar la nueva imagen con las ya subidas, lo que significa que creará otro adjunto aunque vuelva a subir la misma imagen. Por eso es tan importante dar nombres claros a las imágenes y buscar primero en la Biblioteca Multimedia antes de subir una nueva imagen. De lo contrario, tendrás un montón de duplicados de la misma imagen y, a su vez, también utilizarás más espacio en tu cuenta de alojamiento web, por no hablar de los dolores de cabeza a largo plazo.

Desasignar una imagen de un campo de imagen no elimina la imagen de su instalación de WordPress. Mantendrá el archivo de imagen en su Librería de Medios, incluso cuando lo haya eliminado de todas las páginas/posts donde se encuentra el campo de imagen. De hecho, sólo hay unas pocas razones por las que necesita eliminar completamente una imagen de su biblioteca de WordPress. Pero están fuera del alcance del artículo de hoy.

Shortcodes son una poderosa característica de WordPress. De hecho son sólo frases clave que WordPress asocia con una función PHP. Se ven así con las palabras entre corchetes: [algún-nombre] y pueden aceptar argumentos por ejemplo [algún-nombre primer-argumento="primer-valor"].

Pero no vamos a escribir ningún código PHP. Vamos a utilizar un gran plugin gratuito llamado ACF Views para mostrar campos de imagen sin codificación utilizando shortcodes generados.

El plugin ACF Views te permite mostrar entradas y sus campos ACF usando shortcodes. Como puedes imaginar el plugin tiene una amplia gama de capacidades y también soporta todos los tipos de campos ACF. Pero nos centraremos en la visualización de imágenes por hoy. 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 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 de 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 Imagen ACF.

Para seguir adelante, instale el plugin ACF Views en su sitio de WordPress y recuerde activarlo. También necesitará el plugin ACF (gratuito) instalado y activo. A continuación, continúe con los siguientes pasos.

Cuando haya activado el plugin ACF Views verá un nuevo elemento en su menú de administración, llamado "ACF Views".

En el submenú hay varios elementos, pero sólo necesitaremos utilizar el que se llama "ACF Views".

Visite la pestaña Vistas ACF, 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 Vista es una lista de campos ACF a mostrar, por lo que puede tener muchas Vistas diferentes para mostrar diferentes campos (o conjuntos de campos) para diferentes entradas/páginas.

Dale un nombre a tu Vista. Puede ser cualquier cosa que describa la Vista, este es el nombre que se mostrará en la lista de Vistas haciéndola más fácil de encontrar. He llamado a mi Vista "Imagen lateral de la página".

Ahora necesita asignar un nuevo campo a su Vista. Haz clic en el botón "Añadir campo" y selecciona tu "Grupo" en el desplegable. En nuestro caso, el grupo se llama "Campos de página". A continuación, seleccione el campo de destino de la lista. En nuestro caso, el campo se llama "Imagen lateral". (Nota: El tipo de campo se muestra entre paréntesis para facilitar su identificación). En este caso, debería ver que el tipo es una "imagen", continúe eligiendo un "Tamaño de imagen" de la lista de tamaños disponibles, en nuestro caso hemos elegido "Completo".

Cada Vista admite una cantidad ilimitada de campos ACF, pero en nuestro caso, utilizaremos sólo uno.

Haga clic en el botón 'Publicar' para guardar y publicar su Vista . Después de su Ver se publica te darás cuenta de que Shortcodes se generaron en un bloque en el lado derecho de su Ver pantalla de edición. Cada Vista tiene su propio shortcode con un ID único. Así que la estructura del shortcode es la misma para todas las Vistas, pero los argumentos son únicos.

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

Haga clic en el botón 'Copiar al portapapeles' para el primer shortcode.

Bien, ahora todo debería estar listo para mostrar el campo de imagen. Visite la página de destino con el campo de imagen. Asegúrese de que el campo tiene una imagen adjunta y, a continuación, pegue el código corto en cualquier lugar que desee del contenido de la página. Para pegar el shortcode con 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.

Visita la página para ver el resultado, y si lo has hecho todo correctamente deberías ver tu imagen ACF mostrada en el contenido.

Si no puede ver su imagen, vuelva atrás y edite la página. Asegúrese de que ha adjuntado una imagen al campo de imagen ACF porque si el campo está vacío no tendrá nada que mostrar.

Para mostrar el campo Imagen necesitamos convertir la imagen seleccionada en la etiqueta img.

El código será diferente dependiendo del Tipo de Retorno seleccionado. A continuación proporcionamos ejemplos.

1. Código PHP para mostrar el campo Imagen con el "ID" Formato de Retorno:

// don't forget to replace 'image' with your field name
$imageID = get_field('image');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';

if ($imageID) {
    // creates the img tag
    echo wp_get_attachment_image($imageID, $size);
}

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

<?php

// don't forget to replace 'image' with your field name
$imageData = get_field('image');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';

if ($imageData) {
    // displays the image. Each %s in the string will be replaced with the related argument
    printf("<img src='%s' alt='%s'>",
        esc_attr($imageData['size'][$size]), esc_attr($imageData['alt']));
}

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

// don't forget to replace 'image' with your field name
$imageURL = get_field('image');

if ($imageURL) {
    // displays the image. Each %s in the string will be replaced with the related argument
    printf("<img src='%s'>",
        esc_attr($imageURL));
}

Con el Formato de Retorno "URL" no podemos controlar el tamaño de la imagen y no podemos obtener ninguna información adicional además de la URL. Así que hay que evitar esta opción. Es mejor elegir siempre el Formato de Retorno "ID".

Para más detalles, vea el vídeo a continuación y lea el artículo oficial del ACF.

Ha aprendido a utilizar el campo Imagen ACF, sus opciones y dos formas de mostrarlo. Así que ahora puede utilizar fácilmente el campo en cualquier lugar.

No olvide que puede añadir más campos de diferentes tipos a su Vista . Por ejemplo, en caso de que desee mostrar varias imágenes con títulos en una página. Y los valores de los campos pueden ser estilizados usando el campo de código CSS, vea la Pestaña Avanzada de la Vista. Ese CSS sólo se imprimirá en las páginas en las que esté utilizando el shortcode.

Espero que este artículo haya sido útil. Puedes encontrar más información sobre el plugin ACF Views en la web oficial, allí puedes encontrar enlaces al canal de YouTube para videotutoriales y enlaces a la Documentación del plugin que te ayudarán con cualquier duda que tengas.