我正在一个 WP 网站上工作,其中包含一些带有 Google Analytics 点击事件的促销/广告 slider 。效果很好,现在我想以正确的分辨率提供正确的图像。
我正在使用 picturefill用于提供图像。硬编码时工作正常,所以我知道它有效。当我尝试使用 WP 上传的图像获取图像源时,没有。我知道这是由于我的(缺乏)php 技能。
图片填充需要什么:
<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>
最佳答案
wp_get_attachment_image_src
名称困惑。 (更好的名称是 wp_get_attachment_image_atts)。它实际上返回一个数组,其中包含图像附件文件的图像属性“url”、“width”和“height”。仅对于图像 src,使用返回数组中的第一个元素:
$img_atts = wp_get_attachment_image_src( $attachment_id, $default );
$img_src = $img_atts[0];
此外,确保您的 ACF 图像字段返回类型设置为附件 ID,以便
$attachment_id = get_field('advimg');
给你你期望的 id。
关于wordpress - 通过 ID 和 size 获取图像源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17233618/