Llega el Black Friday

50% de descuento en Productos y Mantenimiento (código BF24P)
20% de descuento en Consultoría y Packs de horas (código BF24S)

Cómo establecer la imagen destacada automáticamente con ACF en WordPress

    Cuando trabajas con Advanced Custom Fields (ACF) en WordPress, es común querer usar campos personalizados para administrar el contenido de tu sitio web de manera más eficiente. En este artículo, te enseñaremos cómo puedes automatizar el proceso de asignación de una imagen destacada a una publicación de WordPress utilizando un campo de imagen de ACF. Este proceso se lleva a cabo cada vez que se guarda o actualiza una publicación de tipos específicos, como «evento» o «proyecto». A continuación, desglosaremos el código para que puedas entenderlo y adaptarlo a tus necesidades.

    // Guardar la imagen del campo 'foto' de ACF de los $post_types al enviar el formulario o guardar en el backend
    function eg_acf_set_featured_image( $value, $post_id, $field  ){
    
        $post_types = array('felicitaciones','bilbao-en-directo');
        if (!in_array(get_post_type( $post_id ), $post_types)) {
            return;
        }
        
        if($value != ''){
            //Añadir el ID de la imagen como imagen destacada del post
            set_post_thumbnail( $post_id, $value );
        }
     
        return $value;
    }
    add_filter('acf/update_value/name=foto', 'eg_acf_set_featured_image', 10, 3);

    ¿Cuándo usar este código?

    Este código es ideal para sitios donde se gestionan tipos de publicaciones personalizadas, como «evento» o «proyecto», y donde quieres que una imagen subida mediante ACF se asigne automáticamente como la imagen destacada. Evita tener que asignar manualmente la imagen en cada publicación, ahorrando tiempo y asegurando consistencia.

    Bloque 1: Función eg_acf_set_featured_image

    function eg_acf_set_featured_image( $value, $post_id, $field ){
    
        $post_types = array('evento','proyecto');
        if (!in_array(get_post_type( $post_id ), $post_types)) {
            return;
        }
    
        if($value != ''){
            //Añadir el ID de la imagen como imagen destacada del post
            set_post_thumbnail( $post_id, $value );
        }
    
        return $value;
    }

    Explicación:
    Esta función es el corazón del código. Aquí se definen las siguientes acciones:

    • $post_types = array('evento','proyecto');: El array define los tipos de publicaciones donde se aplicará este código. En este caso, solo se ejecutará para los tipos «evento» y «proyecto». Si deseas agregar más tipos de publicaciones, puedes incluirlos aquí.
    • if (!in_array(get_post_type( $post_id ), $post_types)) { return; }: Si el tipo de la publicación no está en el array de $post_types, la función termina y no hace nada. Esto asegura que la imagen destacada solo se asignará en los tipos de publicaciones especificados.
    • if($value != '') {: Esta condición verifica si el campo de imagen (llamado foto) tiene un valor. Si el campo está vacío, no se realiza ninguna acción.
    • set_post_thumbnail( $post_id, $value );: Esta línea asigna la imagen al post como imagen destacada, utilizando el ID de la imagen que se encuentra en el campo ACF foto.

    Bloque 2: El add_filter

    add_filter('acf/update_value/name=foto', 'eg_acf_set_featured_image', 10, 3);

    Explicación:
    Este bloque de código conecta la función eg_acf_set_featured_image con el proceso de actualización del campo foto de ACF:

    • acf/update_value/name=foto: El filtro se aplica cuando el valor del campo de ACF llamado foto se actualiza. Esto ocurre cuando se guarda o se edita la publicación que contiene ese campo.
    • 'eg_acf_set_featured_image', 10, 3: Aquí se indica que se debe ejecutar la función eg_acf_set_featured_image en el momento en que el filtro se active. El número 10 es la prioridad de ejecución y el número 3 indica que la función recibirá tres parámetros: el valor del campo, el ID del post y el objeto del campo.

    Ejemplo práctico

    Supón que gestionas un sitio de eventos donde cada evento tiene una imagen asociada. En el formulario de ACF, tienes un campo llamado foto que permite a los usuarios subir una imagen. Este código garantiza que, al guardar o actualizar el evento, esa imagen se asignará automáticamente como la imagen destacada para ese evento.

    Pasos para implementarlo:

    1. Añade este código al a tu plugin personalizado o plugin de snippets.
    2. Asegúrate de que el campo de ACF llamado foto esté configurado correctamente para aceptar imágenes.
    3. Cada vez que se guarde un evento o proyecto, la imagen seleccionada en el campo foto será automáticamente asignada como imagen destacada de esa publicación.

    Variaciones del código

    Variación 1: Cambiar los tipos de publicación

    Si tienes otros tipos de publicación personalizada en tu sitio, simplemente agrega o cambia los valores en el array de $post_types para incluir esos tipos. Por ejemplo:

    $post_types = array('noticias', 'galeria');

    Esto hará que la función también se ejecute para publicaciones de tipo «noticias» y «galeria», en lugar de «evento» y «proyecto».

    Variación 2: Asignar una imagen por defecto si el campo está vacío

    Si quieres asignar una imagen predeterminada cuando el campo foto está vacío, puedes modificar la función añadiendo un bloque de código para hacerlo:

    if( empty($value) ) {
        $default_image_id = 123; // ID de la imagen por defecto
        set_post_thumbnail( $post_id, $default_image_id );
    } else {
        set_post_thumbnail( $post_id, $value );
    }

    Explicación:
    Si el campo de imagen está vacío, se asignará una imagen predeterminada con el ID 123. Si el campo tiene una imagen, se usará esa como imagen destacada.

    Claro, aquí te dejo la variación añadida para que funcione con un campo de imagen que no se llame «foto», sino que tenga otro nombre:

    Variación 3: Funcionar con un campo de imagen con otro nombre

    Si tienes un campo de imagen con un nombre diferente, puedes modificar la referencia del campo foto en el filtro para que se adapte a ese nuevo nombre. Por ejemplo, si tu campo se llama imagen_destacada, basta con cambiar el nombre del campo en el filtro acf/update_value/name=foto:

    add_filter('acf/update_value/name=imagen_destacada', 'eg_acf_set_featured_image', 10, 3);

    Explicación:

    • En lugar de usar el nombre del campo foto, el filtro ahora está escuchando la actualización del campo imagen_destacada.
    • Esta modificación permite que el código funcione con cualquier campo de imagen que hayas creado en ACF, simplemente cambiando el nombre del campo en el filtro.
    • Si en un post_tye se llama de una forma, pero en otro post_type se llamade otra diferente, puedes añadir dos add_filter, cada uno con su nombre correspondiente.

    Así, puedes reutilizar el código para otros campos de imagen, sin necesidad de reescribir la lógica de asignación de la imagen destacada cada vez que cambies el nombre del campo.

    Con esta variación, puedes utilizar este código en múltiples situaciones, no solo con un campo llamado foto, sino también con cualquier campo de imagen en ACF, simplemente actualizando el nombre del campo en el filtro. Esto te permite mayor flexibilidad y adaptabilidad al trabajar con ACF en tus proyectos de WordPress.

    Conclusión

    Este código es útil si deseas automatizar el proceso de asignar una imagen destacada a tus publicaciones en WordPress, especialmente cuando utilizas ACF para gestionar imágenes en campos personalizados. Al personalizarlo según tus necesidades, puedes adaptarlo para que funcione con diferentes tipos de publicaciones y automatizar tareas que normalmente requerirían intervención manual.


    Herramientas relacionadas

    • Advanced Custom Fields

      El plugin más veterano en cuanto a la creación de campos personalizados. También permite crear páginas de opciones e incluso formularios. Dispone de versión gratuita, pero en ella no tendrás la posibilidad de añadir campos de galería (entre otras pequeñas funciones)

    • WordPress

      El sistema gestor de contenidos más utilizado del mundo. Gratis, libre, y muy personalizable.