Waldo: Responsive CSS Background Images for WordPress

It’s no secret: the handling of responsive images with regards to web development has been in flux for a while now. We know that responsive images need to be optimized for the device resolution on which they are being viewed – but there are no standards, or even generally agreed upon solutions for serving these images to web pages.

That challenge is why we built Waldo – a free, open-source solution we’re releasing today to help manage responsive images. Read on to learn more and download!

The Challenge with Responsive Images

Mobile-first web development is the industry standard, and for good reason; images are one of the leading causes of page bloat and slow loading times, especially on mobile devices and cellular networks. Any place that these images can be optimized helps the performance of a site.

Often responsive images are handled using inline styles (which does not pass most code validation), or JavaScript (which can be complicated, and fails completely if a user has JavaScript disabled in their browser). In our web projects, we most commonly used PHP to dynamically fetch images and render inline styles that set the image sizes in media queries. After using this method for a period of time, we actively sought a better way to dynamically generate responsive image styles without relying on inline code.

Waldo was the result of that exploration.

What Is Waldo?

Waldo is an extension for WordPress and other PHP-based applications that dynamically generates responsive CSS background image styles. If you’re a web developer, it’ll greatly improve how you serve background images in your web projects.

The Benefits of Using Waldo

No blocks of inline style! Yay for valid code! You also avoid the previously mentioned reliance on potentially complicated solutions that involve Javascript or other front-end modifications.

There’s less coding to be done! Every time that you need to include a responsive background image, Waldo handles all of the work for you. You just need to call Waldo and pass in the appropriate parameters.

If you haven’t been using responsive images for backgrounds, you’ll notice an improvement in the load time and page weight of your pages that utilize Waldo. Appropriately sized images mean smaller page weight, which results in faster load times.

Getting Started: How to Use Waldo

1. Copy waldo-master over to your WordPress theme.
2. Include waldo.php somewhere in your functions.php file.// load Waldo for dynamic responsive CSS background images
   include( ‘waldo-master/waldo.php’ );
3. Enqueue waldo.css in your functions.php file. Ensure the root path of this file is the same as the root path of the theme directory. This file is dynamically generated when Waldo is called. Make sure the file is being enqueued in the footer as far down the DOM as possible.
4. Integrate Waldo into your template files. Before each instance where Waldo is to generate background image styles, get the Advanced Custom Field image object, and store to a variable. Set variable $waldo_styles to the functionwaldoStylesArray() to build styles and save to array. Pass in the ACF image object, a unique name (string), the saved styles array, and a unique class name (string) for this section.$image = get_field(‘ acf_image_field_name ‘);
   $waldo_styles = $waldo->waldoStylesArray( $image, ‘unique-section-name’, $waldo_styles, ‘unique-section-class-name’ );
5. Preload your site cache or click through the pages that utilize the affected template(s) and refresh to view updated responsive image styles.

How Does Waldo Work?

Waldo contains an array of key/value pairs that associates image sizes with media query values. Waldo uses this association to build media query styles for background images from an object that contains matching references to image files. These styles are then saved to waldo.css which is called in the head of your application.

(Not technical enough for you? Read on!)

The Nerdy Technobabble

The array waldo_sizes found in waldo.php must be configured to match the image sizes and their associated min-width media query values that are supported by your theme. The methods in class Waldo() rely on these key/value pairs to properly fetch image references and build the image styles.

The method $waldo->waldoSavedStyles() retrieves an array of saved styles and stores to the global variable $waldo_styles; this method is called on the initialization of Waldo.

For each instance where Waldo is to generate background image styles, call the function $waldo->waldoStylesArray() and assign to the global variable $waldo_styles. Pass in a variable containing the appropriate Advanced Custom Fields image object, a unique section name, the $waldo_styles array, and a unique section class name. This function builds an array of styles at an index assigned to the unique section name, and saves the updated array back to the global variable.

The method $waldo->waldoStyles() uses the $waldo_styles array to build media queries containing the appropriate image styles. It removes whitespace to effectively minify the styles, and saves to waldo.css. This method then saves the $waldo_styles array to waldo-styles.php for future reference. The $waldo->waldoStyles() method is automatically called at the end of each document.

Download Waldo & Get Started Now

By default, Waldo is configured for use with Wordpress 4.4+ in conjunction with Advanced Custom Fields 5.3+, though it is easily modified to function with other PHP-based applications. Get Waldo here, and then follow the configuration and ‘how to’ steps to get started!