WP Rest API - Cómo obtener la imagen destacada

Question

WP Rest API - Cómo obtener la imagen destacada

30 jun 2016, 23:58:19

Vistas: 89.1K

Votos: 42

Soy muy nuevo en esta API, de hecho solo he dedicado un par de horas hasta ahora. He investigado pero no encuentro nada al respecto...

El problema es que no puedo obtener la imagen destacada de un post. El JSON devuelve "featured_media: 0".

getPosts: function() {
  var burl = "http://www.example.com/wp-json/wp/v2/posts";
  var dataDiv = document.getElementById('cards');
  $.ajax({
    url: burl,
    data: data,
    type: 'GET',
    async: false,
    processData: false,
    beforeSend: function (xhr) {
      if (xhr && xhr.overrideMimeType) {
        xhr.overrideMimeType('application/json;charset=utf-8');
      }
    },
    dataType: 'json',
    success: function (data) {
      console.log(data);
      //pregunta: ¿por qué data->featured_image: 0?
      var theUl = document.getElementById('cards');
      for (var key in data) {
        //data[key]['']...
        //aquí hago mis operaciones
      }
    },
    error: function(e) {
      console.log('Error: '+e);
    }  
  });
}

Definitivamente he establecido una imagen destacada en el post, pero los datos devuelven:

¿Media destacada?

Agradeceré cualquier ayuda.

Abdul Sadik Yalcin

557

javascript api json plugin json api

Todas las respuestas a la pregunta

Comentarios

esto causa un problema al vincularlo en un binding de Angular, debido al nombre wp: de uno de los nodos en la ruta JSON hacia la imagen. Usé el plugin de la otra respuesta, que simplifica la ruta hacia la imagen.

Steve

9 oct 2017 23:44:03

contras: el JSON se vuelve más pesado pros: no instalar plugin, no realizar otra petición HTTP -> upvote

Raphaël VO

21 nov 2017 19:10:12

¿Cómo debería convertir wp:featuredmedia a JSON? Primero creé una clase wp que contiene featuredmedia. Pero no funciona.

Mahdi

3 abr 2018 09:17:59

Puedes acceder a wp: usando esta notación post._embedded['wp:term']

ocajian

15 may 2018 11:21:20

Si usas una función para crear los parámetros de consulta desde un array y no puedes usar esta función sin la combinación de clave y valor, puedes usar _embed como clave y true como valor.

sneaky

11 nov 2020 10:11:29

NO recomendaría usar el plugin Better Rest API. Si bien agregó imágenes destacadas a la API REST, también la rompió.

Esta es la solución más simple que encontré y que realmente funciona. Agrega el siguiente código a tu archivo functions.php:

<?php

function post_featured_image_json( $data, $post, $context ) {
  $featured_image_id = $data->data['featured_media']; // obtiene el ID de la imagen destacada
  $featured_image_url = wp_get_attachment_image_src( $featured_image_id, 'original' ); // obtiene la URL del tamaño original

  if( $featured_image_url ) {
    $data->data['featured_image_url'] = $featured_image_url[0];
  }

  return $data;
}
add_filter( 'rest_prepare_post', 'post_featured_image_json', 10, 3 );

Null TX

321

22 oct 2018 23:09:54

Puedes obtener el nombre de la imagen con esta ruta:

array_name._embedded['wp:featuredmedia']['0'].source_url

RobK

81

31 ene 2018 19:16:25

Echa un vistazo a un plugin llamado Better REST API Featured Image. Este añade la URL de la imagen destacada a la respuesta original de la API.

Michael Cropper

447

1 jul 2016 00:02:43

Comentarios

Gracias. Devuelve la URL lo cual es útil. ¿Alguna idea de por qué el plugin en sí no la está devolviendo? ¿Estoy haciendo algo mal o es la API?

Abdul Sadik Yalcin

1 jul 2016 00:06:47

Es la API. Todavía está en etapas tempranas. Mejorará.

Michael Cropper

1 jul 2016 00:08:17

¡Problema resuelto! En realidad sí devuelve un ID de la imagen pero se me olvidó por completo que tenía la caché activada. Pero de todos modos, ese plugin es mejor ya que devuelve la URL directamente.

Abdul Sadik Yalcin

1 jul 2016 01:14:06

@Devrim ¡Me alegro de que lo hayas resuelto! Si esta respuesta de Michael te ayudó, puedes hacer clic en la marca de verificación a la izquierda para aceptarla y mostrar a otros que esta fue la respuesta correcta. :)

Tim Malone

1 jul 2016 02:34:31

Creé un acceso directo a mi imagen añadiéndola directamente a la respuesta de la API.

//Añadir en functions.php, este hook es para mi tipo de publicación 'regions'
add_action( 'rest_api_init', 'create_api_posts_meta_field' );

function create_api_posts_meta_field() {
  register_rest_field( 'regions', 'group', array(
         'get_callback'    => 'get_post_meta_for_api',
         'schema'          => null,
      )
  );
}

//Usa el ID de la publicación para consultar la imagen y añadirla a tu payload
function get_post_meta_for_api( $object ) {
  $post_id = $object['id'];
  $post_meta = get_post_meta( $post_id );
  $post_image = get_post_thumbnail_id( $post_id );      
  $post_meta["group_image"] = wp_get_attachment_image_src($post_image)[0];

  return $post_meta;
}

lakewood

141

29 sept 2018 01:16:49

Pega este código en el archivo functions.php de tu tema y utiliza esta clave para la imagen destacada: featured_image_url

function post_featured_image_json( $data, $post, $context ) {
  $featured_image_id = $data->data['featured_media']; // obtiene el ID de la imagen destacada
  $featured_image_url = wp_get_attachment_image_src( $featured_image_id, 'original' ); // obtiene la URL del tamaño original

  if( $featured_image_url ) {
    $data->data['featured_image_url'] = $featured_image_url[0];
  }

  return $data;
}
add_filter( 'rest_prepare_post', 'post_featured_image_json', 10, 3 );

GNELEZIE

21

16 mar 2022 18:25:17

Prueba de la siguiente manera ....................

URL: /wp-json/wp/v2/posts?_embed

imagen: json["_embedded"]["wp:featuredmedia"][0]["source_url"],

Está funcionando correctamente. Pruébalo.

MAM.AASIM

11

15 jul 2020 21:14:14

Instalé el plugin Yoast SEO y descubrí que la URL de la imagen destacada está disponible allí. Después de URL: /wp-json/wp/v2/posts?_embed

Puedes encontrar la imagen destacada en: yoast_head_json > robots > og_image > url

Jay Pokale

1

17 feb 2022 11:31:11

Instalar el plugin Yoast SEO

Obtener datos de la API REST de WordPress en JavaScript

 async function fetchPosts() {
 const respuesta = await fetch('https://example.com/wp-json/wp/v2/posts');
 return respuesta.json();}

Estoy mostrando 10 imágenes en HTML (usé ID = posts en el archivo .html)

 (async () => {
 var imagenes = '';
 for (var i = 0; i < 10; i++) {
     var obj = `<img src = '${(await fetchPosts())[i].yoast_head_json.og_image[0].url}' width="500"></img>`;
     imagenes += obj;
     document.getElementById('posts').innerHTML = `${imagenes}`
 }})()

Jay Pokale

1

19 feb 2022 16:17:52

Comentarios

¿Quizás editar tus dos respuestas juntas? Parece que están dando la misma solución.

Rup

2 mar 2022 17:35:30

Eslam Mahmoud 1.1K · Accepted Answer · 2017-05-31T18:56:13Z

Puedes obtenerlo sin plugins añadiendo _embed como parámetro a tu consulta

/?rest_route=/wp/v2/posts&_embed
/wp-json/wp/v2/posts?_embed

Eslam Mahmoud

1.1K

31 may 2017 18:56:13