Created
April 6, 2013 13:02
-
-
Save chadwick37/5326051 to your computer and use it in GitHub Desktop.
Resize any images posted by users that are above a certain threshold while preserving the aspect ration.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style type="text/css"> | |
div.resized_image p { | |
margin: 2px; | |
margin-top: 0; | |
font-size: 8px; | |
/* Awesome icon from here: http://www.famfamfam.com/lab/icons/silk/ */ | |
background: url(http://i242.photobucket.com/albums/ff244/9861_omikron/error.png) no-repeat; | |
padding-left: 20px; | |
color: #333; | |
} | |
</style> | |
<script type="text/javascript"> | |
$(document).ready(function() { | |
( | |
function(maxht, maxwt, minht, minwt) { | |
var imgs = $(".post_wrapper img.bbc_img"); | |
// Image resizing function | |
var resize_image = function(img, newht, newwt) { | |
img.height = newht; | |
img.width = newwt; | |
$(img).wrap('<table><tr><td class="plainbox"><div class="resized_image"><a href="' + img.src + '" target="_blank"></a><></td></tr></table>'); | |
$(img).parent().before('<p>NOTE: This image was resized. To view it full-size, click on the image.</p>'); | |
$(img).parent().after('<p style="text-align:right;background:none;margin:0;padding-right:3px"><a href="http://vikhyat.net/code/resize_large_images_js/">Image Resizing Script</a>.</p>'); | |
}; | |
for (var i = 0; i < imgs.length; i++) { | |
// Set a variable for the current image to make the code make more sense. | |
var img = imgs[i]; | |
if (img.height > maxht || img.width > maxwt) { | |
// Use Ratios to constraint proportions. | |
var old_ratio = img.height / img.width; | |
var min_ratio = minht / minwt; | |
// If it can scale perfectly. | |
if (old_ratio === min_ratio) { | |
resize_image(img, minht, minwt); | |
} | |
// We need to do some magic now. | |
else { | |
var newdim = [img.height, img.width]; | |
// Sort out the height first. | |
newdim[0] = minht; | |
// The logic behind this is that if ratio = ht / wt, then wt = ht / ratio. | |
newdim[1] = newdim[0] / old_ratio; | |
// Do we still have to sort out the width? | |
if (newdim[1] > maxwt) { | |
// Just do what we did with the height | |
newdim[1] = minwt; | |
newdim[0] = newdim[1] * old_ratio; | |
} | |
// So yeah, resize the image | |
resize_image(img, newdim[0], newdim[1]); | |
} | |
} | |
} | |
} | |
)(500, 500, 500, 500); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment