Question

我正在尝试在wordpress中创建一个响应式图库。首先，我在functions.php文件中添加了这行代码：

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    add_image_size('grid-1', 400, 9999);
    add_image_size('grid-2', 800,9999);
}

在这里的另一个问题上，我发现9999允许Wordpress在任何高度裁剪图像，以使图像不会丢失信息。我可以展示的那天是：

the_post_thumbnail('grid-1')

我需要的最终结果是：

<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png">

由于我不知道高度，我无法对其进行硬编码。是否有办法提取该信息并将其添加到the_post_thumbnail('grid-1')

谢谢

Answer 1

我没有测试过，但我认为它应该对你有帮助。

$grid_1 = wp_get_attachment_image_src( $attachment->ID, 'grid-1', false ); 
$grid_2 = wp_get_attachment_image_src( $attachment->ID, 'grid-2', false );

然后，您的HTML将是这样的：

<img src="<? echo $grid_1[0]; ?> foo="<? echo echo $grid_2[0]; ?>" />

有关更多信息，我建议您阅读关于wp_get_attachment_image的Wordpress Codex文章。

如何在wordpress中添加图像尺寸数据属性？

1 个答案: