Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap responsive images script to fetch the appropriate sized image based on the breakpoint and column width.
function findBootstrapEnvironment() {
var envs = ['xs', 'sm', 'md', 'lg'];
var $el = $('<div>');
$el.appendTo($('body'));
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
$el.addClass('hidden-'+env);
if ($el.is(':hidden')) {
$el.remove();
return env;
}
}
}
function responsiveBootstrapImages() {
$('img[data-src]').filter(function(index){return !$(this).attr('src');}).each(function() {
var en = findBootstrapEnvironment();
var el = $(this).closest('*[class*="col-'+en+'"]');
var cl = el.attr('class').split(" ");
var col = 1;
for( var i = 0, l = cl.length; i<l; ++i ) {
var re = new RegExp(en, 'g');
if(cl[i].match(re)) {
col = cl[i].slice(-1);
}
}
$(this).attr('src',$(this).data('src')+'&r=4:3&s='+en+'&m='+col); // Use your own thumbnail library logic here.
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.