Question

I want to reduce them to a maximum 200px width and keep the same layout with the 10px spacing the photos have. Also I don’t want to style the posts to be that wide and use overflow:hidden that will only cut off the photosets.

Answer 1

jQuery Solution

For this solution you will need the latest version of jQuery and the jQuery plugin imagesLoaded included in the head of the theme before the following:

<script type="text/javascript">
    $(document).ready(function() {
        $('iframe.photoset').each(function() {
            var i = this;
            $(i).attr("onload", "ps_resize(this)");
            var s = $(i).attr("src");
            s = s.replace(/\/500\//, "/200/");
            $(i).attr("src", s);
        });
     });
    function ps_resize(i) {
        $(i).contents().find("body").imagesLoaded(function() {
            $(i).attr("width", 200);
            $(i).attr("height", $(this).height());
         });
         return false;
    }
</script>

What Solution Does

1. When the DOM is ready, find all the photoset iFrames
2. For each iFrame…
   • set the “onload” attribute to your frame resizing function
   • get the frame’s source url, change the size (e.g. 500) to 200
   • set the frame’s source url (this will cause it to reload with a smaller photoset)
3. In the resizing function…
   • wait for the images to load
   • set the frame width to 200
   • set the frame height to the new height of the photoset

Additional Code for Infinite Scroll

If you are using the Infinite Scroll jQuery Plugin, you will need to additionally include this in your success callback function:

...
$(newElements).find('iframe.photoset').each(function() {
    var i = this;
    $(i).attr("onload", "ps_resize(this)");
    var s = $(i).attr("src");
    s = s.replace(/\/500\//, "/200/");
    $(i).attr("src", s);
 });
...

Obviously, if you’re using Infinite Scroll, I would suggest defining a function that is called on each iFrame on both the initial load and the scroll so you don’t have repeated code to maintain.