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.
- Installation the Plugin as normal.
- Include you desired markup pattern js file
Uses built in breakpoints and Picturefill Markup Pattern.
- 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
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 array( '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
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 ==
- 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.