Using PHP Glob with Retina.js pulls all images including @2x

Question

I'm using http://retinajs.com/ (Retina.js) for my portfolio site. Retina.js requires the @2x image to be placed within the same directory using the same file name and extension. For example, image01.jpg will be replaced with [email protected] when retina.js notices that a device is using a higher DPI.

My problem is that I'm also using the PHP glob function to retrieve all of the image files within a directory and display them on a page. This means that it also pulls the @2x image at the same time even on a normal 72 dpi screen. But the @2x image is only supposed to load on a screen with a higher DPI.

My simple PHP code is:

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

    foreach($files as $file) {

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

    }   

Is there any way of making retina.js and PHP glob work together? My aim to to pull all of the images within a directory except the @2x image for a normal 72dpi screen.

Thanks in advance!

Answer 1

The simple way:

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.'" />';
    }
}