Wordpress高级自定义字段响应图像

Question

如何使Wordpress高级自定义字段返回响应式图像就像在帖子中一样？

我在谈论“图片网址”字段 - 当然它只返回一个网址。如何创建响应式图像HTML标记？

我通过srcset讨论了不同的图像文件大小和分辨率：https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

Answer 1

如果ACF仅返回图像URL，则需要在其周围添加图像HTML，然后创建响应式CSS，例如：

PHP

echo '<img class="responsive" src="' . $img_url . '">';

CSS

img.responsive {width: 100%; height: auto;}

ACF非常灵活，因此您可以根据WordPress仪表板中设置的介质尺寸选择返回的图像尺寸。响应式CSS也非常依赖于您网站的HTML结构，但希望上面的代码能为您提供一个起点。