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

1 point

11 years ago

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!

1 comment