为Retina.js制作WordPress大小和命名图像

时间:2013-05-21 作者:ArleyM

我是这条路的超级粉丝retina.js 适用于高像素密度显示器。本质上,当它加载图像资产时(通过<img> 或css图像)它将检查@2x 图像的后缀版本(例如,如果有logo.jpg 它将自动显示logo@2x.jpg 如果它存在的话,在它的位置上。

WordPress功能the_post_thumbnail 让我定义各种图像大小,但我想知道是否有办法让它也创建两倍于@2x 后缀也是!

对于主题文件来说,这样做很容易,但对于内容图像来说,这样做也会非常棒。

2 个回复
最合适的回答,由SO网友:Ravinder Kumar 整理而成

检查此Wordpress插件

Wp Retina 2X

SO网友:wp student

好的,这是我的建议。

只需使用wordpress本机媒体设置创建两倍大小的图像副本。然后在模板中添加以下代码。

<?php $normal = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'thumbnail\');
$retina = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'medium\' ); ?>

<img src="<?php echo $normal[0]; ?>" data-at2x="<?php echo $retina[0]; ?> alt="<?php the_title(); ?>" width="xxx" height="xxx"/>
这里,我的缩略图(正常)大小为300x300px,中等缩略图(视网膜)大小为600x600px。还有,别忘了装上视网膜。js否则data-at2x= 不起作用。祝你好运

结束

相关推荐

输出博客帖子或_content()

在仪表板上的“添加页面”下,我在“文本”下有3节blockquotes<blockquote id=\"section1\">first</blockquote> <blockquote id=\"section2\">second</blockquote> <blockquote id=\"section3\">third</blockquote> 所以,当我尝试在索引中输出它们时。p