javascript - 古腾堡javascript获取媒体srcset

Question

在 WordPress 中，使用 wp_get_attachment_image_srcset 很容易获得保存在 WordPress 中的图像 srcset 和 sizes功能。我需要在 javascript/react 的 block 编辑器端拥有该功能。那可能吗？

我期望的是一个接受媒体 ID 并以某种方式返回 srcset 的函数。如果那不可能，我怎么能实现一个 rest api 端点呢？还是有另一种方法可以将函数值从 php 传递到 js？

由于某些与此处无关的原因，我无法使用动态 php block 。

Answer 1

我在这里分享了我的解决方案，因为我通过搜索类似问题的解决方案看到了这篇文章:我正在寻找一种解决方案来获取 srcset 属性和完整生成的“img”标签，但来自“媒体” ' MediaReplaceFlow 组件返回的对象(不仅通过附件 ID)。它可能通过使用 wp.data.select( 'core').getMedia(media_id) 获取媒体对象来适应您的问题。

此媒体对象已包含一个“sizes”数组，其中包含某些图像尺寸的图像 URL。但这还不够，因为很难为图像标签构建 srcset ans size 属性。因此，经过多次研究，我发现了一个非常有用的 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。我现在可以通过简单地使用 media.sizes.medium.tag 在 js 中获取我的 img 标签。

重要:默认情况下，media.sizes 数组仅包含内置图像尺寸(缩略图、中等)，但不包含自定义图像尺寸。您可以使用 image_size_names_choose 简单地添加自定义尺寸过滤器。