Обслуживание реальных изображений на основе идентификатора вложения с конечной точкой REST API WordPress - PullRequest
Новая
       11

Обслуживание реальных изображений на основе идентификатора вложения с конечной точкой REST API WordPress

0 голосов
/ 04 ноября 2018

Можно ли обслуживать изображения с помощью конечной точки Wordpress Rest API на основе идентификатора вложения?

Я имею в виду, что если в браузере была вставлена ​​следующая ссылка, я должен получить реальное изображение вместо ответа JSON. http://demo.dev/wp-json/custom/v1/image/80

Мне это нужно для REST-полной темы Wordpress, основанной на плагине Vue.js и Metabox.io с надстройкой mb REST API. Мои метабоксы содержат много повторяющихся вложенных групп и выводят в массив только идентификаторы изображений.

Я добавил конечную точку в functions.php: 

add_action( 'rest_api_init', function () {
    register_rest_route( 'custom/v1', '/image/(?P<id>\S+)', [
        'methods' => WP_REST_Server::READABLE,
        'callback' => 'custom_get_image',
           'args' => [
            'id'
        ],
    ] );
} );

if ( !function_exists('custom_get_image') ){
    function custom_get_image($data){
        $id="";
        $src= get_template_directory_uri().'/img/placeholder.png';
        if ( isset($data['id']) ){
            $image = wp_get_attachment_image_src($data["id"], 'medium');
            if($image){
                $src=$image[0];
            }
        }           
        return $src;
    }
}

В настоящее время я решил проблему, создав дополнительный компонент vue, который вызывает API и вставляет URL-адрес файла. Тем не менее, я хотел иметь конечную точку API, которую можно добавлять непосредственно в img "src" или div "background-image" без дополнительного вызова ajax. 

<template>
  <img :src="src">
</template>

<script>
import axios from 'axios';
export default {
  props: ['id'],
  data: function() {
    return {
      src: 'http://demo.dev/wp-content/themes/vue-theme/static/img/placeholder.jpg',
    };
  },
  methods: {
    getSrc(id) {
      //var id = 83;
      var endpoint = 'http://demo.dev/wp-json/custom/v1/image/';
      var url = endpoint + id;
      axios
        .get(url)
        .then(response => {
          this.src = response.data;
        })

        .catch(error => {});
    },
  },

  mounted: function() {
    this.$nextTick(function() {
      this.getSrc();
    });
  },
};
</script>

1 Ответ

0 голосов
/ 04 ноября 2018

Я нашел рабочее решение в php (может быть не самое лучшее, wp-load.php должен быть обязательным). Я добавил вспомогательный скрипт, который принимает идентификатор вложения в качестве параметра запроса и перенаправляет на URL изображения: 

<?php

$path = preg_replace('/wp-content.*$/','',__DIR__);

define( 'WP_USE_THEMES', false );
require( $path.'\wp-load.php' );

$id= isset($_GET['id']) ? $_GET['id'] : '';
$size= isset($_GET['size']) ? $_GET['size'] : 'fullsize';

$url=$_SERVER['REQUEST_URI'];
$src=$url."/wp-content/themes/vue-theme/static/img/placeholder.jpg";

if($id){
    $image = wp_get_attachment_image_src( $id, $size );
    if($image){
        $src=$image[0];
    }

}

header("Location: ".$src);
die();
?>

Теперь я могу добавить URL с таким идентификатором: 

<div v-for="item in items" class="bg-block" v-bind:style="{ backgroundImage: 'url('+ 'http://demo.dev/wp-content/themes/vue-theme/helpers/service.php?size=medium&id=' + item.imgId +')'></div>;
...