Skip to content

Instantly share code, notes, and snippets.

@donaldallen
Created June 22, 2014 01:43
Show Gist options
  • Save donaldallen/d0be4c6ff16e08b86ebf to your computer and use it in GitHub Desktop.
Save donaldallen/d0be4c6ff16e08b86ebf to your computer and use it in GitHub Desktop.
Adds async="true" to your enqueued picturefil(.min).js
<?php
/**
* Plugin Name: Picturefill Async
* Description: Adds <code>async</code> to picturefill's enqueued js.
* Version: 1.0
* Required: 3.9
* Author: Donald Allen
* Author URI: http://donaldallen.com/
* License: GPL
* License URI: http://www.gnu.org/copyleft/gpl.html
*/
if (!defined('ABSPATH')) {
exit;
}
if (!function_exists('picturefill_async')) {
function picturefill_async($url)
{
if (!strpos($url, 'picturefill')) {
return $url;
}
return "$url' async='true";
}
add_filter('clean_url', 'picturefill_async', 11, 1);
}
@donaldallen
Copy link
Author

Also, sample of using a device-pixel-ratio media query:

<picture>
    <source srcset="<?php echo $image_retina; ?>" media="only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx)">
    <source srcset="<?php echo $image; ?>">
    <img srcset="<?php echo $image; ?>" alt="">
</picture>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment