Гутенберг javascript получить медиа-источник

Question

В WordPress легко получить изображения srcset и sizes, сохраненные в WordPress, используя функцию wp_get_attachment_image_srcset. Мне нужно иметь эту функциональность на стороне редакторов блоков в javascript / реакции. Это возможно?

Я ожидаю, что это функция, которая принимает медиа-идентификатор и каким-то образом возвращает srcset. Если это невозможно, как я могу реализовать конечную точку api rest для этого? Или есть другой способ передать значения функции от php до js?

По некоторым причинам, которые здесь не имеют отношения, я не могу использовать блоки Dynami c php.

Answer 1

Вы можете создать запрос AJAX, который будет вызывать wp_get_attachment_image_srcset для идентификатора вложения и вернуть результат.

В этом примере используется jQuery из значения по умолчанию "Twenty Seventeen" theme

Внутри дочерней темы functions.php мы определяем AJAX WP метод:

add_action("wp_ajax_get_attachment_image_srcset", "get_attachment_image_srcset");
add_action("wp_ajax_nopriv_get_attachment_image_srcset", "get_attachment_image_srcset");

function get_attachment_image_srcset() {

  // Get attachment ID from the request
  $attachment_id = $_REQUEST['attachment_id'];

  // Get attachment srcset
  $srcset = wp_get_attachment_image_srcset($attachment_id);

  // Return JSON with the srcset and the attachment_id
  wp_send_json([
    'srcset' => $srcset,
    'attachment_id' => $attachment_id
  ]);
}

Inside Block Editor , вы можете добавить пользовательский Блок HTML с использованием AJAX для извлечения набора вложений с использованием идентификатора вложения.

Пользовательский редактор блоков HTML Блок кода:

jQuery(function($) {

  // On a button click
  $('.get-srcset a').on('click', function() {

    // Get the value of a text input to pass as attachment ID
    let attachmentId = $('#attachmentid').val();

    // Make the AJAX call
    jQuery.ajax({
      type : "post",
      dataType : "json",
      url : '/wp-admin/admin-ajax.php',
      data : {
        action: "get_attachment_image_srcset",
        attachment_id : attachmentId
      },
      success: function(response) {
        // If we got an srcset
        if(response.srcset) {
          // Update the result element text with trhe srcset value or use srcset
          $('#result').text(response.srcset);
        }
        else {
          alert("No srcset")
        }
      }
    });
  });

});

Это обновит элемент #result текст примерно так:

https://wp.lytrax.net/wp-content/uploads/2020/04/3_ser_conv07-300x225.jpg 300w, 
https://wp.lytrax.net/wp-content/uploads/2020/04/3_ser_conv07-768x576.jpg 768w, 
https://wp.lytrax.net/wp-content/uploads/2020/04/3_ser_conv07.jpg 832w

Вы можете проверить эту работу на этом демонстрационном сайте WP: https://wp.lytrax.net/test-attachment-srcset/ ( Допустимые идентификаторы вложений: 5, 6, 7, 8 , 9, 10 )

Answer 2

Я поделился своим решением здесь, потому что я видел этот пост, исследуя решение для аналогичной проблемы: я искал решение, чтобы получить атрибут srcset и полный сгенерированный тег 'img', но из 'media 'объект, возвращаемый компонентом MediaReplaceFlow (не только по идентификатору вложения). Вероятно, его можно адаптировать к вашей проблеме, получая медиа-объект с wp.data.select( 'core').getMedia(media_id).

. Этот медиа-объект уже содержит массив размеров с URL-адресом изображения в некоторых размерах изображения. но этого недостаточно, потому что сложно создать атрибут srcset и size для тега image. Итак, после многих исследований я нашел очень полезный фильтр php: wp_prepare_attachment_for_js

, поэтому с этим фильтром я написал PHP код:

function imageTagForJs( $response, $attachment ) {
    foreach ( $response['sizes'] as $size => $datas ) {
      $response['sizes'][$size]['tag']    = wp_get_attachment_image( $attachment->ID, $size );
      $response['sizes'][$size]['srcset'] = wp_get_attachment_image_srcset( $attachment->ID, $size );
    }
    return $response;
  }
add_filter( 'wp_prepare_attachment_for_js', 'imageTagForJs', 10, 2 );

Теперь в объекте 'media' JS каждый размер получает два новых свойства: tag и srcset. Теперь я могу получить свой тег img в js, просто используя media.sizes.medium.tag.

Важно: По умолчанию массив media.sizes содержит только встроенные размеры изображений (миниатюра, средний и т. Д.). c), но не нестандартные размеры изображений. Вы можете просто добавить нестандартные размеры, используя фильтр image_size_names_choose.

Answer 3

Для того, чтобы сначала получить рекомендованное изображение, вам нужен идентификатор выделенного изображения, а затем передать его в функцию getmedia, чтобы получить объект мультимедиа. после получения медиа-объекта вы можете получить соответствующие предметы из объекта.

const featuredImageId = wp.data.select( 'core/editor' )
.getEditedPostAttribute( 'featured_media' );

const media = featuredImageId 
? wp.data.select( 'core').getMedia( featuredImageId ) 
: null;

console.log(media);