Skip to content
Responsive Images shortcode plugin.
PHP Other
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

BC Responsive Images

Enables developers to generate Responsive Images and Markup, "Mobile First" via their template files.


BC Responsive Images is a WordPress plugin to enable developers to automatically generate Responsive Images via their template files.

Originally created by Burfield's team of Bath WordPress Designers for internal use, we have subsequently released it as a Plugin with the following features

  • Mobile first - utilizes the excellent jQuery Picture Plugin & Picturefill as markup patterns to serve appropriately sized images when required.
  • Resizes images on-the-fly - powered by the superb WPThumb Plugin (where available) to avoid the dreaded "Regenerate Thumbnails" issue. Falls-back to WP Core images.
  • Fully featured temaplte functions to allow developers to create Responsive Images within templates.
  • Simple yet powerful - use default breakpoints from the Plugin, define with filters, or access the public functions directly to define your own markup on a case-by-case basis.


  1. Installation the Plugin as normal.
  2. Install
  3. Include you desired markup pattern js file

Minimal Setup

Uses built in breakpoints and Picturefill Markup Pattern.

  1. Init the class and define the image to use (attachment ID or src).
$args = array(              
    'image' => $slide->image,
BC_Responsive_Images::load_responsive_markup( $args );

This will output imagery for the breakpoints and settings defined in the get_default_settings() function whcih can be hooked via bc_ri_default_settings filter.

Customisable Options

This would be a full blown, all options set, take on the world and win, setup:

$args = array(

    'image' => attachment_id OR url,

    //each image setting
    'settings' => array(

        //foreach required image, breakpoint option
            'name' => 'Name',
            'breakpoint' => 99,

            'width' => 100,
            'height' => 100,
            // and any other wpthumb args you'd like to define



    'picturefill_manual_init' => true, //stops picturefill.js from loading too soon

    'custom_markup_classes' => array( 
        'container' => 'lazyload'
    ), //allows developer to wrap markup

    'data_lazy_ratio' => "16:9" //attaches data-attr to correct markup position

    'type' => '%%MARKUP OPTION%%' //jquerypicture_figures || jquerypicture_pictures || picturefill(default)

    'fallback' => array(key=>values, //just like a breakpoint option), OR %%BREAKPOINT NAME%%

    'ie_fallback' => array(key=>values, //just like a breakpoint option), OR %%BREAKPOINT NAME%%

    'image_alt' => 'Complete overide' //by default this will pull the attachemnt_alt data then create a string based on post_title so its never empty. thats a good thing.


Ultimately this will provide you with an array full of responsive goodness.

The class uses functions which have been declared as public so if you only want a subset of the generated data, there should be a function to help you access the data cleanly.

Internal Public Functions

  • get_image
  • get_image_settings
  • get_sized_srcs
  • get_image_alt

Intended for output

  • load_responsive_markup (DOES load responsive markup pattern, DOES NOT return data)
  • image_markup (DOES load single image markup pattern, DOES NOT return data)
  • image_data (DOES NOT load any markup pattern, DOES return data)

Frequently Asked Questions

Is this easy to use?

For a developer/someone with control over and understanding of their templates, YES :).

== Screenshots ==

  1. A coded example of utilizing the plugin

== Changelog ==

= 1.0.0 =

  • Major Release - will break older versions = 0.1.0 =
  • Alpha release.

== Upgrade Notice ==

= 1.0 = This version is a complete overhaul to allow developers to have full control over markup whilst making each image a doddle.

Something went wrong with that request. Please try again.