

WordPress theme boilerplate, now with responsive(+lazy-loading) image helpers - maxpanas

The repo for the boilerplate is: https:&#x2F;&#x2F;github.com&#x2F;MozaikAgency&#x2F;wp-theme-bootstrap
The helper mentioned below: https:&#x2F;&#x2F;github.com&#x2F;MozaikAgency&#x2F;wp-theme-bootstrap&#x2F;blob&#x2F;master&#x2F;theme&#x2F;library&#x2F;class-ri.php
Code demoing how the helper would be used: https:&#x2F;&#x2F;github.com&#x2F;MozaikAgency&#x2F;wp-theme-bootstrap&#x2F;blob&#x2F;ccdfb983676a94b5ff74e9ad4371c2cabd25d432&#x2F;theme&#x2F;page.php<p>Apart from the core feature of the theme starter, which is the robust build process, the theme boilerplate also comes with a small but growing library of helper classes for developing modern themes with WordPress.<p>The latest addition to this library is a small responsive images&#x2F;background-images class which leverages the responsive images spec (polyfilled via picturefill (https:&#x2F;&#x2F;github.com&#x2F;scottjehl&#x2F;picturefill)) and the WordPress custom media sizes to make it a little easier to implement responsive images in your WordPress theme. The helper also supports aFarkas&#x27; lazySizes javascript library (https:&#x2F;&#x2F;github.com&#x2F;aFarkas&#x2F;lazysizes) to optionally lazy-load specific images. Finally the default configuration of the theme boilerplate also includes anselmh&#x27;s object-fit polyfill (https:&#x2F;&#x2F;github.com&#x2F;anselmh&#x2F;object-fit) to allow you to use the object-fit css properties on your images. (btw please vote for this feature to be included in IE Edge!: https:&#x2F;&#x2F;wpdev.uservoice.com&#x2F;forums&#x2F;257854-microsoft-edge-developer&#x2F;suggestions&#x2F;6263790-object-fit-and-object-position)<p>That&#x27;s all. We use this boilerplate at work everyday on new projects. Hope you find it useful&#x2F;interesting!
======
maxpanas
All links in above txt:

1\. The repo for the boilerplate is: [https://github.com/MozaikAgency/wp-
theme-bootstrap](https://github.com/MozaikAgency/wp-theme-bootstrap)

2\. The helper mentioned: [https://github.com/MozaikAgency/wp-theme-
bootstrap/blob/mast...](https://github.com/MozaikAgency/wp-theme-
bootstrap/blob/master/theme/library/class-ri.php)

3\. Code demoing how the helper would be used:
[https://github.com/MozaikAgency/wp-theme-
bootstrap/blob/ccdf...](https://github.com/MozaikAgency/wp-theme-
bootstrap/blob/ccdfb983676a94b5ff74e9ad4371c2cabd25d432/theme/page.php)

4\. Resp images polyfill - PictureFill:
[https://github.com/scottjehl/picturefill](https://github.com/scottjehl/picturefill)

5\. lazy-loading content js lib - lazySizes:
[https://github.com/aFarkas/lazysizes](https://github.com/aFarkas/lazysizes)

6\. object-fit polyfill - Object-fit: [https://github.com/anselmh/object-
fit](https://github.com/anselmh/object-fit)

7\. Vote for object-fit to be included in IE:
[https://wpdev.uservoice.com/forums/257854-microsoft-edge-
dev...](https://wpdev.uservoice.com/forums/257854-microsoft-edge-
developer/suggestions/6263790-object-fit-and-object-position)

