Replacing standard Image Control with Cropped Image control in the Customizer in Altitude Pro

In the members-only forum, a user asked:

Hi,

Now that WP has native support for responsive images – wouldn’t it be great to be able to use srcset for the big beautiful background images often used in the widgets area. (For example in Altitude Pro) At the moment it looks at whatever image is selected in the customizer, but it’s the original image file that is being returned. If an unknowing client changes that to a huge file, the site will load an unnecessary large image file on smaller screens.

This is not an issue for genesis only, many other themes have the same issues, but so far I haven’t seen any good and simple step by step tutorials on exactly how to achieve this. Maybe an opportunity to bridge the gap?

The built-in responsive images support in WordPress can be leveraged for inline (embedded) images but not for background images, especially the ones set via the WordPress Customizer.

The next best thing we can do is to set automatic cropping for the images uploaded in the Customizer so they have reasonable file size and are not huge in case site owner/client uploads gigantic images.

In this tutorial, we shall replace instances of WP_Customize_Image_Control with those of WP_Customize_Cropped_Image_Control for Front Page sections 1, 3, 5 and 7 in Altitude Pro. Once we have this in place, whenever a large image is uploaded as a background image for one of these front page widget areas, the user will be prompted to crop the image to 1600 x 1050 and when done, this cropped image's URL will be used on the front end vs the full image URL.

While the tutorial has been written for Altitude Pro child theme it should work with minor adjustments in other similar child themes like Parallax Pro.

Step 1

Due to a possible bug in WP_Customize_Cropped_Image_Control (and WP_Customize_Media_Control), at the moment it is not possible to specify URLs of default images that appear in the Customizer. Hence we shall upload the default images to the WordPress Media Library, note their attachment IDs and specify them in a later step.

Upload bg-1.jpg, bg-3.jpg, bg-5.jpg and bg-7.jpg from Altitude Pro's images directory to the Media.

Step 2

Edit lib/customize.php.

Replace

foreach( $images as $image ) {

    $wp_customize->add_setting(
        $image .'-altitude-image',
        array(
            'default'           => sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $image ),
            'sanitize_callback' => 'esc_url_raw',
            'type'              => 'option',
        )
    );

    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            $image .'-altitude-image',
            array(
                'label'    => sprintf( __( 'Featured Section %s Image:', 'altitude-pro' ), $image ),
                'section'  => 'altitude-settings',
                'settings' => $image .'-altitude-image',
                'priority' => $image+1,
            )
        )
    );

}

with