jQuery + Flickr + Picturefill = Respondr
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
src
test
.bowerrc
.editorconfig
.gitignore
.jshintrc
.travis.yml
CONTRIBUTING.md
Gruntfile.js
LICENSE
README.md
bower.json
package.json
respondr.jquery.json

README.md

Respondr

jQuery + Flickr + Picturefill = Respondr

Well, not really Picturefill, specifically. But rather the HTML spec that gives us <picture> and srcset and sizes. But it's still a good idea to use Picturefill along with Respondr.

Currently, Respondr looks for WordPress-Shortcode-inspired strings in your HTML and replaces them with an image element that contains srcset and sizes that are pulled in from Flickr.

I created this plugin to scratch my own itch. Because I am building this to work with Jekyll, GitHub Pages, and Average People Who Know Nothing About Web Development, it needs to be client-side and simple for content authors. All the author needs to know is the Flickr ID of the images they want to include. Folks like you and I will take care of the rest through how we call Respndr and our CSS rules.

If you are not using GitHub Pages to run a site for a friend/client, there are probably better options for getting responsive images into your site that won't bounce your content around while loading.

Getting Started

Download the production version or the development version.

For example, in your web page:

<script src="jquery.js"></script>
<script src="respondr.min.js"></script>
<script>
jQuery(function($) {
  $.respondr({apiKey: '98q34fhfwq0wiodnv0383nf0hei'}) // (This key is fake, use your own)
  $('.elements-to-search').respondr('100vw');
});
</script>

Documentation

Setting your API Key

To use Respondr, you'll need to provide a Flickr API Key. After loading respondr.js, but before calling the collection method that actually does the replacing, add the following:

$.respondr({apiKey: 'your key here'});

After that is done, you can start replacing strings with images.

Other options

// Static method default options.
$.respondr.options = {
  apiKey: '',
  usePicturefill: false,
  callback: function(jQueryObject){return;}
};

apiKey: (string, required) Sets the Flickr API key. usePicturefill: (boolean) Calls window.picturefill() automatically after the replacement is done since the kind of DOM alteration does not trigger Picturefill natively. callback: (function) Optionally define a callback that will be fired after the string has been replaced with the new DOM elements. The jQuery object passed in is the <span> that wraps the newly-created <picture> element.

Strings for valid replacement

In your HTML, you'll need to include strings that Respondr knows to look out for. They will look like this:

[respondr 123984127]

That's it. The number is replaced with the Flickr ID of the image. As of now, there is no way to add alt text to the image, but that is coming.

As of 0.3.0, you can add the keyword "gallery" to the shortcode followed by an album ID.

[respondr gallery 72157650653171405]

This will create a div filled with shortcodes for images in that album. Those shortcodes will immediately be processed via respondr() with the same arguments originally passed in.

Call Respondr's collection method

At the bottom of your page, call the collection method like you would any other jQuery chainable method.

$('.divs-that-might-contain-replacement-strings').respondr();

Note: Don't use 'body' or 'html' as the jQuery selector. I don't knwo why it doens't work right now, but it doesn't. If you truly want to search the entire page (which I don't recommend), use 'body > *' as the selector.

respondr() takes 2 optional arguements.

respondr(mediaQueries, includeSquares)

  • mediaQueries: String. This is what will be placed in the sizes attribute of the img tag. Defaults to '100vw'.
  • includeSquares: Boolean or String. Flickr image sizes include versions of an image cropped to be square. false will exclude those sizes from the srcset tag on the image. true will include those sizes. Setting the value to the string 'only' will exclude all non-square images. Note: Flickr only labels two fairly small images as "Square", even if the dimensions of all images are, technically, square. Right now it looks like the biggest size you'll get is 150x150. Default is false.

Examples

Check out the examples page.

Release History

0.3.0: Adds [respondr gallery xxxxxxxx] to the mix. 0.2.1: Attempt to fix a bug where picturefill wasn't being called. This was possibly due to some kind of race condition. Also adds some custom errors. 0.2.0: Add options for a callback and to automatically call picturefill().
0.1.0: Initial release with minimal feature set.