Skip to main content

[WP] Using WordPress responsive images

Since version 4.4 WordPress supports responsive images. To use this feature in RoyalSlider, you need to modify slide markup.

Step 1: go to your theme functions.php and add such code:

function newrs_add_resp_img_variable($m, $slide_data, $options) {

    $m->addHelper('responsive_image_tag', function() use ($slide_data) {

            $attachment_id = 0;
            if (is_object($slide_data) && isset($slide_data->ID) ) {
                if ( get_post_type($slide_data) === 'attachment' ) {
                    $attachment_id = $slide_data->ID;
                } else {
                    $featured_image_id = get_post_thumbnail_id($slide_data->ID);
                    if ($featured_image_id) {
                         $attachment_id = $featured_image_id;
                    }
                }
            } else if( isset($slide_data['image']) && isset($slide_data['image']['attachment_id']) ) {
                $attachment_id = $slide_data['image']['attachment_id'];
            }

            if( $attachment_id ) {
                $att_src = wp_get_attachment_image_url( $attachment_id, 'large' );
                $att_srcbig = wp_get_attachment_image_url( $attachment_id, 'full' );
                $att_srcset = wp_get_attachment_image_srcset( $attachment_id, 'large' );
                $att_alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
                return '<img src="'.$att_src.'" data-rsBigImg="'.$att_srcbig.'" srcset="'.$att_srcset.'" alt="'.$att_alt.'" />';
            }

            return '{{image_tag}}';
    } );

}
add_filter('new_rs_slides_renderer_helper','newrs_add_resp_img_variable', 10, 4);

It'll create {{responsive_image_tag}} variable that will work for "custom" slider, as well as for "gallery" type of slider.

Step 2: go to slider General Options, click Edit Slide Markup and instead of {{image_tag}}, add {{responsive_image_tag}}.

Step 3: optionally style the image, since default JS-based scaling will not apply, for example to make images fit into slide:

.rsSlide img {
    display: block;
    height: 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 0;
    margin: auto;
}

Note:

  • This method isn't supported for 500px, Flickr or Instagram sliders, as images are resized by third-party service.
  • This method doesn't support lazy-loaded images, due to problems with retrieving image size and source in some mobile browsers. You may add IMG elements dynamically, or switch href attribute of a.rsImg before the initialization.
  • If you remove rsImg class - slider won't be able to preload or scale the image via JS, use CSS to apply scaling, as shown in http://codepen.io/dimsemenov/pen/jhsJL