Jacob Dunn

phenomblue

The PB Responsive Images plugin automatically reformats all images in the post content into a format similar to the picture tag proposed by the <a href="http://www.w3.org/community/respimg/" rel="nofollow ugc">Responsive Images Community Group on w3.org</a>.
The default configuration provides the necessary image sizes for the Twenty Eleven theme for reference; you’ll have to customize the configuration to fit your theme best. Eace image is reformatted based on standard CSS media queries and SLIR image query pairs, giving a huge amount of flexibility in the variety of query combinations. For example, with a media query of <code>(min-width:500)</code> and a resize query of <code>w700</code>, a version of the image at most 700 pixels wide will display only when the screen is greater than 500 pixels wide. Additionally, the plugin provides shortcodes that allow you to customize the queries used per image, and helper functions that can be used to customize the queries used per post or per layout.
For additional information or help on implementing this plugin, use the “Help” tab on the upper right of the plugin screen, which has detailed explanations on each portion of the plugin. If that doesn’t help, please post your questions to <a href="https://wordpress.org/support/plugin/pb-responsive-images" rel="ugc">the forums</a> on wordpress.org.

PB Responsive Images

Adds support for the proposed responsive image format in post content, and helper functions for theme authors.

Adds fallback support for the HTML5 <a href="http://html5doctor.com/the-details-and-summary-elements/" rel="nofollow ugc"><details> and <summary> elements</a> in browsers that don’t support them using <a href="http://mathiasbynens.be/notes/html5-details-jquery" rel="nofollow ugc">Mathias Bynens’ <details>/<summary> jQuery plugin.</a>
Once the plugin is activated on your site, the following HTML should work in all modern browsers, even if they don’t natively support the <details> and <summary> elements:
<pre><code><details>
 <summary>Click for more info...</summary>
 This is where you'd add the additional content that won't be seen until the "summary" is clicked.
</details>
</code></pre>

HTML5 Details Polyfill

Adds fallback support for the HTML5 <details> and <summary> elements in browsers that don't support them.

PB Responsive Images vs HTML5 Details Polyfill