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 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
You can’t perform that action at this time.