Resizing Tumblr Post iframes with Jquery

Question

I'm trying to fix a tumblr custom theme/layout with jquery. Right now, it's calling iframes that are 700px wide. Ideally, I want the iframe to be 540px wide, with a variable height. (The heights vary based on number of images vertically in a grid, but the image widths stay constant).

window.onload = function() {    
$('iframe.photoset').contents().find('.photoset_row').attr("style", "max-width:540px; margin-bottom: -4px; margin-left: 4px; overflow:visible; margin-top:4px ");
$('iframe.photoset').contents().find('.photoset_row').find('img').attr("style", "max-width:540px; height:auto; overflow:visible; margin-left: -6px;     ");
$('iframe.photoset').contents().find('.photoset_row_2').find('img').attr("style", "max-width:268px; height: auto; margin-right: 0px; max-height: auto; overflow:visible; margin-left: -6px; ");
$('iframe.photoset').contents().find('.photoset_row_3').find('img').attr("style", "max-width:177px; overflow:visible;margin-right: 0px; margin-left: -6px; ");    

Basically this will resize the width appropriately, but won't downsize the height proportionally.

Because the heights of the iframes will vary based on the number images within the iframe, I can't set the height with an absolute px value like I can with the width. I need it to be a relative height.

Answer 1

I've figured this out myself only recently, and all it takes a little math. You need to take their current width (tumblr gives all their iframes css widths) and compare it to the width you want it to find the ratio, then use the ratio to change the height. Something like this

ratio = new width / old width

width = old width * ratio
height = old height * ratio

So try this:

window.onload = function() {

    //define function for resizing to minimize repeated code
    var resize(element, newwidth) = function () {
        //find elements width and height
        var width = parseFloat(element.css("width"));
        var height = parseFloat(element.css("height"));

        //find ratio between length
        var ratio = 540 / width;

        //find new length            
        var width = width * ratio;
        var height = height * ratio;

        //change lengths                
        element.css("max-width", width + "px");
        element.css("max-height", height + "px");
    };

    //photoset
    $('iframe.photoset').contents().find('.photoset_row').each(function() {
        resize($(this), 540);
    }

    //images in row 1
    $('iframe.photoset').contents().find('.photoset_row').find('img').each(function() {
        resize($(this), 540);
    }

    //images in row 2
    $('iframe.photoset').contents().find('.photoset_row_2').find('img').each(function() {
        resize($(this), 268);
    }

    //images in row 3
    $('iframe.photoset').contents().find('.photoset_row_3').find('img').each(function() {
        resize($(this), 177);
    }

I'm a little shy on reading CSS in my head, so I don't know which ones of those margin values you need of the top of my head, but the height changing is here and I think you can figure out the margin values from there. If not, I can help play with it a little more with you.

I'd also like to thank you :) Your knowledge of re-sizing photo-sets is extremely useful to me and exactly what I was looking for when I found your question!