我真的抓狂了，想用Wordpress找出响应图像的最佳方法。Zurb刚刚为其基础框架发布了一个新的javascript插件。我在自定义主题中使用Foundation，但我不确定如何使特色图像与此配合使用？有人能帮我把它和WP一起使用吗？
附：我只是想澄清一下。并不是说要让图像具有响应性。我知道怎么做，但我说的是加载WP根据屏幕大小或设备创建的不同大小的图像。实现ZURB与WordPress的互换
2 个回复
最合适的回答,由SO网友:Myk Klemme 整理而成
如果尚未在主题中启用缩略图，请将此snippit添加到函数中。php：
add_theme_support(\'post-thumbnails\');
add_image_size( \'responsive-small\', 300, 500 );
add_image_size( \'responsive-large\', 768, 500 );
function( \'unique_identifier\', width, height);
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$smallsrc = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'responsive-small\' );
$largesrc = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'responsive-large\' );
?>
<img src="<?php echo $smallsrc[0]; ?>" data-interchange="[<?php echo $smallsrc[0]; ?>, (only screen and (min-width: 1px))], [<?php echo $smallsrc[0]; ?>, (only screen and (min-width: 768px))], [<?php echo $largesrc[0]; ?>, (only screen and (min-width: 1280px))]">
<?php endwhile; endif; ?>
SO网友:JPollock
老问题了，但我想我应该分享我的解决方案，它通过为post\\u thumbnail\\u html添加一个过滤器，使所有图像都有响应。
add_filter(\'post_thumbnail_html\', \'slug_responsive_img\', 5, 5);
//Image sizes for Interchange
add_image_size( \'fd-lrg\', 1024, 99999);
add_image_size( \'fd-med\', 768, 99999);
add_image_size( \'fd-sm\', 320, 9999);
function slug_responsive_img($html, $post_id, $post_thumbnail_id, $size, $attr) {
//make image links
$attachment_id = $post_thumbnail_id;
$default = wp_get_attachment_image_src($attachment_id);
$size = \'fd-sm\';
$small = wp_get_attachment_image_src($attachment_id, $size);
$size = \'fd-med\';
$med = wp_get_attachment_image_src($attachment_id, $size);
$size = \'fd-lrg\';
$lrg = wp_get_attachment_image_src($attachment_id, $size);
//create image tag with queries
$html = \'<img src="\'.$default[0].\'"\';
$html .= \'data-interchange="[\'.$default[0].\', (default)],\';
$html .= \'[\'.$small[0].\', (only screen and (min-width: 320px))],\';
$html .= \'[\'.$med[0].\', (only screen and (min-width: 768px))],\';
$html .= \'[\'.$lrg[0].\', (only screen and (min-width: 1024px))],\';
$html .=\'">\';
return $html;
}
结束