使用PHP Glob和Retina.js拉取所有图像，包括@2x

Question

我使用http://retinajs.com/ (Retina.js)来创建我的投资组合站点。Retina.js要求使用相同的文件名和扩展名将@2x图像放置在同一目录中。例如，当retina.js注意到设备正在使用更高的DPI时，image01.jpg将被替换为image01@2x.jpg。

我的问题是，我还使用PHP glob函数来检索目录中的所有图像文件，并将它们显示在页面上。这意味着，即使在正常的72dpi屏幕上，它也可以同时拉出@2x图像。但是@2x图像应该只在DPI较高的屏幕上加载。

我的简单PHP代码是：

$files = glob('images/projects/'.$filename.'/*.{jpg}', GLOB_BRACE);

    foreach($files as $file) {

        echo '<img src="'.$file.'" title="'.$title.'" />';

    }   

有没有办法让retina.js和PHP glob协同工作？我的目标是拉取一个目录中的所有图像，除了72dpi普通屏幕上的@2x图像。

提前感谢！

Answer 1

简单的方法：

foreach($files as $file) {
    //check that the file doesn't have @2x in the name.
    if(strpos($file, '@2x')===false){
        echo '<img src="'.$file.'" title="'.$title.'" />';
    }
}