Author Topic: [code] Auto-resize large images  (Read 6317 times)

0 Members and 0 Guests are viewing this topic.

Offline celebrus

  • Newbie
  • *
  • Posts: 1
  • Karma: 0
    • View Profile
[code] Auto-resize large images
« on: October 07, 2010, 07:35:13 am »
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:
Code: [Select]
<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>
« Last Edit: August 12, 2012, 03:44:20 pm by xboi209 »

Share on Facebook Share on Twitter


Offline Rude

  • Jr. Member
  • **
  • Posts: 67
  • Karma: -1
    • View Profile
Re: [code] Auto-resize large images
« Reply #1 on: June 19, 2011, 04:19:33 am »
thank you...this is beautiful.

Offline JEV

  • Newbie
  • *
  • Posts: 25
  • Karma: 1
    • View Profile
Re: [code] Auto-resize large images
« Reply #2 on: March 15, 2013, 03:18:20 pm »
Sorry to bring this to life, but I thought it would be better to pose the question here instead of creating a new thread about it. This code is simply amazing, thank you to whoever did it! I just have a question. After I have it, there's this tiny image and not saying the image was resized and to view it in full size, we need to click on it. Also, under the image it also says "Image Resizing Script <>". Isn't there a way to keep the feature but to delete these notes?


Thanks.

Offline KIЯBYFAN91

  • Newbie
  • *
  • Posts: 26
  • Karma: 0
  • Gender: Male
    • View Profile
    • Smash Forums
Re: [code] Auto-resize large images
« Reply #3 on: March 21, 2013, 04:45:42 pm »
Sorry to bring this to life, but I thought it would be better to pose the question here instead of creating a new thread about it. This code is simply amazing, thank you to whoever did it! I just have a question. After I have it, there's this tiny image and not saying the image was resized and to view it in full size, we need to click on it. Also, under the image it also says "Image Resizing Script <>". Isn't there a way to keep the feature but to delete these notes?


Thanks.
UNTESTED CODE W/O NOTES
Code: [Select]
<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>');
     
      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>
Max characters: 300; characters remaining: 254

Offline JEV

  • Newbie
  • *
  • Posts: 25
  • Karma: 1
    • View Profile
Re: [code] Auto-resize large images
« Reply #4 on: March 27, 2013, 11:08:15 am »
Thanks! I'll try it!

Offline evzkhii123

  • Newbie
  • *
  • Posts: 2
  • Karma: 0
    • View Profile
Re: [code] Auto-resize large images
« Reply #5 on: May 16, 2013, 03:54:42 pm »
It doesnt work in my theme. Can you specifically show me where i should place it?

 

Related Topics

  Subject / Started by Replies Last post
1 Replies
1431 Views
Last post June 12, 2010, 04:26:33 pm
by UFOwner
0 Replies
203 Views
Last post June 15, 2013, 05:15:38 pm
by forum
3 Replies
559 Views
Last post January 21, 2015, 06:54:49 am
by stevegbr
7 Replies
265 Views
Last post August 08, 2018, 09:20:16 pm
by CreateAForum
1 Replies
53 Views
Last post December 10, 2019, 06:56:18 pm
by CreateAForum