What's the best practice for image resizing?

r0obert · May 2014

v2.1

Images are breaking the comment div, what's the best solution for this issue?
Thanks!

hgtonight · May 2014

I figured it out. The bootstrap theme is missing the needed CSS rule. It needs the following rules:

.Message img {
  max-width: 100%;
}

Perhaps @Kasper can confirm?

hgtonight · May 2014

Are you using a custom theme?

The default js will resize images in the message list and add a link to the original full size image.

Is this not the case on your forum?

r0obert · May 2014

@hgtonight‌ No, it's not the case for me it seems. Big images always break the container. I'm using Bootstrap theme.

hgtonight · May 2014

Is there a global.js file being loaded in your head element?

r0obert · May 2014

@hgtonight said:
Is there a global.js file being loaded in your head element?

This?

<script src="/js/global.js?v=2.1" type="text/javascript"></script>

Global.js

// Shrink large images to fit into message space, and pop into new window when clicked.
// This needs to happen in onload because otherwise the image sizes are not yet known.
jQuery(window).load(function() {
   /*
   Adds .naturalWidth() and .naturalHeight() methods to jQuery for retreaving a 
   normalized naturalWidth and naturalHeight.
   // Example usage:
   var 
   nWidth = $('img#example').naturalWidth(),
   nHeight = $('img#example').naturalHeight();
   */

   (function($){
      var
      props = ['Width', 'Height'],
      prop;

      while (prop = props.pop()) {
         (function (natural, prop) {
            $.fn[natural] = (natural in new Image()) ? 
            function () {
               return this[0][natural];
            } : 
            function () {
               var 
                  node = this[0],
                  img,
                  value;

               if (node.tagName.toLowerCase() === 'img') {
                  img = new Image();
                  img.src = node.src,
                  value = img[prop];
               }
               return value;
            };
         }('natural' + prop, prop.toLowerCase()));
      }
   }(jQuery));

   jQuery('div.Message img').each(function(i,img) {
      var img = jQuery(img);
      var container = img.closest('div.Message');
      if (img.naturalWidth() > container.width() && container.width() > 0) {
         img.after('<div class="ImageResized">' + gdn.definition('ImageResized', 'This image has been resized to fit in the page. Click to enlarge.') + '</div>');
         img.wrap('<a href="'+$(img).attr('src')+'"></a>');
      }
   });

   // Let the world know we're done here
   jQuery(window).trigger('ImagesResized');
});

if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, ''); 
  }
}

hgtonight · May 2014

Go to the page where the images aren't resized. Right click on the page and select View Page source. Once that opens, hit Ctrl+f and type in global.js and see if it is found.

r0obert · May 2014

@hgtonight said:
Go to the page where the images aren't resized. Right click on the page and select View Page source. Once that opens, hit Ctrl+f and type in global.js and see if it is found.

Yes.

<script src="/js/global.js?v=2.1" type="text/javascript"></script>

hgtonight · May 2014

Do you have any errors in your web console?

Ctrl+Shift+K opens it in Firefox. Once open, reload the page.

r0obert · May 2014

@hgtonight said:
Do you have any errors in your web console?

Ctrl+Shift+K opens it in Firefox. Once open, reload the page.

Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery.min.js:3

hgtonight · May 2014

Under any of these images, do you see a resized message?

r0obert · May 2014

@hgtonight said:
Under any of these images, do you see a resized message?

Unfortunately no, not a single resized image in any thread. What's the issue?

hgtonight · May 2014

I figured it out. The bootstrap theme is missing the needed CSS rule. It needs the following rules:

.Message img {
  max-width: 100%;
}

Perhaps @Kasper can confirm?

Kasper · May 2014

I can indeed confirm—responsive images is a separate component in Bootstrap and it seems I've forgotten to implement it. Fix coming right up!

r0obert · May 2014

@hgtonight said:
I figured it out. The bootstrap theme is missing the needed CSS rule. It needs the following rules:
.Message img {
  max-width: 100%;
}
Perhaps Kasper can confirm?

Excellent. Working!! Thanks a ton, so easy, so smooth...

Actually that's the first thing I've done, add the css rule, unfortunately for me I'm a n00b and I've added .Comment .Message img { width: xxx height: auto; } pfff...

What's the best practice for image resizing?

Best Answer

Answers