WP Rest API: ¿detalles de la última publicación, incluida la URL de medios destacados en una solicitud?

15

Estoy usando wp-rest api para obtener información de publicaciones. También uso los elementos del filtro wp rest api para filtrar campos y resumir el resultado:

Cuando lo llamo http://example.com/wp-json/wp/v2/posts?items=id,title,featured_mediadevuelve resultados como este:

[

    {
        "id": 407,
        "title": {
            "rendered": "Title 1"
        },
        "featured_media": 399
    },
    {
        "id": 403,
        "title": {
            "rendered": "Title 2"
        },
        "featured_media": 401
    }

]

La pregunta es ¿cómo puedo generar una URL de medios destacados usando esta identificación? Por defecto, la llamada http://example.com/wp-json/wp/v2/media/401devuelve un nuevo json que tiene todos los detalles sobre la URL de diferentes tamaños de imagen de origen:

{

    "id": 401,
    "date": "2016-06-03T17:29:09",
    "date_gmt": "2016-06-03T17:29:09",
    "guid": {
        "rendered": "http://example.com/wp-content/uploads/my-image-name.png"
    },
    "modified": "2016-06-03T17:29:09",
    "modified_gmt": "2016-06-03T17:29:09",
    "slug": "my-image-name",
    "type": "attachment",
    "link": "http://example.com/my-post-url",
    "title": {
        "rendered": "my-image-name"
    },
    "author": 1,
    "comment_status": "open",
    "ping_status": "closed",
    "alt_text": "",
    "caption": "",
    "description": "",
    "media_type": "image",
    "mime_type": "image/png",
    "media_details": {
        "width": 550,
        "height": 250,
        "file": "my-image-name.png",
        "sizes": {
            "thumbnail": {
                "file": "my-image-name-150x150.png",
                "width": 150,
                "height": 150,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-150x150.png"
            },
            "medium": {
                "file": "my-image-name-300x136.png",
                "width": 300,
                "height": 136,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-300x136.png"
            },
            "one-paze-port-thumb": {
                "file": "my-image-name-363x250.png",
                "width": 363,
                "height": 250,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-363x250.png"
            },
            "one-paze-blog-thumb": {
                "file": "my-image-name-270x127.png",
                "width": 270,
                "height": 127,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-270x127.png"
            },
            "one-paze-team-thumb": {
                "file": "my-image-name-175x175.png",
                "width": 175,
                "height": 175,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-175x175.png"
            },
            "one-paze-testimonial-thumb": {
                "file": "my-image-name-79x79.png",
                "width": 79,
                "height": 79,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-79x79.png"
            },
            "one-paze-blog-medium-image": {
                "file": "my-image-name-380x250.png",
                "width": 380,
                "height": 250,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-380x250.png"
            },
            "full": {
                "file": "my-image-name.png",
                "width": 550,
                "height": 250,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name.png"
            }
        },
        "image_meta": {
            "aperture": "0",
            "credit": "",
            "camera": "",
            "caption": "",
            "created_timestamp": "0",
            "copyright": "",
            "focal_length": "0",
            "iso": "0",
            "shutter_speed": "0",
            "title": "",
            "orientation": "0",
            "keywords": [ ]
        }
    },
    "post": 284,
    "source_url": "http://example.com/wp-content/uploads/my-image-name.png",
    "_links": {
        "self": [
            {
                "href": "http://example.com/wp-json/wp/v2/media/401"
            }
        ],
        "collection": [
            {
                "href": "http://example.com/wp-json/wp/v2/media"
            }
        ],
        "about": [
            {
                "href": "http://example.com/wp-json/wp/v2/types/attachment"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "http://example.com/wp-json/wp/v2/users/1"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "http://example.com/wp-json/wp/v2/comments?post=401"
            }
        ]
    }

}

Pero considere el caso cuando quiero obtener una lista de publicaciones y sus miniaturas. Una vez que debería llamar http://example.com/wp-json/wp/v2/posts?items=id,title,featured_media, debería llamar http://example.com/wp-json/wp/v2/media/id10 veces por cada identificación de medios y luego analizar los resultados y obtener la url final de la miniatura de los medios. Por lo tanto, necesita 11 solicitudes para obtener detalles de 10 publicaciones (una para la lista, 10 para las miniaturas). ¿Es posible obtener estos resultados en una sola solicitud?

VSB
fuente
1
¿Registró un nuevo campo para su respuesta con register_rest_field?
Benoti
@Benoti Comprobaré su documentación. Si hubiera más cosas que preguntar, volveré a ti :)
VSB
Es correcto, no tiene la fecha de la imagen en la solicitud de publicación, solo la ID de los medios destacados y una nueva solicitud es necesaria en el valor predeterminado de la API de WP.
bueltge
Si agrega el _embedparámetro, el objeto de publicación devuelto incluye todos los detalles sobre los medios destacados y todos sus tamaños disponibles. Comprueba mi respuesta para ver un ejemplo.
Jesús Franco

Respuestas:

18

¡Ah, yo mismo tuve este problema! Y aunque _embedes genial, en mi experiencia es muy lento, y el objetivo de JSON es ser rápido: D

Tengo el siguiente código en un complemento (utilizado para agregar tipos de publicaciones personalizadas), pero imagino que podría ponerlo en el function.phparchivo de su tema .

php

add_action( 'rest_api_init', 'add_thumbnail_to_JSON' );
function add_thumbnail_to_JSON() {
//Add featured image
register_rest_field( 
    'post', // Where to add the field (Here, blog posts. Could be an array)
    'featured_image_src', // Name of new field (You can call this anything)
    array(
        'get_callback'    => 'get_image_src',
        'update_callback' => null,
        'schema'          => null,
         )
    );
}

function get_image_src( $object, $field_name, $request ) {
  $feat_img_array = wp_get_attachment_image_src(
    $object['featured_media'], // Image attachment ID
    'thumbnail',  // Size.  Ex. "thumbnail", "large", "full", etc..
    true // Whether the image should be treated as an icon.
  );
  return $feat_img_array[0];
}

Ahora en su respuesta JSON debería ver un nuevo campo llamado que "featured_image_src":contiene una url a la miniatura.

Lea más sobre cómo modificar las respuestas aquí:
http://v2.wp-api.org/extending/modifying/

Y aquí hay más información sobre las funciones register_rest_fieldy wp_get_attachment_image_src():
1.) https://developer.wordpress.org/reference/functions/register_rest_field/
2.) https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

** Nota: ¡No olvide las <?php ?>etiquetas si se trata de un nuevo archivo php!

StephanieQ
fuente
2
Esto funciona muy bien y ayuda a que _embed no necesite ser usado ya que solo quiero la imagen destacada de tamaño completo. Tuve que cambiarlo a: ($object['featured_media'], 'fullsize', false);para no darme la URL en miniatura, pero funciona perfectamente a través de functions.php - ¡Gracias!
Jordania
1
Todo este malabarismo con el punto final de la API RES me recuerda por qué me gusta GraphQL y que debería terminar los envoltorios de la API REST y los nuevos solucionadores personalizados ;-) De todos modos, es una solución inteligente y en realidad uso puntos finales personalizados en producción para obtener los datos Necesito (y solo eso).
Jesús Franco
El nuevo complemento tiene http://mahditajik.ir/wp-json/wp/v2/media/<id>pero tiene muchos datos adicionales que hacen que la respuesta sea lenta, ¿cómo puedo personalizar REST api responder dto?
Mahdi
1
¡Muchas gracias, me ayudó a terminar mi función de contenido destacado! : D
Atem18
1
¡Solo quería que supieras que esto cortó 2 segundos de mi tiempo de carga! ¡Muchas gracias y por su bibliografía cuidadosamente seleccionada!
GuiHarrison
7

Simplemente agregue el _embedargumento de consulta a su URL solicitando las publicaciones, y cada objeto de publicación incluirá el _embedded.[wp:featuredmedia]objeto, que incluye todas las imágenes, al igual que el /media/$idrecurso. Si desea un tamaño específico, simplemente acceda a él por su nombre de propiedad, es decir: _embedded[wp:featuredmedia][0].media_details.sizes.full.source_urlo por su miniatura:_embedded[wp:featuredmedia][0].media_details.sizes.thumbnail.source_url

Es decir, el objeto incrustado wp: Featuredmedia incluye todas las URL y detalles para cada tamaño disponible para su publicación, pero si desea solo la imagen destacada original, puede usar el valor en esta clave: post._embedded["wp:featuredmedia"][0].source_url

Lo uso en un sitio con algo como esto (use su propio dominio, por supuesto):

$.get('https://example.com/wp-json/wp/v2/posts/?categories=3&_embed', 
    function(posts) { 
        var elems = '';
        posts.forEach(function(post){ 
            var link = post.link;
            var title = post.title.rendered;
            var pic = post._embedded["wp:featuredmedia"][0].source_url);
            elems += '<div class="this_week"><a href="' + link + '" target="_blank">';
            elems += '<img src="' + pic + '" title="' + title + '"/><span class="title">';
            elems += title + '</span></a></div>';
        });
        $('#blockbusters').html(elems);
    });
});

¿Ver? No es necesario realizar dos consultas, solo agregue _embedcomo argumento de consulta, y luego tendrá toda la información que necesita para usar el mejor tamaño para su vista.

Jesús Franco
fuente