WordPress theme boilerplate, now with responsive(+lazy-loading) image helpers
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!
1 comment
[ 2.5 ms ] story [ 15.3 ms ] thread1. 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...