Combining media queries with image sizes

First off, kudos to this pretty cool solution.

I think you’re on the right track and not sure how much more you could do. You could certainly replicate the above with PHP & CSS, thus not requiring jQuery. It would require you to have an array of your sizes and just loop through them. This would be a PHP file in your /CSS directory, and can be enqueued like any other stylesheet.

<?php

// Tag as CSS file

header("content-type: text/css");

include '../../../../wp-load.php';

ob_flush();

// Pull in Sizes & Image Size Names

$array = array (
    'size1' => array ( 'b_min' => '960', 'b_max' => '1039', 'img_size' => '1039' ),
    'size2' => array ( 'b_min' => '800', 'b_max' => '960', 'img_size' => '960' )
);

// Loop

foreach ( $array as $size ) : 

    echo '@media only screen and (min-width: ' . $size->b_min . 'px) and (max-width: ' . $size->b_max . 'px) {';

         echo 'div.container {background-image: /* Your image url code */ }';

    echo '}';

endforeach;

?>

This would solve your reliance on javascript.

Related Posts: