Create A Forum - Support Forums

This will resize any images posted by users that are above a certain threshold while preserving the aspect ratio. (preview)


This code utilizes jQuery, please use the latest version found in this thread: http://support.createaforum.com/5/jquery-v1-8-update/

Then place this in your headers/footers:
<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>