Resize images based on aspect ratio?

djh_ · February 2014

Hi.

I want to tweak the image resizer to differentiate between 'portrait' and 'lanscape' shots. Basically, if a shot is taller than it is wide, I want it to only occupy about 45 per cent of the post container, meaning that a user could post two portrait shots side by side at the same combined width as a single landscape image.

Is this possible? I've looked at the resizer code in global.js and have no idea what it's doing.

D.

hgtonight · February 2014

Welcome to the community!

What version number of Vanilla are you running?

I am sure it is possible. The resizing code and approach would be different based on your version of Vanilla.

djh_ · February 2014

Cheers for the quick reply.

I'm running 2.1b1.

hgtonight · February 2014

You can hook in after the image has been resized using the following JS.

jQuery(window).bind('ImagesResized', function() {
  // wait until all the images have been resized before working with them
  $('div.Message img').each(function() {
    // Do whatever you want in here.

    // You can get the natural width or height using the below code:
    var nWidth = $(this).naturalWidth();
    var nHeight = $(this).naturalHeight();
  });
});

djh_ · February 2014

Thanks for this! In the end I went with:

jQuery(window).bind('ImagesResized', function() {
  // wait until all the images have been resized before working with them
  $('div.Message img').each(function() {
    // Do whatever you want in here.
    // You can get the natural width or height using the below code:
    var container = $(this).closest('div.Message'); 
    if($(this).width() < $(this).height()) {
    $(this).css("max-width", "49%");    
    } else {
        $(this).css("max-width", "99%");    
    }
    $(this).css("margin-right", "1%");      
    // var nWidth = $(this).naturalWidth();
    // var nHeight = $(this).naturalHeight();
  });
});

(how do you input code in this thing?)

Shadowdare · February 2014

@djh_, I edited your post and put the code in a block with three tildes before and after the code like ~~~.

Resize images based on aspect ratio?

Comments