Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

What's the best practice for image resizing?

r0obertr0obert
edited May 2014 in Vanilla 2.0 - 2.8

v2.1

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

Tagged:

Best Answer

Answers

  • hgtonighthgtonight ∞ · New Moderator

    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?

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

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

  • hgtonighthgtonight ∞ · New Moderator

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

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • r0obertr0obert
    edited 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, ''); 
      }
    }
    
  • hgtonighthgtonight ∞ · New Moderator

    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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • @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>

  • hgtonighthgtonight ∞ · New Moderator

    Do you have any errors in your web console?

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

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • r0obertr0obert
    edited 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

  • hgtonighthgtonight ∞ · New Moderator

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

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • @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?

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    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!

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • @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...

Sign In or Register to comment.