Hot Scorn
Using the Soliloquy Plugin with Wordpress 4.4+’s Native Responsive Images

Using the Soliloquy Plugin with Wordpress 4.4+’s Native Responsive Images

Soliloquy is one of the more popular Wordpress slider plugins, and for good reason. The backend interface it provides has a healthy selection of options, and the paid add-ons neatly extend what the plugin offers.

My one major gripe, though, is its tendency to produce huge images, speaking in terms of file size, of course. Soliloquy bypasses Wordpress’ native image handling in favor of having one normal and one ’mobile’ version, meaning most users are given the largest version possible. Worst was since it wasn’t managed by Wordpress, compression plugins like WP SmushIt or EWWW couldn’t see it to be optimized. This would not do.

There are four hooks we will need to employ to make Soliloquy use Wordpress’ native image handling, which in version 4.4 and above includes srcset support for responsive images in the browser. I also use WP Retina 2X to extend this native behavior to support high pixel density displays, and no additional code was needed for Soliloquy to do this. You can see the code below or on gist.


// Make Soliloquy sliders use wp's native responsive images with wp retina
function my_theme_soliloquy_output($slider, $data) {
    return wp_make_content_images_responsive($slider);
}
add_filter('soliloquy_output', 'my_theme_soliloquy_output', 10, 2);

// wp_make_content_images_responsive needs the img tags to have a class with their id
function my_theme_soliloquy_image_slide_class($classes, $item, $i, $data, $mobile) {
    $classes[] = 'wp-image-' . $item['id'];
    return $classes;
}
add_filter('soliloquy_output_item_image_classes', 'my_theme_soliloquy_image_slide_class', 10, 5);

// Alter the image source that soliloquy uses so that responsive images will work
function my_theme_soliloquy_image_src($src, $id, $item, $data) {
    $base_url = trailingslashit( _wp_upload_dir_baseurl() );
    $image_meta = get_post_meta( $item['id'], '_wp_attachment_metadata', true );
    return $base_url . $image_meta['file'];
}
add_filter('soliloquy_image_src', 'my_theme_soliloquy_image_src', 10, 4);

// Hook to disable soliloquy's preloading which stops responsive images being used.
function my_theme_soliloquy_disable_preloading($disabled, $data) {
    return true;
}
add_filter('soliloquy_disable_preloading', 'my_theme_soliloquy_disable_preloading', 10, 2);

Full Disclosure: I’m still pretty new with Wordpress, and I know there are still some small undesireable behaviors I haven’t overriden on the backend (namely the large image versions are still being generated, just not used). Please let me know if you have ideas for improvements over what I’ve given above.

HotScorn.com
Hey There!
What is This?