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

[maxpanas]

The repo for the boilerplate is: https://github.com/MozaikAgency/wp-theme-bootstrap The helper mentioned below: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/master/theme/library/class-ri.php Code demoing how the helper would be used: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/ccdfb983676a94b5ff74e9ad4371c2cabd25d432/theme/page.php

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.

The latest addition to this library is a small responsive images/background-images class which leverages the responsive images spec (polyfilled via picturefill (https://github.com/scottjehl/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' lazySizes javascript library (https://github.com/aFarkas/lazysizes) to optionally lazy-load specific images. Finally the default configuration of the theme boilerplate also includes anselmh's object-fit polyfill (https://github.com/anselmh/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://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263790-object-fit-and-object-position)

That's all. We use this boilerplate at work everyday on new projects. Hope you find it useful/interesting!

[maxpanas]

All links in above txt:

1. The repo for the boilerplate is: https://github.com/MozaikAgency/wp-theme-bootstrap

2. The helper mentioned: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/mast...

3. Code demoing how the helper would be used: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/ccdf...

4. Resp images polyfill - PictureFill: https://github.com/scottjehl/picturefill

5. lazy-loading content js lib - lazySizes: https://github.com/aFarkas/lazysizes

6. object-fit polyfill - 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...