Adding Webp support to Revolution Slider

Question

I want Revolution Slider to use webp images if there is any available but it has no support for webp. How can i make this work ?

Answer 1

Open

/wp-content/plugins/revslider/includes/output.class.php

in a text editor.

1. Search for

    if($img_size !== 'full' && $cur_img_id !== false && !empty($cur_img_id)){
        $_urlImage = wp_get_attachment_image_src($cur_img_id, $img_size);
        $urlImage = ($_urlImage !== false) ? $_urlImage[0] : $urlImage;
    }
   

inside the function get_html_layer(). Add

    if ( !empty($urlImage) && !strstr( $urlImage, '.webp' ) )
        $urlImage .= '.webp';

below.

2. Search for

    $url = trim($this->remove_http($url));
   

inside the function get_thumb_url(). Add

    if ( !empty($url) && !strstr( $url, '.webp' ) )
        $url .= ($this->check_valid_image($url.'.webp')) ? '.webp' :  '';

below.

3. Search for

    $img['data-panzoom'] = $this->get_html_pan_zoom();
   

inside the function get_image_data(). Add

    if ( !empty($img['data-lazyload']) && !strstr( $img['data-lazyload'], '.webp' ) )
        $img['data-lazyload'] .= file_exists($img['data-lazyload'].'.webp') ? '.webp' :  '';

below. Next, open

/wp-content/plugins/revslider/includes/functions.class.php

in a text editor. Search for

    $img_exts = array('.gif', '.jpg', '.jpeg', '.png');

inside the function check_valid_image($url). Then add .webp inside the array.

I'm assuming that you have webp images located in the same directory along with the non webp versions as this format:

background.jpeg
background.jpeg.webp