Skip to content

Instantly share code, notes, and snippets.

@ramseyp
Created November 21, 2011 02:08
Show Gist options
  • Save ramseyp/1381407 to your computer and use it in GitHub Desktop.
Save ramseyp/1381407 to your computer and use it in GitHub Desktop.
Part of the WP Fluid Images plugin. Replaces pixel-based width & height attributes with style attributes using percentages.
/**
* Name: fluidimage.js
*
* @author Pat Ramsey <pat@slash25.com>
* @copyright Copyright (c) 2011, Pat Ramsey
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @description Part of the WP Fluid Images plugin. Replaces pixel-based width & height attributes with style attributes using percentages.
*
*/
jQuery(document).ready(function($) {
//run the function on the .hentry element ( covers both .post or .page )
cleanImg('hentry');
});
function cleanImg(el) {
jQuery('div.' + el + ' img').each(function() {
// get image width & height attributes
var imgh = jQuery(this).attr('height');
var imgw = jQuery(this).attr('width');
//find width of the .hentry parent div
var postw = jQuery('div.' + el).width();
// Test for existence of .wp-caption
if (jQuery(this).parent('.wp-caption').length > 0) {
// Remove the width & height values from the image (img)
jQuery(this).removeAttr('width').removeAttr('height');
// Set capw to equal the width of the .wp-caption div
var capw = jQuery('.wp-caption').width();
// Remove the style attribute from .wp-caption
jQuery('.wp-caption').removeAttr('style');
// Calculate the width of .wp-caption as a percentage of the width of .hentry
var caperc = ((capw / postw) * 100);
// Write a style attribute with width as a percentage
jQuery('.wp-caption').attr('style','width:' + caperc + '%";');
} else {
//Remove the width & height attributes. If the image width exceeds the .hentry container, set style attribute to width:100%
if (imgw > postw) {
jQuery(this).removeAttr('width').removeAttr('height').attr('style','width="100%;');
}
//Remove the width & height attributes. If the image width is narrower than the .hentry container, calculate the width of the image as a percentage of the container width, set style attribute to width:%
if (imgw < postw) {
var nperc = ((imgw / postw) * 100);
jQuery(this).removeAttr('width').removeAttr('height').attr('style','width:' + nperc + '%";');
}
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment