Responsive Images

时间:2015-02-16 作者:p2or

是否有本机功能可以根据屏幕分辨率显示帖子缩略图或图库图像的正确响应图像大小?

通常我使用:

1、自定义图像大小:

function customImageSetup () {
  add_theme_support( \'post-thumbnails\' );
  add_image_size(\'grid_1 mini square\', 60, 60, TRUE);
  add_image_size(\'grid_2\', 160);
  add_image_size(\'grid_2 square\', 160, 160, TRUE);
  add_image_size(\'grid_4\', 360);
  add_image_size(\'grid_4 square\', 360, 360, TRUE);
  add_image_size(\'grid_6\', 560);
  add_image_size(\'grid_6 square\', 560, 560, TRUE);
  add_image_size(\'grid_8\', 760);
  add_image_size(\'grid_8 square\', 760, 760, TRUE);
  add_image_size(\'grid_10\', 960);
  add_image_size(\'grid_12\', 1160, FALSE);   
}
2。显示缩略图,例如.img-max 分配的班级:

<?php the_post_thumbnail(\'grid_4\', array( \'class\' => "img-max"));?>
3。这个简单的css线条适合图像:

.img-max { width:100%; height:auto; }
这在大多数情况下都有效,但特别是在响应性web设计方面,使用不同屏幕分辨率的自定义图像大小将非常有用。

是否有wordpress功能来替换服务器端没有javascript的图像?

3 个回复
SO网友:Pieter Goosen

加上克里斯蒂安的回答。raiber,Wordpress或php中没有检测屏幕大小的功能,很可能永远不会有这样的功能。Php运行服务器端,在客户端之前运行,客户端是浏览器端。至于php,以及Wordpress,我看不到任何类型的函数将来会以任何形式的可预测和可靠的方式来处理此类检测。

不管你怎么看,都没有什么办法可以证明这一点。服务器端操作是可预测的,我们可以信任,因为它不依赖于最终用户的输入,最重要的是不能由最终用户操纵。客户端操作can 被操纵。

查看以下客户端变量和操作:

用户可以删除或阻止Cookie,州或国家法律也可以阻止Cookie

最终用户可以随时禁用jQuery

浏览器->网站在不同浏览器中的行为不同。最终用户可以禁用浏览器检测

客户端解决方案在某些情况下有效,在其他情况下则不基于上述内容(还有其他几点未提及)。

你可以使用wp_is_mobile() 检测手机(它只在手机上工作,不在平板电脑上工作),然后相应地提供正确的图像大小,BUT, 应注意以下事项

如上所述,这也是一个不可靠的功能,因为它还依赖于客户端操作。在我看来,米老鼠的功能

  • 它不检测屏幕大小,只检测移动电话设备。它在平板电脑上不起作用

    结论唯一正确的解决方案是尽可能优化图像(这需要根据内容大小进行适当规划和调整图像大小。当内容最大宽度为500px时,不要加载700px的图像),然后让浏览器相应地调整图像大小。我知道这会减慢加载时间,因为浏览器会使用大量资源来调整图像大小,但至少您能够可靠地向最终用户提供内容

  • SO网友:William Turrell

    没有本机函数,但RICG Responsive Images plugin 将添加srcset 具有可用图像大小的属性。Srcset(以及<picture> 元素),issteadily gaining browser support - 它不需要任何javascript,由浏览器决定加载哪个是正确的图像。

    对于使用“添加媒体”按钮和there are methods 要在主题模板中手动调用它,您可以修改customImageSetup 要调用的函数tevkori_get_srcset_string(), 例如

    它是非侵入性的,因为它不会对您的媒体库或数据库进行任何更改,如果您卸载它,您的站点将恢复正常。

    SO网友:cristian.raiber

    不,现在没有这样的事。然而,如果你真的对此感兴趣,你可以尝试一种解决方案。

    这是我过去使用过的东西,虽然有其局限性,但效果很好。

    The solution:

    您可以编写一个小JS函数来获取用户当前的屏幕分辨率,并将其写入cookie。如果用户正在调整浏览器窗口的大小,您还需要一个更新存储在cookie中的值的函数。

    您可以使用PHP读取此cookie,并具有以下内容:

    if($screen_resolution > 640 && $screen_resolution < 860) {
    
     the_post_thumbnail(\'your-custom-image-size-for-this-viewport-here\');
    }
    
    附言:请考虑到这个解决方案对缓存系统的效果不太好。

    结束

    相关推荐

    Replace all media (images)

    我为我的Wordpress网站创建了一个新主题,我需要替换网站上的所有媒体(图像),因为我使用的是所有新的图像大小(比我当前网站上最大的图像大小还要大)。98%的图像将使用相同的名称。每个帖子只包含一个(特色)图像,并且帖子的内容区域中没有图像,因此这使工作稍微容易一些。我想知道做这件事最好(最干净)的方法是什么。我考虑了以下因素:使用Wordpress plugin手动删除我所有帖子中的特色图像,删除它们,然后手动添加新图像删除我上传文件夹中的所有媒体,并将其替换为新图像,然后通过以下方式重新生成图像大