Resize images based on aspect ratio?

djh_

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

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_

Cheers for the quick reply.

I'm running 2.1b1.

hgtonight

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_

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

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