如何解决WordPress中的自适应图像-如何选择合适的尺寸?
我一直在阅读一些有关如何实现WP响应图像(srcset,大小等)的教程。 我将响应式图像添加到了没有这种功能的主题(旧主题)。
现在在前端呈现的html很好,但是我在代码中犯了一些错误,因为浏览器始终显示宽度为768px的图像。
以下是暂存here的缩略图以进行测试的代码:
$attachment_id = get_post_thumbnail_id( $post_id );
$image_large_src = wp_get_attachment_image_src( $attachment_id,'large' );
echo '<a href="' . $post_href . '" title="' . get_the_title() . '">
<img class="featured-thumbnail thumbnail large" src="' . $image_large_src[0] . '" srcset="' . wp_get_attachment_image_srcset( $attachment_id,'non-cropped-extra-large' ) . '" sizes="(min-width: 840px) 768px,(min-width: 700px) 300px,100vw" alt="' . get_post_meta( $attachment_id,'_wp_attachment_image_alt',true) . '"></a>';
在这里,我希望浏览器的宽度在700像素到840像素之间时,将显示300像素的图像。但是,它始终显示768像素的宽度。
以上代码仅用于测试,无法正常工作,我想了解自己做错了什么。
最终目标是让浏览器选择:
- 浏览器宽度大于1200px的大图像,不刷新图像
- 浏览器宽度> 1000像素 620像素 用于浏览器宽度的
- 470px图片> 470px
- 用于浏览器宽度
问题:WordPress实际上并没有生成所有这些图像尺寸。我必须添加一个插件才能重新创建它们。
然后我想我必须使用类似的功能覆盖默认大小:
function make_responsive_image_sizes_content_image_sizes($sizes,$size) {
return '(max-width: 1200px) 620px,(max-width: 1000px ) 470px,(max-width: 470px) 300px ';
}
add_filter('wp_calculate_image_sizes','make_responsive_image_sizes_content_image_sizes',10,2);
但是,不确定此函数是否编写正确,是否可以帮助我获得所需的内容。在我重新创建所有新缩略图之前,请创建一个函数,以便自动为每张新上传的图像生成新尺寸,我想在以下方面向您寻求帮助:
- 了解为什么它在我的实时站点的测试示例中不起作用
- 修复该函数以覆盖wp默认大小以防需要修复的情况
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。