WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Picturefill.WP

A WordPress plugin to use picturefill.js to load responsive/retina images, mimicking the proposed HTML5 picture spec.

Details

Picturefill.WP looks through the_content to find <img> elements like this:

<img class="alignnone size-large wp-image-123" alt="Accessible alternate text for the image" title="A title that displays on hover" src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg" width="770" height="577" />

then replaces them with something like this (visit the GitHub repository for a breakdown of the syntax):

<span data-picture data-class="alignnone size-large wp-image-123" dat-alt="Accessible alternate text for the image" data-title="A title that displays on hover" data-width="770" data-height="577">
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-150x150.jpg" data-width="150" data-height="150" data-media="(min-width: 1px)" class="picturefill-wp-source thumbnail"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-300x300.jpg" data-width="150" data-height="150" data-media="(min-width: 1px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina thumbnail"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-400x300.jpg" data-width="400" data-height="300" data-media="(min-width: 420px)" class="picturefill-wp-source medium"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-800x600.jpg" data-width="400" data-height="300" data-media="(min-width: 420px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina medium"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg" data-width="770" data-height="577" data-media="(min-width: 790px)" class="picturefill-wp-source large"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-1540x1155.jpg" data-width="770" data-height="577" data-media="(min-width: 790px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina large"></span>
  <noscript>
    <img class="alignnone size-large wp-image-123" alt="Accessible alternate text for the image" title="A title that displays on hover" src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg" width="770" height="577" />
  </noscript>
</span>

The adapted version of picturefill.js then looks for the last data-src listed where the associated data-media matches the device and browser, and loads the appropriate image inside the matched <span> element.

Extending Picturefill.WP

See the Extending Picturefill.WP subsection of the GitHub repository for a list of plugin hooks and examples.

Advanced Use

Markup Tricks

Limit Responsiveness

The responsiveness of an image can be limited by adding the class min-size-{image size}. For example, an image with the class min-size-medium will not load an image smaller than size medium.

Skip Images

To skip images and load them normally add the attribute data-picturefill-wp-ignore to the <img> tag.

Helper Functions

See the helper functions section of the documentatin on GitHub.

Requires: 3.2 or higher
Compatible up to: 3.9.1
Last Updated: 2014-7-3
Downloads: 3,305

Ratings

5 stars
5 out of 5 stars

Support

3 of 8 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
0,1,0
100,1,1
100,1,1 100,1,1