Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Make Soliloquy use the native responsive image handling from Wordpress 4.4+
// 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);

This comment has been minimized.

Copy link

@joshuaiz joshuaiz commented Jul 6, 2017

For anyone else coming upon this, WordPress will give an error with the above code.

Change line 17 to:

 $base_url = wp_get_upload_dir();

And it should work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment