Question

我正在开发一个WP网站，其中包含一些促销/广告滑块以及Google Analytics点击事件。效果很好，现在我想在正确的分辨率上提供正确的图像。

我正在使用picturefill来提供图像。硬编码时工作正常，所以我知道它有效。当我试图获取WP上传的图像的图像源时没有。我知道这是因为我的（缺乏）PHP技能。

Picturfill需要什么：

<span data-picture data-alt="">
    <span data-src="filename_default.jpg"></span>
    <span data-src="filename_small.jpg" data-media="(min-width: 400px)"></span>
    <span data-src="filename_medium.jpg" data-media="(min-width: 768px)"></span>
    <span data-src="filename_big.jpg" data-media="(min-width: 1200px)"></span>

    <!-- Fallback content for non-JS browsers. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="">
    </noscript>
</span>

我有url或id或图像存储在： $ attachment_id

我想这样做：

<?php
    $attachment_id = get_field('advimg');
    $large = "adv-pos-a-large";
    $default = "adv-pos-a-default";
    $small = "adv-pos-a-small";

?>

get_field（'advimg'）; 来自ACF。

<span data-picture data-alt="">
    <span data-src="<?php wp_get_attachment_image_src( $attachment_id, $default ); ?>"></span>
    <span data-src="<?php wp_get_attachment_image_src( $attachment_id, $small ); ?>" data-media="(min-width: 400px)"></span>
    <span data-src="<?php wp_get_attachment_image_src( $attachment_id, $default ); ?>" data-media="(min-width: 768px)"></span>
    <span data-src="<?php wp_get_attachment_image_src( $attachment_id, $large ); ?>" data-media="(min-width: 1200px)"></span>

    <!-- Fallback content for non-JS browsers. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="">
    </noscript>
</span>

但它不起作用。我玩过：

wp_get_attachment_image_src wp_get_attachment_image_url wp_get_attachment_image_link

我一定是星期五，因为它没有工作，有些东西对我说这不是那么难......我今天才看到它。

希望你们能投入。

提前致谢，

/保

编辑/最终代码/修复

<?php 
    $attachment_id = get_field('advanced_custom_field_name_here');
    $small = wp_get_attachment_image_src( $attachment_id, 'adv-pos-a-small' );
    $default = wp_get_attachment_image_src( $attachment_id, 'adv-pos-a-default' );
    $large = wp_get_attachment_image_src( $attachment_id, 'adv-pos-a-large' );
?> 

<span data-picture data-alt="alt desc here">
    <span data-src="<?php echo $default[0]; ?>"></span>
    <span data-src="<?php echo $small[0]; ?>" data-media="(min-width: 400px)"></span>
    <span data-src="<?php echo $default[0]; ?>" data-media="(min-width: 768px)"></span>
    <span data-src="<?php echo $large[0]; ?>" data-media="(min-width: 1200px)"></span>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="<?php echo $default[0]; ?>" alt="alt desc here">
    </noscript>
</span>

Answer 1

wp_get_attachment_image_src令人困惑地命名。（更好的名称是wp_get_attachment_image_atts）。它实际上返回一个带有图像属性的数组＆＃34; url＆＃34;，＆＃34; width＆＃34;和＆＃34;高度＆＃34;，图像附件文件。对于图像src，使用返回数组中的第一个元素：

$img_atts = wp_get_attachment_image_src( $attachment_id, $default );
$img_src = $img_atts[0];

另外，请确保您的ACF图片字段返回类型设置为附件ID，以便$attachment_id = get_field('advimg');为您提供您期望的ID。

按ID大小获取图像源

1 个答案: